如何投射可见光线threejs [英] How to cast a visible ray threejs

问题描述

我想瞄准具有相机视觉的物体(因为用户会看着物体，而不是用鼠标指向它).

I want to aim for objects with cameras' vision (as the user would look at the object, not point at it with mouse).

我正在像这样从相机投射光线

I'm casting a ray from the camera like this

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 );

这让我找到了交叉点，但它有时似乎会偏离.所以我想添加目标(十字准线).那将是光线末端或中间的物体(网格)上的某种东西.

This gets me the intersections but it seems to wander off sometimes. So I'd like to add aim (crosshair). That would be somekind on object (mesh) at the end or in the middle of the ray.

如何添加?当我创建一条常规线时，它位于相机前面，因此屏幕会变黑.

How can I add it? When I created a regular line it was in front of the camera so the screen would go black.

推荐答案

您可以像这样将一个由简单几何体构建的十字准线添加到您的相机中:

You can add a crosshair constructed from simple geometry to your camera like this:

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 );

三.js r107

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

如果你没有一个特殊的用例，你需要像你正在做的那样从你的相机中检索位置和旋转，我想你的徘徊"可以通过使用这些参数调用你的 raycaster 来解决.:

In case you dont have a special usecase where you need to retrieve the position and rotation from your camera like you are doing, I guess your "wandering off" could be fixed by calling your raycaster with these arguments.:

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

<小时>

投射可见光线然后，您可以通过使用箭头助手绘制箭头来在 3D 空间中可视化您的光线投射.在您的光线投射之后执行此操作:

---

Cast visible ray Then you can visualize your raycast in 3D space by drawing an arrow with the arrow helper. Do this after your raycast:

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

这篇关于如何投射可见光线threejs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！