【发布时间】：2014-06-29 15:27:00
【问题描述】：
你好我尝试控制一个网格，他可以通过mesh.translate相对于它的旋转转动和移动。
但是对于碰撞，我找不到相对于其旋转的光线投射。 如果原始网格没有旋转，或者我使用 mesh.position.x++ 移动它，它可以工作。但是旋转和用 translateX(1) 就不行了。
感谢您的关注。 这是我仅用于右侧 (+X) 的函数：
function coll(b1,b2){
var hit = false;
var dist = (width/2);
var matrix = new THREE.Matrix4();
matrix.extractRotation( b1.matrix );
var origin = new THREE.Vector3(b1.position.x,b1.position.y,b1.position.z);
var direction = new THREE.Vector3( 1, 0, 0 );
direction = matrix.multiplyVector3( direction );
var ray = new THREE.Raycaster(origin, direction,0,dist);
var collisionResult = ray.intersectObject(b2);
if(collisionResult!=0){
hit = true; b1.translateX( -1 );
}else{
hit = false;
}//if
return hit;
}//coll()
这是整个代码以防万一：
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - geometry - cube</title>
<meta charset="utf-8">
<style>
body {
margin: 0px;
background-color: #000000;
overflow: hidden;
color: white;
}
</style>
</head>
<body>
<script src="../build/three.min.js"></script>
<script>
var camera, scene, renderer;
var width = 100;
var mesh, mesh2;
var key = {left:false};
function keyDown(e){
if (e.keyCode == 39) { key.right = true; }
}//keyPress()
window.addEventListener("keydown", keyDown);
function keyUp(e){
if (e.keyCode == 39) { key.right = false; }
}//keyPress()
window.addEventListener("keyup", keyUp);
function moove(m){
if (key.right){
m.translateX( 1 );
//m.position.x++;
}//if
if (key.left){
m.translateX( -1 );
}//if
}//moove()
function coll(b1,b2){
var hit = false;
var dist = (width/2);
var matrix = new THREE.Matrix4();
matrix.extractRotation( b1.matrix );
var origin = new THREE.Vector3(b1.position.x,b1.position.y,b1.position.z);
var direction = new THREE.Vector3( 1, 0, 0 );
direction = matrix.multiplyVector3( direction );
var ray = new THREE.Raycaster(origin, direction,0,dist);
var collisionResult = ray.intersectObject(b2);
if(collisionResult!=0){
hit = true; b1.translateX( -1 );
}else{
hit = false;
}//if
return hit;
}//coll()
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
scene = new THREE.Scene();
var geometry = new THREE.BoxGeometry( width, 10, 10);
mesh = new THREE.Mesh( geometry);
scene.add( mesh );
mesh.position.x = -100;
mesh.position.y = -20;
mesh.rotation.z = 1;
geometry = new THREE.BoxGeometry( width, 100, 100);
mesh2 = new THREE.Mesh( geometry);
scene.add( mesh2 );
window.addEventListener( 'resize', onWindowResize, false );
}//init()
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}//resize()
function animate() {
requestAnimationFrame( animate );
coll(mesh,mesh2);
moove(mesh);
renderer.render( scene, camera );
}//animate()
</script>
</body>
</html>
我也试过四元数，但结果还是一样：
direction.applyQuaternion(b1.quaternion);
我与 mesh.position.x++ 发生了冲突，所以可能 translateX 做错了什么？
【问题讨论】：
-
您要求某人为您调试代码。这不是本网站的目的。请提出对其他人有用的问题。尽管如此，如果您进行以下更改，您最初编写的代码仍然有效：
var ray = new THREE.Raycaster( origin, direction, 0, 2 * dist )和mesh.rotation.z = 0.5;。将OrbitControls和AxisHelper添加到您的演示中，这样您就可以看到自己在做什么。如果您添加OrbitControls，您将不得不小心竞争击键。 -
感谢您的评论。嗯，我认为它对每个想用这种角色制作视频游戏的人都很有用，我在编写所有代码之前提取了这个小函数。它最终可能通过将 mesh.position.y -= 10 更改为 30 来工作。愚蠢的错误：碰撞可能太高了，如果没有 OrbitControls，我无法看到你所说的。
标签： three.js rotation collision raycasting