ThreeJS how to add interactivity,

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

this event manager can help you.

import { Scene, PerspectiveCamera, WebGLRenderer, Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
import { InteractionManager } from 'three.interaction';

const renderer = new WebGLRenderer({ canvas: canvasElement });
const scene = new Scene();
const camera = new PerspectiveCamera(60, width / height, 0.1, 100);

// new a manager, then you can add interaction-event with your free style
const interactionManager = new InteractionManager(renderer, scene, camera);

const cube = new Mesh(
  new BoxGeometry(1, 1, 1),
  new MeshBasicMaterial({ color: 0xffffff }),
);
cube.cursor = 'pointer';
cube.on('click', function(ev) {});
cube.on('touchstart', function(ev) {});
cube.on('touchcancel', function(ev) {});
cube.on('touchmove', function(ev) {});
cube.on('touchend', function(ev) {});
cube.on('mousedown', function(ev) {});
cube.on('mouseout', function(ev) {});
cube.on('mouseover', function(ev) {});
cube.on('mousemove', function(ev) {});
cube.on('mouseup', function(ev) {});
// ...

scene.add(cube);

more detail see three.interaction.js

Answer 2

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.

Answer 3

update

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 raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

                    var intersects = raycaster.intersectObjects( objects );

                    if ( intersects.length > 0 ) {

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

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

                    }

                }