我想针对具有摄像头视觉的对象(因为用户会看着该对象,而不是用鼠标指向该对象)。
我像这样从相机投射光线
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 );
这让我到了十字路口,但有时似乎在徘徊。所以我想增加瞄准(十字准线)。那将是射线末端或中间的某种物体(网格)。
如何添加?当我创建一条常规线时,它位于相机的前面,因此屏幕会变黑。
您可以像这样将由简单几何构造而成的十字准线添加到相机中:
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来解决“游荡”的问题:
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 );
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句