[SOLVED] Kitchen Visualizer Tutorial

Hi! I am super new in here. I got here after a client asked me to build something EXACTLY like the Toll Brothers Kitchen Visualizer. After hours browsing Google for a way to go (Initially I thought on doing it with Three.js) I found the Toll Brothers Visualizer (literally 15 minutes ago) and I super happy…BUT…
I have no idea where to start.

I am already playing with the Orange Room demo, and I guess I will be able to recreate something similar, what I can’t get my head around is the part where the users selects a material and it changes the current one.

Is there any tutorial on how to do something similar to that?
Any tips in the right direction will be appreciated!


The Orange Room environment is a useful project to look at, for sure. And be sure to read the User Guide - especially:


Getting visual realism via things like image-based lighting, box-projected cubemaps and HDR lightmaps is super-important.

As for how you would set the material of an object when clicking a button, try this:


1 Like

Thanks! Will definitely look into that. And I agree, the Orange Room really helps. Quick question, do you know how was the room imported into PlayCanvas? Can I make my room in SketchUp or C4D and import those files into PlayCanvas to get a similar result?

Anyway, I will make my own tests, but if you know what the circuit should be into achieving something similar I will appreciate it!
Thanks again!

Orange Room was made in 3ds Max. It was exported to FBX and then dropped into the Editor.

The FBX exporter in SketchUp is not very good (when I last tried it). Models coming from SketchUp often have a large number of meshes (equivalent to draw calls in the engine).

Generally, 3ds Max, Maya and Blender tend to have a great reputation for 3D asset production for PlayCanvas. C4D might be OK but I don’t personally have any experience with it.

1 Like

Thanks again Will, will definitely be making some tests!

1 Like