使用鼠标选择对象 - Three.js

Question

我知道这个问题已经被问过了。我想要能够在用鼠标选择一个对象时改变它的颜色。我尝试自己编写代码，但似乎不起作用，所以我猜我漏掉了什么。以下是基本脚本：

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

如果有人能帮助我，我会非常感激。

- vixenn

---

使用eventcontrols) http://alexan0308.github.io/threejs/examples/controls_events_piano.html - undefined

让我提醒你，射线投射是在CPU上进行的，速度异常缓慢。更好的方法可以通过关键词"gpu picking"找到：你可以渲染场景，使每个可点击的面具有不同的颜色，然后通过鼠标坐标获取像素的颜色即可。 - undefined

Answer 1

已更新您的代码，并且制作了 jsfiddle 示例。

在 onDocumentMouseDown 中添加了以下内容：

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

替代

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

已将三角网格添加到对象数组中，并更新了渲染器的大小。建议您开始使用控制台并进行一些调试。您可以轻松地自己找到这些错误。

- uhura

---

谢谢，但你能解释一下为什么我应该使用这些东西以及为什么我们要给对象添加三角形吗？还有为什么代码中有console.log(intersects)这一行？ - undefined

Raycaster文档，将2D鼠标坐标转换为3D世界坐标。通过从3D鼠标位置开始，沿着摄像机的方向发射一条射线，并检查是否在途中与任何物体相交。对象数组用于检查射线与物体的交集，并确定是否选中了三角形。console.log是用于调试的，你可以删除它。不同浏览器中的JavaScript控制台 - undefined

@uhura 请附上一个片段。 - undefined