function onMouseDblclick(event) {
event.preventDefault();
let rayCaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
let canvas = document.getElementById('container');
//这里的canvas 就是你得div 你把场景放在了一个div里面的话 就这样写 然后你得其余的代码但凡是 window。innerheight window。innerwidth都得改成 你得div的 宽高
let getBoundingClientRect = canvas.getBoundingClientRect();
let x = ((event.clientX - getBoundingClientRect.left) / canvas.offsetWidth) * 2 - 1;// 标准设备横坐标
let y = -((event.clientY - getBoundingClientRect.top) / canvas.offsetHeight) * 2 + 1;// 标准设备纵坐标
let standardVector = new THREE.Vector3(x, y, 1);
let worldVector = standardVector.unproject(camera);
let ray = worldVector.sub(camera.position).normalize();
rayCaster = new THREE.Raycaster(camera.position, ray);
let intersects = rayCaster.intersectObjects(scene.children, true);
rayCaster.setFromCamera( mouse, camera );
let intersectsObj = rayCaster.intersectObject( scene, true );
if (intersects.length > 0) {
console.log(intersects[0].object)
}
}
这篇博客详细介绍了在Three.js中如何实现鼠标双击事件来创建Raycaster对象,进行3D场景交互。通过计算鼠标坐标转换为标准设备坐标,并结合相机位置,实现与场景对象的交互检查。博客主要探讨了3D图形编程中的碰撞检测技术。

1481

被折叠的 条评论
为什么被折叠?



