2011-12-12 3 views
0

현재 입자 시스템으로 three.js로 입자를 만들려고합니다. 프로젝트의 목표는 정의 된 위치와 고유 ID를 사용하여 입자를 생성하고 여러 입자를 선택하고 ID를 검색하는 옵션을 추가하는 것입니다.입자 ID와 Three.js에서 여러 ID 검색

몇 가지 조사를했지만 마우스 클릭의 위치를 ​​감지하는 방법 만 발견했습니다.

그래서 나는 다음과 같은 정보를 찾고 있어요 :

을 먼저 : (숫자로 간단하게) 단일 입자에 ID를 할당 할 수있는 옵션이 있습니까? 둘째 : 여러 개의 입자를 선택하고 (팝업) 창에서 ID를 보는 방법이 있습니까?

도움 주셔서 감사합니다.

추신 : THREE.ParticleDOMMaterial에 ID를 할당 할 수 있음을 알았습니다. (이 기능이 무엇인지 모르십니까?) 및 THREE.ParticleBasicMaterial (입자에 ID를 지정하지만 입자 자체에는 할당하지 마십시오.).

+0

안녕하세요, 나는 똑같은 것을 성취하려고 노력하고 있습니다.이 일을 끝내셨습니까? – Linus

답변

1

모든 Object3D 인스턴스는 기본적으로 three.js의 고유 ID를 가지며 Particle은이를 상속합니다. 또한 Object3D에 도움이되는 경우 name 속성이 있습니다.

for (var i = 0; i < 100; i++) { 

        particle = new THREE.Particle(new THREE.ParticleCanvasMaterial({ color: Math.random() * 0x808008 + 0x808080, program: program })); 
        particle.name = "particle"+i; 
        particle.position.x = Math.random() * 2000 - 1000; 
        particle.position.y = Math.random() * 2000 - 1000; 
        particle.position.z = Math.random() * 2000 - 1000; 
        particle.scale.x = particle.scale.y = Math.random() * 10 + 5; 
        group.add(particle); 
       } 

하고 여기에 콘솔에서 클릭 한 입자의 이름과 ID를 인쇄하는 마우스 다운 이벤트 핸들러의 예 :

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.intersectScene(scene); 

       if (intersects.length > 0) { 

        console.log("you clicked particle named '" + intersects[0].object.name + "' with id: " + intersects[0].object.id); 

       } 

      } 
을 여기

는 명명 입자를 설명하는 작은 조각이다

Goodluck!

+0

jsfiddle의 가능성이 있습니까? ;)이 코드를 실행하는 데 문제가 있습니다; – Eamorr