Three.js 鼠标双击获取 Mesh 结构点世界坐标

// 初始化场景、相机、渲染器 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);

// 添加一个立方体作为mesh结构 var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); scene.add(cube);

// 监听双击事件 var doubleClick = false; var timeout; renderer.domElement.addEventListener('dblclick', function(event) { event.preventDefault();

// 获取相对于canvas的鼠标位置 var mouse = new THREE.Vector2(); mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

// 创建一个射线投射器 var raycaster = new THREE.Raycaster(); raycaster.setFromCamera(mouse, camera);

// 获取射线与mesh结构的相交点 var intersects = raycaster.intersectObject(cube);

if (intersects.length > 0) { // 如果双击了mesh结构上的某一点，则输出该点相对于世界坐标系的坐标 if (doubleClick) { var point = intersects[0].point; console.log('World Coordinates:', point); } else { // 如果只单击一次，则提示不能够获得该点的世界坐标 console.log('Cannot get world coordinates with a single click'); }

// 设置doubleClick为true，表示下一次点击为双击
doubleClick = true;
clearTimeout(timeout);
timeout = setTimeout(function() {
  // 如果在一定时间内没有第二次点击，则重置doubleClick为false
  doubleClick = false;
}, 300);

} });

camera.position.z = 5;

// 渲染场景 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate();