如何在THREE.js中获取CLICKED元素 [英] how to Get CLICKED element in THREE.js

问题描述

我在画布上使用THREE.js，

有很多元素，它们可能会相互覆盖。

如此现在，当点击一个点，

我怎么能得到那个元素？

更新：大家好，这个演示有很多帮助：
http://mrdoob.github.com/three.js/examples/canvas_interactive_cubes.html

解决方案

使用下面的代码。这将允许您添加单击事件，并在发生这种情况时执行您需要的操作。你可以查看页面的源代码，看看他们在做什么，哪些是我从这里获得的代码。

  document.addEventListener （'mousedown'，onDocumentMouseDown，false）; 
 
 var projector = new THREE.Projector（）; 
 
函数onDocumentMouseDown（event）{
 
 event.preventDefault（）; 
 
 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.Ray（camera.position，
 vector.subSelf（camera.position）.normalize（））; 
 
 var intersects = ray.intersectObjects（objects）; 
 
 if（intersects.length> 0）{
 
 intersects [0] .object.materials [0] .color.setHex（Math.random（）* 0xffffff） ; 
 
 var particle = new THREE.Particle（particleMaterial）; 
 particle.position = intersects [0] .point; 
 particle.scale.x = particle.scale.y = 8; 
 scene.add（particle）; 
 
 
 
 $ b //解析所有面
（相交的var i）{
 intersects [i]。 face.material [0] .color 
 .setHex（Math.random（）* 0xffffff | 0x80000000）; 
} 
 * / 
} 
  

I have many elements in the canvas using THREE.js,

they may be override with each others.

so now, when click on a point,

how can i get that very element?

update: guys, this demo helps a lot: http://mrdoob.github.com/three.js/examples/canvas_interactive_cubes.html

解决方案

Use the following code. This will allow you to add a click event and do what you need to when that happens. You can view the source of the page to see what they are doing which is were I got this code from.

document.addEventListener( 'mousedown', onDocumentMouseDown, false );

var projector = new THREE.Projector();

function onDocumentMouseDown( event ) {

    event.preventDefault();

    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.Ray( camera.position, 
                             vector.subSelf( camera.position ).normalize() );

    var intersects = ray.intersectObjects( objects );

    if ( intersects.length > 0 ) {

        intersects[ 0 ].object.materials[ 0 ].color.setHex( Math.random() * 0xffffff );

        var particle = new THREE.Particle( particleMaterial );
        particle.position = intersects[ 0 ].point;
        particle.scale.x = particle.scale.y = 8;
        scene.add( particle );

    }

    /*
    // Parse all the faces
    for ( var i in intersects ) {
        intersects[ i ].face.material[ 0 ].color
            .setHex( Math.random() * 0xffffff | 0x80000000 );
    }
    */
}

这篇关于如何在THREE.js中获取CLICKED元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！