OptionsOptions configurator builder

OptionsOptions enables you to build simple configurators. It uses Sketchfab to display the 3D model. With the configurator you can change the materials of your model. For example the body color of a car or the helmet color on a stormtrooper. Check out an example here.

OptionsOptions main window
OptionsOptions main window
The configurator website built by OptionsOptions
The configurator website built by OptionsOptions

Material setup

Once you’ve set up your materials OptionsOptions goes to work. It builds the configurator automatically. First it captures your materials in a material library. Then it uploads your model to Sketchfab. Finally it builds a mini website for you. The website contains menus to pick the options of your configurator. You can have one option to pick from, such as the body color of a car. But you can also have multiple independent options, such as body color, interior color and glass color. Each of which is configurable separately.

Features

  • Easy upload of your model to Sketchfab
  • Automatic generation of a webpage with configuration options
  • Converts your standard materials to pbr materials
  • One-click sketchfab scene setup to pbr. No need to enter sketchfab to change those settings
  • Proper documentation

History

  • 2015-12-04 0.01 Initial release

17 Comments

Join the discussion and tell us your opinion.

  • 2015-12-15 at 23:48

    Hello,

    I tested it. It’s powerfull !! Very good work !
    Is it possible to create states , not for materials only, but for objects.
    (for example to put an object 2 instead of an object 1 at the same place)
    in order to have a fully customize configurator ?
    Thank you very much for your work !

    Christophe

  • 2015-12-16 at 12:20

    Hello,

    Great job !!

    I tested it and it works very well.
    Is it possible to configure materials with textures ?

    Thank you very much for this work.

    Christophe

  • 2015-12-16 at 13:14

    Hi Christophe, thanks for the feedback! I really appreciate it.
    About the textures. It definitely is possible to make this work. The api allows this but there are some limitations. First of all the images need to be cors enabled and they need to be served from an HTTPS server. And I’d need to add it to the script of course.
    About showing and hiding objects, this is also possible. How would you organize this in 3dsmax? Somehow you need to let the script know which objects are variants. I was thinking about grouping objects or linking objects to a parent dummy.
    If there’s enough interest I’ll add these features for sure.

  • 2015-12-19 at 22:47

    Hi Klaas,
    thanks for your feedback.
    Despite these limitations for textures, this remains important. You are an excellent encoder.
    To hide and show objects the ideal would be to offer a small library of objects 2A. 3A. 4A. 5A … in a playlist associated with the object 1A to be replaced:
    https://sketchfab.com/playlists/embed?folder=8061ccceab1f44cf997cfca56c429eb9
    https://forum.sketchfab.com/t/api-configurator-switch-models/3831
    If you click another object 1B in the same file, another playlist 2B 3B 4B 5B …. is displayed to choose to replace 1B ….
    I know it’s a big job, but it would make a great 3D configurator !
    contact me by email if you want an image that summarize this idea, and you can talk about that with sketchfab’s team. (I can’t invest in this project)
    Thank you very much and even if you can’t do it your work is still super !
    Christophe

  • 2016-06-24 at 20:11

    Really enjoying your work Klaas!

    Just started playing with Sketchfab and can see the potential, as christophe 52 said, are there any plans to include texture files (.jpg etc)?

    I’d happily pay for that feature 🙂

    A bit like the Sketchfab experiment ‘Material Showcase’.

    Thanks again!
    – Richard

  • 2016-06-27 at 07:21

    Hi Richard, I haven’t worked on this tool for a while. But I’ve recently wrapped up two projects which use a Sketchfab configurator. I might be able to fold my experience with those back into this tool and figure out a sensible way to support textures.

  • 2016-07-07 at 18:22

    Hi !

    First thanks for your awesome work. I really appreciate it.

    I would like to make a 3D configurator for our Piano website with Sketchfab.
    Is it possible to embed the configurator in our site and if you buy a piano that we see how the customers configured it?

    Thank you very much
    Kind regards
    Christoph

    • 2016-07-07 at 21:15
      In reply to: Chris

      Hi Chris, thanks for your feedback. There are several ways to record the options a user has picked. One of them would be to store created configurations in a database. You can even create a screenshot of the configured 3D model with the sketchfab API. Combined this will give you a list of picked options and a screenshot of the actual model. Check out this project I’ve just finished: https://www.klaasnienhuis.nl/wp/2016/07/zodiac-nautic-boat-configurator/. It has the exact functionality you describe.

  • 2017-11-06 at 07:17

    hi klaas,
    i haven’t try this yet but can sketchfab priduce high quality render like game render engine, i like to create a configurator but the render is like game engine. though i assume sketchfab is easy to use than unity or unreal or any game engine to produce a 3d model configurator. can sketchfab open in mobile like android or ios? thank you. i’d love if you can share your knowledge to me.

    • 2017-11-06 at 10:21
      In reply to: rio

      Hi Rio, I suggest you go to sketchfab.com and see for yourself if it looks good enough for you. Sketchfab is more lightweight than the game engines you mention but a lot of effects are possible. It uses the pbr shader model, supports sub-surface scattering and a whole bunch of post effects like glow, ambient occlusion and depth of field. All these effects can be used in a configurator as well. Sketchfab also works on mobile, but keep in mind that performance on mobile greatly depends on the size of your 3D models.

  • 2018-06-21 at 13:10

    The documentation link on this page seems to be broken, can you please update it? Thanks for making all this available, it is very interesting.

  • 2019-06-24 at 16:06

    Hi, Klaas,

    Thank you for the OptionsOptions! It made it so made it so easy for me to use the configurator!
    I would like to use it
    Are we free to use the module? What kind of license does it have?

    • 2019-06-25 at 08:55
      In reply to: Reshma Joshi

      Hi Reshma, you’re free to use the script and create configurators with it.

  • 2019-09-02 at 11:10

    Did you end up integrating the model selection into the tool like with the Zodiac Engine? I imagine that could be very useful. Additionally with something like that you could use a 1 key frame fbx animation to set default visibility of some objects to 0 so if the model is viewed on sketchfab, viewers don’t see overlapping models. On the configurator you could then start the model in its static animation state then load default vis options from the tool. Beyond me as a 3D guy ¯\_(ツ)_/¯ but would be extremely useful.

    • 2019-09-05 at 09:31
      In reply to: Benjamin B

      Hi Benjamin, I haven’t added the capability to select objects by clicking on them in the the configurator. It’s a very nice way to interact, but also requires some clever UX in the final configurator. Because at first, it won’t be clear at all that models are clickable.
      Having the possibility to set the initial state of a model on sketchfab.com would be awesome. I have the exact same issue with my projects. I don’t believe fbx visibility properties translate to sketchfab. Though, setting the scale to 0 might work. But the sketchfab optimization process might actually delete objects with 0 scale.

  • 2020-03-29 at 20:51

    Hi Klaas, Thansk for your script and help about creaing 3D web configurator. I’m working on one but i’m facing a dead end. I can’t find a way to add a 5th sub value in “MaterialLibrary.js”
    any time a write another the “MaterialEditor.js” crash.
    I juste would like to add a 5th color possible to an object.
    thanks for your help.

Leave a reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.