Cách tải phần tử CLICKED trong THREE.js

Question

Tôi có nhiều phần tử trong canvas bằng cách sử dụng THREE.js,

chúng có thể ghi đè với nhau.

vì vậy bây giờ, khi nhấp vào một điểm,

làm cách nào tôi có thể nhận được yếu tố đó?

cập nhật: guys, demo này giúp ích rất nhiều: http://mrdoob.github.com/three.js/examples/canvas_interactive_cubes.html

Answer 1

Sử dụng đoạn mã sau. Điều này sẽ cho phép bạn thêm sự kiện nhấp và thực hiện những gì bạn cần khi điều đó xảy ra. Bạn có thể xem nguồn của trang để xem những gì họ đang làm mà tôi đã nhận được mã này từ.

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

Ví dụ bạn liên kết để có API đơn giản cho việc này.

Đặt mã này vào HTML của bạn. Bạn sẽ phải download the script và đảm bảo tải.

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

Sau đó, trên đối tượng lưới của bạn, hãy gọi như sau:

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

Hoặc một ví dụ thú vị hơn mà sinh động xoay và màu sắc của một vật dễ dàng:

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

Drew câu trả lời sử dụng THREEx.domevents đã lỗi thời. API mới yêu cầu khởi tạo đối tượng domEvents và sau đó liên kết các mắt lưới với các trình lắng nghe sự kiện tương ứng với nó.

Từ Github repo:

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

Ngoài ra, nó có sẵn trên Chòi chơi!

bower install threex.domevents 

Edit: Mặc dù không thành văn bản, có hỗ trợ cho 'touchstart', 'touchend', và một vài sự kiện di động khác là tốt. Hãy chắc chắn để xem xét những điều này nếu hỗ trợ điện thoại di động, như 'nhấp chuột' không phải lúc nào cũng được báo cáo như vậy trên một số thiết bị.

Answer 4

có lẽ công cụ này có thể giúp bạn, một người quản lý toàn tương tác, giúp three.js dễ dàng để ràng buộc sự kiện tương tác

hơn detial thấy 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); 
 
})