Create a menu for changing colors object in scene

Questions
1

Good morning everyone,

I created a scene with three.js. I inserted the scene in an html site to keep it simple. I don’t know if it’s the best solution.
However, I would like to create a menu to change the color of the objects with a simple click. The same principle as changing the color of a shoe in a configurator.

Example, I have a blue object (obj) in the scene => if I click in the menu on the blue button, the object changes color to be displayed in blue (like another object, I created the same objects with 6 different colors)
Objects are exported by blender: obj and mtl.

My question, would it be better to create this menu in html or javascript? I don’t find any proposal or creation on the three.js website.

I don’t find any example or reference either with our friend google.
Here is an example of my three.js code:

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('../blender-files/');
mtlLoader.load('object1.mtl', function (materials) {

	materials.preload();

	var objLoader = new THREE.OBJLoader();
	objLoader.setMaterials(materials);
	objLoader.setPath('../blender-files/');
	objLoader.load('object1.obj', function(object){
		console.log(object);
			scene.add(object);
			RearLeft = object;

Thanks to you.

2

In general, you can build the UI with pure JavaScript or with a mix of HTML markup, CSS and JavaScript. It depends on the use case but in general I prefer the latter one since it makes the JS code easier to read. The following live example demonstrates this approach:

3

Hello ,

Thank you for your feedback and very responsive return.

I try through this site. In fact, I started a 3d configurator project. Once the user has chosen his colors for 4 displayed objects, I should save the information in a form.

4

I saw the site. The color change is done by hex codes from a library, well i think. The principle is good, I get it. However, the files coming from blender where the colors are registered are in mtl.
In the site, can we test these functions ?
otherwise, i do to search another principe for change color of object obj.

Thanks.

5

Bonjour,

Je reviens pour apporter une réponse à mon problème.
I come back with a part of solution.

I found this tutorial, so great.
J’ai trouvé une partie de la solution avec ce tuto : https://tympanus.net/codrops/2019/09/17/how-to-build-a-color-customizer-app-for-a-3d-model-with-three-js/

Have a nice day

2 Likes