Question

I have rendered model in ThreeJS. Now, I need to add some interactivity so that:

1. Depending on user entered values I need to color some parts of the model.
2. If I click on any model part I want it to be highlighted.

I am new to ThreeJS and a little confused. How do I do this?

Answer 1

1. If you want to update parts of the model, you need to have a look at textures & materials examples.
2. When you click the model do you want the whole model to be highlighted or just the face currently under the mouse ? Either way, since you’re working in 3D you will need to create a vector for the mouse position which you’d unproject based on the camera’s projection matrix and using the camera’s position shoot a ray in depth in your 3d scene to see which object(s) intersect it. Luckily the code’s already in many samples like canvas_interactive_cubes:

In init():

document.addEventListener( 'mousedown', onDocumentMouseDown, false );

and:

function onDocumentMouseDown( event ) {

                event.preventDefault();

                var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
                projector.unprojectVector( vector, camera );

                var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );

                var intersects = ray.intersectObjects( objects );

                if ( intersects.length > 0 ) {

                    intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );

                    var particle = new THREE.Particle( particleMaterial );
                    particle.position = intersects[ 0 ].point;
                    particle.scale.x = particle.scale.y = 8;
                    scene.add( particle );

                }

                /*
                // Parse all the faces
                for ( var i in intersects ) {

                    intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );

                }
                */
            }

I recommend starting from there.