可點擊三個Js對象/凸項

Question

我修改了一個來自Three.js庫的例子，我嘗試在對象上添加點擊事件。

經過很多嘗試...我仍然無法聽到點擊。

此代碼產生凸形式。

有我的代碼：

 if (! Detector.webgl) Detector.addGetWebGLMessage(); 

     var container, stats; 

     var camera, scene, renderer; 
     var objects = []; 

     init(); 
     animate(); 

     function init() { 

      container = document.createElement('div'); 
      document.body.appendChild(container); 

      camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 2000); 
      camera.position.y = 400; 

      scene = new THREE.Scene(); 

      var light, object, object2, materials; 

      scene.add(new THREE.AmbientLight(0x404040)); 

      light = new THREE.DirectionalLight(0xffffff); 
      light.position.set(0, 1, 0); 
      scene.add(light); 

      var map = THREE.ImageUtils.loadTexture('textures/ash_uvgrid01.jpg'); 
      map.wrapS = map.wrapT = THREE.RepeatWrapping; 
      map.anisotropy = 16; 

      materials = [ 
       new THREE.MeshLambertMaterial({ ambient: 0xbbbbbb, map: map }), 
       new THREE.MeshBasicMaterial({ color: 0x242424, wireframe: true, transparent: false, opacity: 0.1 }) 
      ]; 


      // random convex 

      points = []; 
      for (var i = 0; i < 15; i ++) { 

       points.push(randomPointInSphere(50)); 

      } 


      object = THREE.SceneUtils.createMultiMaterialObject(new THREE.ConvexGeometry(points), materials); 
      object.position.set(-250, 0, 200); 
      scene.add(object); 


      objects.push(object); 

      object.callback = function() { console.log('blabla');} 





      renderer = new THREE.WebGLRenderer({ antialias: true }); 
      renderer.setSize(window.innerWidth, window.innerHeight); 

      container.appendChild(renderer.domElement); 

      stats = new Stats(); 
      stats.domElement.style.position = 'absolute'; 
      stats.domElement.style.top = '0px'; 
      container.appendChild(stats.domElement); 



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

     } 

     function onWindowResize() { 

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

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

     } 


     function randomPointInSphere(radius) { 

      return new THREE.Vector3(
       (Math.random() - 0.5) * 1 * radius, 
       (Math.random() - 0.5) * 1 * radius, 
       (Math.random() - 0.5) * 1 * radius 
      ); 

     } 

     function animate() { 

      requestAnimationFrame(animate); 

      render(); 
      stats.update(); 

     } 

     function render() { 

      var timer = Date.now() * 0.0001; 

      camera.position.x = Math.cos(timer) * 800; 
      camera.position.z = Math.sin(timer) * 800; 

      camera.lookAt(scene.position); 

      for (var i = 0, l = scene.children.length; i < l; i ++) { 

       var object = scene.children[ i ]; 

       object.rotation.x = timer * 5; 
       object.rotation.y = timer * 2.5; 

      } 

      renderer.render(scene, camera); 

     } 

     function addMeteor() 
     { 
        var map = THREE.ImageUtils.loadTexture('textures/ash_uvgrid01.jpg'); 
      map.wrapS = map.wrapT = THREE.RepeatWrapping; 
      map.anisotropy = 16; 

        var materials = [ 
       new THREE.MeshLambertMaterial({ ambient: 0xbbbbbb, map: map }), 
       new THREE.MeshBasicMaterial({ color: 0x242424, wireframe: true, transparent: false, opacity: 0.1 }) 
      ]; 
      objects.push(materials); 
       var object3; 
       var points3 = []; 
      for (var i = 0; i < 10; i ++) { 

       points3.push(randomPointInSphere(50)); 

      } 

      object3 = THREE.SceneUtils.createMultiMaterialObject(new THREE.ConvexGeometry(points3), materials); 
      object3.position.set(-50, Math.floor((Math.random()*window.innerWidth)), Math.floor((Math.random()* window.innerHeight))); 
      scene.add(object3); 
      objects.push(object3); 

     } 
      projector = new THREE.Projector(); 
     // listeners 
      document.addEventListener('mousedown', onDocumentMouseDown, false) 

      // keyboard handler 
      function onDocumentMouseDown(event) { 

       event.preventDefault(); 
       console.log('blabla'); 

       var vector = new THREE.Vector3( 
        (event.clientX/window.innerWidth) * 2 - 1, 
        - (event.clientY/window.innerHeight) * 2 + 1, 
        0.5); 

       projector.unprojectVector(vector, camera); 

       var ray = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); 
       console.log(objects); 
       var intersects = ray.intersectObjects(objects); 
        console.log(intersects); 

       if (intersects.length > 0) { 

        intersects[0].object.callback(); 

        console.log('blabla'); 

       } 

      } 


     renderer.render(scene, camera); 

任何人都可以給予一定的幫助。

我本來應該將Mesh推入Objects數組中。 但是一個？

Answer 1

THREE.SceneUtils.createMultiMaterialObject()用兩個子網格創建一個對象。

因此，您需要在致電Raycaster.intersectObjects()時將recursive標誌設置爲true。

var intersects = ray.intersectObjects(objects, true); 

three.js所r.62