Object three.js获取双击的三维对象

Object three.js获取双击的三维对象,object,vector,three.js,double-click,Object,Vector,Three.js,Double Click,Ciao,我正在尝试实现这一点:我将能够知道在我的场景中双击哪个3d对象,并设置摄影机位置的动画,使该对象位于屏幕中心 我尝试改编使用raycaster和投影仪的交互式立方体示例,但没有成功 正如您所见,您可以在空间中导航,并使用鼠标左键和右键更改相机位置。双击这个星球,我就可以回到相机的初始位置(屏幕中央的地球)。为什么你没有成功地修改这个例子?发生了什么错误?你是说举个例子吗? 因为raycaster和投影仪是你要寻找的方式 首先,您需要一个eventListener,用于容器上的ondb

Ciao,我正在尝试实现这一点:我将能够知道在我的场景中双击哪个3d对象,并设置摄影机位置的动画,使该对象位于屏幕中心

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


正如您所见,您可以在空间中导航,并使用鼠标左键和右键更改相机位置。双击这个星球,我就可以回到相机的初始位置(屏幕中央的地球)。

为什么你没有成功地修改这个例子?发生了什么错误?你是说举个例子吗? 因为raycaster和投影仪是你要寻找的方式

首先,您需要一个eventListener,用于容器上的ondblclick事件。在事件函数中,您可以复制并粘贴链接示例:

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
}
希望这有帮助