threejs 光线投射不起作用答案

【问题标题】：threejs raycasting does not workthreejs 光线投射不起作用
【发布时间】：2015-11-24 10:03:44
【问题描述】：

我在尝试编写单元测试来检查碰撞检测时遇到问题。我尽可能简化代码 - 我在 (0, 0, 0) 中有一个平面，我从这个平面上方（从 (0, 100, 0)）到底部 (0, -1, 0) 进行光线投射，然后我假设找到与那架飞机的交点，但没有运气。

console.clear();
var intersections,
    from = new THREE.Vector3(0, 100, 0);
    direction = new THREE.Vector3(0, -1, 0),
    raycaster = new THREE.Raycaster();

var geometry = new THREE.PlaneGeometry(10, 10, 1, 1);
var ground = new THREE.Mesh(geometry);
ground.position.set(0, 0, 0);
ground.rotation.x = THREE.Math.degToRad(-90);

raycaster.set(from, direction);
intersections = raycaster.intersectObjects([ground]);
console.log(intersections);

这里有什么问题？为什么这个简单的代码没有显示任何交叉点？ (r73)。

jsfiddle example

【问题讨论】：

标签： three.js

【解决方案1】：

您需要在光线投射之前更新地面网格的世界变换。（通常，渲染器会在 render() 调用中为您执行此操作。）

console.clear();
var intersections,
    from = new THREE.Vector3(0, 100, 0);
    direction = new THREE.Vector3(0, -1, 0),
    raycaster = new THREE.Raycaster();

var geometry = new THREE.PlaneGeometry(10, 10, 1, 1);
var ground = new THREE.Mesh(geometry);
ground.position.set(0, 0, 0);
ground.rotation.x = THREE.Math.degToRad(-90);

ground.updateMatrixWorld(); // add this

raycaster.set(from, direction);
intersections = raycaster.intersectObjects([ground]);
console.log(intersections);

three.js r.73

【讨论】：