THREE.JS 光线投射器

Question

How to select only a specific object by clicking the mouse in THREE.JS

Now the function is executed by clicking on any point, although the condition states the name mesh

var cubeGeometry = new THREE.BoxGeometry(100, 100, 100);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x9370DB});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.y = 50;
cube.name = "cube";
scene.add(cube);

const sizeBox = 30;
const geo = new THREE.BoxGeometry(sizeBox, sizeBox, sizeBox);
const mat = new THREE.MeshPhongMaterial({
  side: THREE.DoubleSide,
});
const earth = new THREE.Mesh(geo, mat);

earth.position.set(-300, sizeBox/2, 10);

scene.add(earth);

const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2();

function onMouseClick( event ) {

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

raycaster.setFromCamera( mouse, camera );


const intersects = raycaster.intersectObjects( scene.children );

console.log(intersects);

for ( var i = 0; i < intersects.length; i++ ) {
  console.log(intersects[ i ].name)
    
    if(intersects[ i ].name = 'cube') {
        gsap.to(camera.position, {z: 100, duration: 10})
    }
    

}

}

window.addEventListener( 'click', onMouseClick, false );

Answer 1

if (intersects[ i ].name = 'cube') { 
    gsap.to(camera.position, {z: 100, duration: 10})
} 

You're not testing anything in that "if" statement. It should be "===" instead of "=".