Change color to a specific part of the model

Questions
, ,
1

I’m trying to change the colors of the different materials of a shoe. I’ve tried for days, but I only can load two different shoes with different colors, but I want only one load and change all the shoe components. How can I do this?

2

Can you please provide some code that shows how you load and create your shoe meshes?

3

Sure here is the code:

<script>

       var camera, scene, renderer, mesh, loader, mesh2, loader2;
       var obj = './models/sandalo3.json';
       var obj2 = './models/sandalo7.json';

            init();
            animate();

            function init() {

                var BaseAzzurraButtonId = document.getElementById( 'BaseAzzurraButtonId' );
                var BaseGiallaButtonId = document.getElementById( 'BaseGiallaButtonId' );

                camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
                camera.position.z = 1000;

                scene = new THREE.Scene();
                scene.background = new THREE.Color( 0x000 );

                loader = new THREE.JSONLoader();

                loader.load( obj, function( geometry, materials ) {
                    mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(materials) );
                    mesh.scale.set( 150, 150, 150 );
                    mesh.position.y = 0;
                    mesh.position.x = 0;
                    mesh.rotation.x = 340;
                    scene.add( mesh );
                } );

                loader2 = new THREE.JSONLoader();
                    loader2.load( obj2, function( geometry, materials ) {
                    mesh2 = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(materials) );
                    mesh2.scale.set( 150, 150, 150 );
                    mesh2.position.y = 0;
                    mesh2.position.x = 0;
                    mesh2.rotation.x = 340;
                    } );

                BaseAzzurraButtonId.onclick = function BaseAzzurraButtonId() {
                    scene.remove( mesh );
                    scene.add( mesh2 );
                    animate2();
                }

                BaseGiallaButtonId.onclick = function BaseGiallaButtonId() {
                    scene.remove( mesh2 );
                    scene.add( mesh );
                }

                var ambientLight = new THREE.AmbientLight(0x555555);
                scene.add(ambientLight);

                var ambientLight2 = new THREE.AmbientLight(0x555555);
                scene.add(ambientLight2);

                var ambientLight3 = new THREE.AmbientLight(0x555555);
                scene.add(ambientLight3);

                var directionalLight = new THREE.DirectionalLight(0xffffff);
                directionalLight.position.set(1, 1, 1).normalize();
                scene.add(directionalLight);

                renderer = new THREE.WebGLRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );

                document.body.appendChild( renderer.domElement );

            }

            function animate() {

                requestAnimationFrame( animate );
                mesh.rotation.y += 0.02;
                renderer.render( scene, camera );
            }

            function animate2() {

                requestAnimationFrame( animate2 );
                mesh2.rotation.y += 0.02;
                renderer.render( scene, camera );
            }
    </script>
4

First of all, MeshFaceMaterial is deprecated. You can directly apply an array of materials to the mesh constructor.

If you want to change the color of the different materials, you can iterate over the materials parameter of the loaders onLoad callback function. It’s an ordinary JavaScript array.

BTW: It’s not necessary to create three ambient lights in the scene. Instead, change the color and intensity of a single object for a different light setup.

1 Like
5

Ok thank you a lot

6

And you don’t need additional copies of any given loader. You can reuse them at will, with different meshes, etc…

This is redundant:
loader2 = new THREE.JSONLoader();
loader2.load( obj2, function( geometry, materials ) {

In other words, just do:
loader.load( obj2, function( geometry, materials ) {

1 Like