Three.js用相机选择对象,没有鼠标

Posted

技术标签:

【中文标题】Three.js用相机选择对象,没有鼠标【英文标题】:Three.js select object with camera, no mouse 【发布时间】:2015-12-26 03:25:35 【问题描述】:

在 Three.js 应用程序中,我想获取透视相机指向的对象,为此我阅读了 raycaster 文档。 我发现的所有文档都在谈论使用相机和来自鼠标坐标的 Vector2 进行 doind 光线投射,但我不想使用鼠标的 2d 坐标。相机可以出于任何原因旋转:单击并拖动屏幕,触摸控制甚至VR控制,我只想从透视相机的中心点进行光线投射并将它所看到的对象设置为“选定”。

有什么建议吗?

【问题讨论】:

【参考方案1】:

THREE.Raycaster.set() 需要 origindirection 向量:

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

【讨论】:

以上是关于Three.js用相机选择对象,没有鼠标的主要内容,如果未能解决你的问题,请参考以下文章

Three.js 3D缩放到鼠标位置

如何通过鼠标移动事件获取相机位置并在three.js中转换为屏幕坐标? [关闭]

在three.js中获取鼠标点击点的3D坐标

THREE.JS : 带有光线投射器和透视相机的点击事件

在 Three.JS 中通过鼠标单击选择 Collada 对象

使用鼠标围绕中心旋转 Three.js 相机