Question

你好我试着控制一个网格，他可以通过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做错了什么？

Answer 1

现在好了。这次碰撞最终效果很好。

Three.js - 使用旋转原点网格进行光线投射的碰撞

1 个答案: