三.js 射线对象相交

Question

朋友。 这是我的代码。它应该找到射线和立方体的交点。但它不起作用，让我很生气。这段代码很简单，但我很难找到错误。请帮忙。

jsFiddle

    <script>
        var container;
        var camera, controls, scene, renderer;
        init();
        animate();

        function init() {

            camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
            camera.position.z = 1000;

            controls = new THREE.TrackballControls( camera );

            controls.rotateSpeed = 1.0;
            controls.zoomSpeed = 1.2;
            controls.panSpeed = 0.8;

            controls.noZoom = false;
            controls.noPan = false;

            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;

            controls.keys = [ 65, 83, 68 ];

            controls.addEventListener( 'change', render );

            // world

            scene = new THREE.Scene();

            var testObject_G = new THREE.CubeGeometry(100, 100, 100);
            var testObject_M = new THREE.MeshBasicMaterial({ color: 0xBBBBBB });
            var testObject_Mesh = new THREE.Mesh(testObject_G, testObject_M);

    testObject_Mesh.position.x = 300;
    scene.add(testObject_Mesh);

    scene2 = new THREE.Object3D();

    // rays

    var direction = new THREE.Vector3(1, 0, 0);
    direction.normalize();
    var startPoint = new THREE.Vector3(0, 0, 0);

    var ray = new THREE.Raycaster(startPoint, direction); 
    var rayIntersects = ray.intersectObjects(scene.children, true); 
    if (rayIntersects[0]) {
    console.log(rayIntersects[0]);

    var geometry = new THREE.CubeGeometry(10, 10, 10);
    var material = new THREE.MeshBasicMaterial({color: 0xff0000});
    var cube = new THREE.Mesh(geometry, material);
    cube.position = rayIntersects[0].point;
    scene2.add(cube);
    }

    var ray_G = new THREE.Geometry();
      ray_G.vertices.push(new THREE.Vector3(0, 0, 0));
      ray_G.vertices.push(direction.multiplyScalar(1000));
    var ray_M = new THREE.LineBasicMaterial({ color: 0x000000 });
    var ray_Mesh = new THREE.Line(ray_G, ray_M);
    scene2.add(ray_Mesh);

    scene.add(scene2);



            // renderer

            renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor(0xffffff, 1);
            container = document.getElementById( 'container' );
            container.appendChild( renderer.domElement );



            //

            window.addEventListener( 'resize', onWindowResize, false );

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

            controls.handleResize();

            render();

        }

        function animate() {

            requestAnimationFrame( animate );
            controls.update();

        }

        function render() {

            renderer.render( scene, camera );


        }


    </script>

</body>

非常感谢您的回复。

Answer 1

在渲染循环期间，three.js 根据您指定的object.position、object.rotation/quaternion 和object.scale 为您更新每个对象的变换矩阵。

由于您在第一次渲染调用之前调用了Raycaster.intersectObjects()，因此您必须在光线投射之前自己更新对象矩阵。

scene.updateMatrixWorld();

小提琴：http://jsfiddle.net/mzRtJ/5/

three.js r.64