如何在threejs中投射可见的光线

Question

如何在threejs中投射可见的光线

5

我希望通过相机的视角来瞄准物体（就像用户看物体一样，而不是用鼠标指向它）。

我正在使用以下方式从相机投射一条光线

rotation.x = camera.rotation.x;
    rotation.y = camera.rotation.y;
    rotation.z = camera.rotation.z;
    raycaster.ray.direction.copy( direction ).applyEuler(rotation);
    raycaster.ray.origin.copy( camera.position );

var intersections = raycaster.intersectObjects( cubes.children );

这个代码可以得到交点，但有时会偏移。因此我想添加瞄准器（十字线）。这将是一种在射线末端或中间的物体（网格）。

如何添加呢？当我创建一条普通的线时，它在相机前面，屏幕会变黑。

- Noripsni

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Falk Thiele · Accepted Answer

你可以像这样将由简单几何体构成的十字准心添加到你的相机中：

var material = new THREE.LineBasicMaterial({ color: 0xAAFFAA });

// crosshair size
var x = 0.01, y = 0.01;

var geometry = new THREE.Geometry();

// crosshair
geometry.vertices.push(new THREE.Vector3(0, y, 0));
geometry.vertices.push(new THREE.Vector3(0, -y, 0));
geometry.vertices.push(new THREE.Vector3(0, 0, 0));
geometry.vertices.push(new THREE.Vector3(x, 0, 0));    
geometry.vertices.push(new THREE.Vector3(-x, 0, 0));

var crosshair = new THREE.Line( geometry, material );

// place it in the center
var crosshairPercentX = 50;
var crosshairPercentY = 50;
var crosshairPositionX = (crosshairPercentX / 100) * 2 - 1;
var crosshairPositionY = (crosshairPercentY / 100) * 2 - 1;

crosshair.position.x = crosshairPositionX * camera.aspect;
crosshair.position.y = crosshairPositionY;

crosshair.position.z = -0.3;

camera.add( crosshair );
scene.add( camera );

Three.js r107

http://jsfiddle.net/5ksydn6u/2/

如果您没有特殊用例需要从相机中检索位置和旋转，就像您正在执行的操作一样，那么我猜您的“偏离”问题可以通过使用这些参数调用您的射线投射器来解决:

raycaster.set( camera.getWorldPosition(), camera.getWorldDirection() );
var intersections = raycaster.intersectObjects( cubes.children );

投射可见光线 然后你可以使用箭头助手绘制箭头，在3D空间中可视化你的光线投射。在进行光线投射后执行此操作：

scene.remove ( arrow );
arrow = new THREE.ArrowHelper( camera.getWorldDirection(), camera.getWorldPosition(), 100, Math.random() * 0xffffff );
scene.add( arrow );