用鼠標選擇對象 - Three.js

我知道這個問題已經被問到。我希望能夠改變對象的顏色，如果用鼠標選擇。我試着自己編寫代碼，但它似乎不工作，所以我想我錯過了一些東西。這基本上是腳本：用鼠標選擇對象 - Three.js

<script> 
     var scene = new THREE.Scene(); 
     var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
     var renderer = new THREE.WebGLRenderer(); 
     renderer.setSize(window.innerWidth/2, window.innerHeight/2); 
     renderer.setClearColor(0xcccccc, 1); 
     document.body.appendChild(renderer.domElement); 
     scene.add(camera); 

     var geometry = new THREE.Geometry(); 
     geometry.vertices.push(
      new THREE.Vector3(-5, 5, 0), 
      new THREE.Vector3(-5, -5, 0), 
      new THREE.Vector3( 5, -5, 0) 
     ); 
     var face = new THREE.Face3(0, 1, 2); 
     geometry.faces.push(face); 
     var material = new THREE.MeshBasicMaterial({color: 0x3300ff}); 
     var triangle = new THREE.Mesh(geometry, material); 
     scene.add(triangle); 

     camera.position.z = 10; 

     document.addEventListener('mousedown', onDocumentMouseDown); 

     function onDocumentMouseDown(event) {  
      event.preventDefault(); 
      var mouse3D = new THREE.Vector3((event.clientX/window.innerWidth) * 2 - 1, 
            -(event.clientY/window.innerHeight) * 2 + 1, 
            0.5);  
      var projector = new THREE.Projector();           
      var raycaster = projector.pickingRay(mouse3D.clone(), camera); 
      var intersects = raycaster.intersectObjects(objects); 

      if (intersects.length > 0) { 
       intersects[ 0 ].object.material.color.setHex(Math.random() * 0xffffff); 
      } 
     } 

     var render = function() { 
      requestAnimationFrame(render); 
      camera.lookAt(scene.position); 
      renderer.render(scene, camera); 
     }; 

     render(); 
    </script>

如果有人能幫助我，我將不勝感激。

來源

2015-10-05 vixenn

使用eventcontrols）http://alexan0308.github.io/threejs/examples/controls_events_piano.html –

讓我提醒你，raycasting是在CPU上完成的，速度非常慢。更好的方法可以通過關鍵字「gpu picking」找到：你想渲染你的場景，每個可點擊的面具有不同的顏色，然後通過鼠標座標獲得像素的顏色。 –

更新您的代碼和由jsfiddle

在onDocumentMouseDown加入

var raycaster = new THREE.Raycaster();           
raycaster.setFromCamera(mouse3D, camera);

代替

var projector = new THREE.Projector();           
var raycaster = projector.pickingRay(mouse3D.clone(), camera);

要將對象陣列加入三角形網格和更新渲染器的大小。我建議你開始使用控制檯並做一些調試。你可以自己輕鬆地找到這些錯誤。

來源

2015-10-05 19:31:58 uhura

謝謝，但是你能否解釋一下爲什麼我應該使用這些東西以及爲什麼要將三角形添加到對象中。爲什麼這個'console.log（intersects）'在代碼中？ – vixenn

[Raycaster文檔]（http://threejs.org/docs/#Reference/Core/Raycaster）將2D鼠標座標轉換爲3D世界。沿着攝像機的方向投射來自3D鼠標位置的光線，並檢查在途中是否碰到任何物體。 Objects數組將檢查與射線的相交，並且我們要檢查是否選擇了三角形。 console.log用於調試，您可以將其刪除。 [不同瀏覽器中的JavaScript控制檯]（http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers） – uhura

用鼠標選擇對象 - Three.js

回答

相關問題