object - three.js 获得双击的 3d 对象

Question

Ciao，我正在努力做到这一点：我将能够知道在我的场景中双击了哪个 3d 对象，并为相机位置设置动画以将对象带到屏幕的中心。

我尝试调整使用 raycaster 和投影仪的交互式立方体示例但没有成功...

http://www.gioblu.com/GiO/web/solarsystem/index_backup

如您所见，您可以在空间中导航并使用鼠标左右键更改相机位置。通过双击地球，我将能够回到初始相机位置（屏幕中心的地球）。

Answer 1

为什么你没有通过改编这个例子获得成功？发生了什么错误？你是说这个例子吗？因为 raycaster 和投影仪是您正在寻找的方式。

首先，您需要容器上的 ondblclick 事件的 eventListener。在事件功能中，您可以从链接的示例中复制和粘贴：

1) 保存鼠标坐标

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

2）通过相机将坐标投影到世界系统并创建射线

var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
projector.unprojectVector( vector, camera );
raycaster.set( camera.position, vector.sub( camera.position ).normalize() );

3）检查双击的元素是否是你的星球

var intersects = raycaster.intersectObject( "your_planet" );
if ( intersects.length > 0 ) {
    reset your camera
}

希望这可以帮助！