如何獲取點擊的元素在three.js所

Question

我在畫布上的許多元素使用three.js所，

他們可能會覆蓋每個人。

所以現在，當點擊一個點，

我如何能拿到非常元素？

更新：傢伙，這個演示有很大幫助： http://mrdoob.github.com/three.js/examples/canvas_interactive_cubes.html

Answer 1

使用下面的代碼。這將允許您添加一個點擊事件，並在發生這種情況時執行您所需的操作。你可以查看頁面的來源，看看他們在做什麼，我從哪裏得到這些代碼。

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); 
    } 
    */ 
} 

Answer 2

您鏈接到的示例具有一個簡單的API。

把它放在你的HTML中。你必須download the script並確保它加載。

<script src='threex.domevent.js'></script> 

然後，你的網格對象上，請撥打以下：

mesh.on('click', function() 
{ 
    // response to click... 
    mesh.scale.x *= 2; 
}); 

或者說，動畫的對象順利的旋轉和色彩更有趣的例子：

mesh.on('click', function(event) 
{ 
    var object3d = event.target, 
     rotation, color; 
    if (object3d.rotation.x < Math.PI/4) { 
     rotation = {x: Math.PI/2}; 
     color = {r: 1, g: 0.5, b: 0}; 
    } else { 
     rotation = {x: 0}; 
     color = {r: 0.5, g: 0.75, b: 0.25}; 
    } 
    new TWEEN.Tween(object3d.rotation) 
     .to(rotation, 800) 
     .easing(TWEEN.Easing.Bounce.EaseOut) 
     .start(); 
    new TWEEN.Tween(object3d.material.color) 
     .to(color, 300) 
     .easing(TWEEN.Easing.Quartic.EaseIn) 
     .start(); 
}) 

Answer 3

德魯的答案使用THREEx.domevents已過時。新的API需要初始化domEvents對象，然後將網格與相應的事件偵聽器綁定到它。

從Github repo：

var domEvents = new THREEx.DomEvents(camera, renderer.domElement) 
// ... 
domEvents.addEventListener(mesh, 'click', function(event){ 
    console.log('you clicked on the mesh') 
}, false) 

此外，它可在亭子！

bower install threex.domevents 

編輯： 雖然沒有記錄，也支持'touchstart'，'touchend'，和其他一些移動事件爲好。如果支持移動設備，請務必查看這些信息，因爲在某些設備上並不總是報告鼠標的「點擊」。

Answer 4

也許這個工具可以幫助你，全交互管理器，幫助three.js所容易結合互動事件

更多產品詳情請參閱three.interaction

import { Scene, PerspectiveCamera, WebGLRenderer, Mesh, BoxGeometry, MeshBasicMaterial } from 'three'; 
 
import { Interaction } from 'three.interaction'; 
 

 
const renderer = new WebGLRenderer({ canvas: canvasElement }); 
 
const scene = new Scene(); 
 
const camera = new PerspectiveCamera(60, width/height, 0.1, 100); 
 

 
// new a interaction, then you can add interaction-event with your free style 
 
const interaction = new Interaction(renderer, scene, camera); 
 

 
const cube = new Mesh(
 
    new BoxGeometry(1, 1, 1), 
 
    new MeshBasicMaterial({ color: 0xffffff }), 
 
); 
 
scene.add(cube); 
 
cube.cursor = 'pointer'; 
 
cube.on('click', function(ev) {}); 
 
cube.on('touchstart', function(ev) {}); 
 
cube.on('touchcancel', function(ev) {}); 
 
cube.on('touchmove', function(ev) {}); 
 
cube.on('touchend', function(ev) {}); 
 
cube.on('mousedown', function(ev) {}); 
 
cube.on('mouseout', function(ev) {}); 
 
cube.on('mouseover', function(ev) {}); 
 
cube.on('mousemove', function(ev) {}); 
 
cube.on('mouseup', function(ev) {}); 
 
// and so on ... 
 

 
/** 
 
* you can also listen at parent or any display-tree node, 
 
* source event will bubble up along with display-tree. 
 
*/ 
 
scene.on('touchstart', ev => { 
 
    console.log(ev); 
 
}) 
 
scene.on('touchmove', ev => { 
 
    console.log(ev); 
 
})