【问题标题】:Three.js select object with camera, no mouseThree.js用相机选择对象,没有鼠标
【发布时间】:2015-12-26 03:25:35
【问题描述】:
在 Three.js 应用程序中,我想获取透视相机指向的对象,为此我阅读了 raycaster 文档。
我发现的所有文档都在谈论使用相机和来自鼠标坐标的 Vector2 进行 doind 光线投射,但我不想使用鼠标的 2d 坐标。相机可以出于任何原因旋转:单击并拖动屏幕,触摸控制甚至VR控制,我只想从透视相机的中心点进行光线投射并将它所看到的对象设置为“选定”。
有什么建议吗?
【问题讨论】:
标签:
javascript
3d
three.js
raycasting
【解决方案1】:
THREE.Raycaster.set() 需要 origin 和 direction 向量:
origin — 光线投射的原点向量。
direction — 为光线提供方向的方向向量。应该归一化。
设置摄像机世界位置为origin,世界方向为direction:
var raycaster = new THREE.Raycaster();
raycaster.set( camera.getWorldPosition(), camera.getWorldDirection() );
var intersects = raycaster.intersectObjects( objectsArray );
if ( intersects.length > 0 ) {
//...
}
【解决方案2】:
Falk 的代码仍然有效,但 Three.js (>r90) 要求您定义一个目标 [1]:
现在需要目标
你所要做的就是:
let camera_world_pos = new THREE.Vector3();
let camera_world_dir = new THREE.Vector3();
let raycaster = new THREE.Raycaster();
camera.getWorldPosition(camera_world_pos);
camera.getWorldDirection(camera_world_dir);
raycaster.set(camera_world_pos, camera_world_dir);
let intersects = raycaster.intersectObjects( objectsArray );
if ( intersects.length > 0 ) {
//...
}
[1]https://github.com/mrdoob/three.js/issues/12231