three.js 创建模型后,想要实现点击模型获取模型对象触发相应事件。可以使用它提供的API THREE.Raycaster()
https://threejs.org/docs/index.html?q=Raycaster#api/en/core/Raycaster
//监听点击事件 window.addEventListener('click', (event) => { event.preventDefault(); var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); mouse.x = ((event.clientX) / renderer.domElement.clientWidth) * 2 - 1; mouse.y = -((event.clientY) / renderer.domElement.clientHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); var intersects = raycaster.intersectObjects(scene.children, true); //当intersects.length > 0说明碰点击到物体(可能为多个重合的物体),获取最近的物体名称进行判断 if (intersects.length > 0) { console.log(intersects) } });
如果当前场景不是整个页面 需要调整鼠标拾取位置 否则获取数据不准确具体调整代码如下(其中的renderer就是场景canvas大小)
const mouse = new THREE.Vector2(); // 转换为webgl坐标系下的鼠标位置 mouse.x = ((event.clientX - renderer.domElement.getBoundingClientRect().left) / renderer.domElement.clientWidth) * 2 - 1; mouse.y = -((event.clientY - renderer.domElement.getBoundingClientRect().top) / renderer.domElement.clientHeight) * 2 + 1; // // 使用鼠标位置更新射线投射器 raycaster.setFromCamera(mouse, camera); // // 计算鼠标点击的所有物体 const intersects = raycaster.intersectObjects(scene.children, true); // 如果有物体被点击,输出它的信息 if (intersects.length > 0) { // 取第一个被点击的物体 let intersect = null; intersects.forEach((ele) => { if(ele.object.name == "partitionName"){ intersect = ele; } }) if(intersect){ // 输出被点击的物体信息 console.log('输出被点击的物体信息'); console.log(intersect.object); if(intersect.object.partitionInfo.volume){ intersect.object.partitionInfo.volume = Number(intersect.object.partitionInfo.volume).toFixed(2) } this.currentPartition = { ...intersect.object.partitionInfo } // console.log(intersects); } // 你可以获取更多的信息,例如点的位置、面的法线等 // console.log(intersect.point); // console.log(intersect.face.normal); }
标签:intersects,鼠标,three,js,点击,renderer,intersect,console,mouse From: https://www.cnblogs.com/lst619247/p/18451002