ThreeJs：检查对象是否在相机的中心

Question

我想检查一个圆柱体是否或多或少位于相机中间以执行交互。气缸像按钮一样操作。我的想法是检查视锥体，但我不知道如何调整 z 轴。或者他们可能是更好的选择？

var frustum = new THREE.Frustum();
var matrix = new THREE.Matrix4().multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
frustum.setFromMatrix( matrix );
if(frustum.containsPoint( cylinder.position ))
  cylinder.material.color.setHex( '0xbada55' );
else      
  cylinder.material.color.setHex( '0xffcc00' );

这会检查圆柱体是否在视图中，如果在中间范围内。

Answer 1

您可以raycast, using camera.getWorldDirection()作为目标。

像这样：

var raycaster = new THREE.Raycaster(camera.position, camera.getWorldDirection());

然后检查你想要的物体是否被击中。

var intersects = raycaster.intersectObjects(scene.children);

if (intersects && intersects[0].object.id == myObjectId) {
    // Object is in the center of the camera
}

Working fiddle

Answer 2

这通常使用光线投射来完成：您将一条光线从视口中心投射到场景中，并检查该光线是否与任何对象相交。原则上，这是您需要的代码：

var raycaster = new THREE.Raycaster();
var center = new THREE.Vector2(0, 0);
var raycastTargets = [
  // add objects (meshes) that should be subject to raycasting
];

function render() {
  // ...

  camera.updateMatrixWorld();
  raycaster.setFromCamera(center, camera);

  var intersections = raycaster.intersectObjects(raycastTargets);
  var intersection = (intersections.length) > 0 ? intersections[0] : null;

  // ...
}

在渲染函数中的代码之后，您将在 intersection 中看到相关对象是否位于视图的中心。

Answer 3

光线投射很昂贵。

最简单的方法是将圆柱体位置投影到屏幕上space，然后检查它是否靠近屏幕中心。这样，您还可以定义一个阈值来确定它需要离中心多远：

var threshold = 0.2;

var positionScreenSpace = cylinder.position.clone().project(camera);
positionScreenSpace.setZ(0);

var isCloseToCenter = positionScreenSpace.length() < threshold;

我在这里做了一个演示：https://jsfiddle.net/holgerl/z199hzgd/

ThreeJs：检查对象是否在相机的中心

ThreeJs: Check if Object is in center of Camera

3d

three.js

frustum