Three.js、PointerLock与碰撞检测
Three.js、PointerLock与碰撞检测
提问于 2013-08-31 10:02:15
我正在做一个3d虚拟家庭项目。除了碰撞检测之外，一切都很好。我用PointerLockControls做相机和运动。但我不知道如何确定所有可能方向上的碰撞。为了简单起见，我从(0，0，0，0)上的简单多维数据集的前向和后向碰撞开始：
rays = [
new THREE.Vector3(0, 0, 1),
new THREE.Vector3(0, 0, -1)
];然后：
function detectCollision() {
var vector;
var projector = new THREE.Projector();
for (var i = 0; i < rays.length; i++) {
var vector = rays[i].clone();
projector.unprojectVector(vector, camera);
var rayCaster = new THREE.Raycaster(controls.getObject().position, vector.sub(controls.getObject().position).normalize());
var intersects = rayCaster.intersectObject(cube, true);
if (intersects.length > 0 && intersects[0].distance < 50) {
console.log(vector);
console.log(i, intersects);
$("#status").text("Collision detected @ " + rays[i].x + "," + rays[i].z +
"<br \>" + intersects[0].distance);
}
}但是当我离我的立方体足够近时，控制台显示两道射线都击中了立方体！那为什么呢？我的射线有什么问题吗？向量(0,0，1)应该向后，(0，0，-1)应该向前，对吗？请帮帮我，免得我在3d里迷路！谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-09-03 19:29:52
终于发现了！！解决办法。我不擅长数学，但最后我弄明白了。
在从指针锁控件获得方向后，取决于按下哪个键，我将方向放入一个旋转矩阵中，以得到实际的方向向量(感谢Icemonster提供的线索)：
function detectCollision() {
unlockAllDirection();
var rotationMatrix;
var cameraDirection = controls.getDirection(new THREE.Vector3(0, 0, 0)).clone();
if (controls.moveForward()) {
// Nothing to do!
}
else if (controls.moveBackward()) {
rotationMatrix = new THREE.Matrix4();
rotationMatrix.makeRotationY(180 * Math.PI / 180);
}
else if (controls.moveLeft()) {
rotationMatrix = new THREE.Matrix4();
rotationMatrix.makeRotationY(90 * Math.PI / 180);
}
else if (controls.moveRight()) {
rotationMatrix = new THREE.Matrix4();
rotationMatrix.makeRotationY((360-90) * Math.PI / 180);
}
else return;
if (rotationMatrix !== undefined){
cameraDirection.applyMatrix4(rotationMatrix);
}
var rayCaster = new THREE.Raycaster(controls.getObject().position, cameraDirection);
var intersects = rayCaster.intersectObject(hitMesh, true);
$("#status").html("camera direction x: " + cameraDirection.x + " , z: " + cameraDirection.z);
if ((intersects.length > 0 && intersects[0].distance < 25)) {
lockDirection();
$("#status").append("<br />Collision detected @ " + intersects[0].distance);
var geometry = new THREE.Geometry();
geometry.vertices.push(intersects[0].point);
geometry.vertices.push(controls.getObject().position);
scene.remove(rayLine);
rayLine = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: 0xFF00FF, linewidth: 2}));
scene.add(rayLine);
}
}另外，我对PointerLockControls.js做了一些修改，当相机击中对撞机物体时停止移动。我在这里上传我的样本：CameraRayCasting.zip
更新
最后，我找到了一些时间来完成我的TouchControls项目。它使用了threejs v0.77.1，支持触摸和点击测试。
看看这里：TouchControls
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18546875
复制相关文章
相似问题
腾讯云开发者
