用鼠标选择对象 - 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

回答

相关问题