three.js监听点击模型事件
three.js监听模型事件是通过THREE上的Raycaster方法实现的
原理是通过获取相机和鼠标点击时的位置,计算并返回一条射线上的模型队列
//获取鼠标坐标 处理点击某个模型的事件 let mouse = new THREE.Vector2(); let raycaster = new THREE.Raycaster(); console.log(scene); function onmodelclick(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++) { // intersects[i].object.material.color.set(0xff0000); // } //点击的第一个模型变红 intersects[0].object.material.color.set(0xff0000); } window.addEventListener("click", onmodelclick);