Three.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