请解释三个.js雷卡斯特方向参数

时间:2013-10-09 12:06:09

标签: javascript canvas three.js

我正试图从我在Three.js场景中布置的网格物体进行碰撞检测。我很担心Raycaster reallu是如何工作的,如果我做对了。

这是一个描述我有什么问题的小提琴

//Add cuba at 40/40
geometry = new THREE.CubeGeometry(20, 20, 20);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
mesh.position.setY(40)
scene.add(mesh);


//Add Ray    
var origin = new THREE.Vector3(50, 0, 0),
    direction = new THREE.Vector3(-1,0,0),
    ray = new THREE.Raycaster(origin, direction),
    collisionResults = ray.intersectObjects([mesh]);
if(collisionResults.length!==0){
   alert('Ray collides with mesh. Distance :' + collisionResults[0].distance)
}

//Add Arrow to show ray
scene.add( new THREE.ArrowHelper(direction, origin, 50, 0x000000));

无效: http://jsfiddle.net/FredricBerling/LwfPL/1/

工作: http://jsfiddle.net/FredricBerling/LwfPL/3/

基本上,小提琴布置了一个立方体,50个点形成了我向“方向”射击的光线。问题似乎是即使它不应该表示“命中”。

我布置了一个箭头,以显示我怀疑雷卡斯特拍摄光线的地方。

从其他测试来看,Raycaster的方向似乎与Arrowhelper中的方向不同。雷卡斯特似乎将射线射入场景的0,0,0。我很困惑

修改!罗布给出了答案。我需要确保渲染网格以便应用worl矩阵。使用正确的代码更新小提琴,该代码可用于按预期测试Raycaster。

1 个答案:

答案 0 :(得分:2)

你所看到的明显假阳性是因为即使你已经设置了盒子的位置,它还没有更新它的世界变换矩阵。这通常只在渲染之前发生。

如果您将光线投射测试移至第一次渲染之后(或手动调用updateWorld()),则不会受到影响。