使用Raycaster从玩家的视图中获取交叉点坐标?

时间:2014-03-16 12:47:19

标签: javascript three.js raycasting

我无法使用Raycaster获取玩家在世界各地的坐标。它没有在任何十字路口上捡到。

更具体地说,我试图获取地形上的交点坐标,该坐标由多个BufferGeometry网格组成。以下是我使用Raycaster example获取的代码:( groupedMeshes数组存储BufferGeometry网格)

var mouseX = ( event.clientX / window.innerWidth ) * 2 - 1;
var mouseY = -( event.clientY / window.innerHeight ) * 2 + 1;

var vector = new THREE.Vector3( mouseX, mouseY, camera.near );

// Convert the [-1, 1] screen coordinate into a world coordinate on the near plane
var projector = new THREE.Projector();
projector.unprojectVector( vector, camera );

var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

// See if the ray from the camera into the world hits one of our meshes
var intersects = raycaster.intersectObject( groupedMeshes );
lastIntersects = intersects;

if ( intersects.length > 0 ) {
    console.log("Intersection!");
}

显示玩家观点的图像:
(红点解释说我想将光线从相机中心投射到地形上)

enter image description here

鼠标/指针被锁定(第一人称摄像机视图)所以我假设我想检查屏幕中心的交叉点?上面的代码没有这样做,所以我在没有锁定指针的情况下进行了测试。

如果有人能够理解为什么它没有检测到任何交叉路口,我真的很感激帮助。感谢。


修改
似乎我应该使用raycaster.intersectObjects( groupedMeshes );而不是raycaster.intersectObject( groupedMeshes );。我的错。

所以我现在唯一的问题是如何将射线从玩家的第一人称视角拍摄到地形。谢谢!

EDIT2:

var vector = new THREE.Vector3( 0, 0, 0.5 );

var projector = new THREE.Projector();
projector.unprojectVector( vector, camera );

var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

var intersects = raycaster.intersectObjects( groupedMeshes );
lastIntersects = intersects;

if ( intersects.length > 0 ) {
    console.log(intersects);
}

1 个答案:

答案 0 :(得分:2)

通过查看this example脚本来解决问题。

我现在正在使用它,它允许我从相机位置向玩家/相机朝向的方向拍摄光线:

var raycaster = new THREE.Raycaster();
var direction = new THREE.Vector3( 0, 0, -1 );
var rotation = new THREE.Euler( 0, 0, 0, "YXZ" );

function shootRay() {
    rotation.set( pitchObject.rotation.x, yawObject.rotation.y, 0 );

    raycaster.ray.direction.copy( direction ).applyEuler( rotation );
    raycaster.ray.origin.copy( yawObject.position );

    var intersections = raycaster.intersectObjects( groupedMeshes );
    if ( intersections.length > 0 ) {
        console.log(intersections[0].point);
    }
}