bufferGeometry를 사용하여 THREE.js Points 객체의 꼭지점의 화면 좌표를 가져옵니다.

Question

DOM 노드 추적을 THREE.js 시뮬레이션에서 사용하고 싶습니다. 필자의 시뮬레이션은 bufferGeometry를 사용하여 Points 객체로 구현된다. 렌더 루프에서 각 꼭지점의 위치를 ​​설정하고 있습니다. 시뮬레이션 과정에서 카메라와 Points 객체 (부모 Object3d를 통해)를 움직이거나 회전합니다.

내 입자에 대해 안정적인 화면 좌표를 얻는 방법을 알 수 없습니다. Three.JS: Get position of rotated object 및 Converting World coordinates to Screen coordinates in Three.js using Projection과 같은 다른 질문에 대한 지침을 따라했지만 그 중 아무 것도 나를 위해 작동하지 않는 것 같습니다. 이 시점에서 나는 카메라의 움직임과 물체의 회전에 따라 정점의 계산 된 투영이 변화한다는 것을 알 수 있습니다. 실제로 화면에 매핑 할 수있는 방법은 아닙니다. 또한 때로는 화면에서 서로 인접한 두 입자가 크게 다른 투영 위치를 산출합니다.

const { x, y, z } = layout.getNodePosition(nodes[nodeHoverTarget].id) 

var m = camera.matrixWorldInverse.clone() 

var mw = points.matrixWorld.clone() 

var p = camera.projectionMatrix.clone() 

var modelViewMatrix = m.multiply(mw) 
var position = new THREE.Vector3(x, y, z) 
var projectedPosition = position.applyMatrix4(p.multiply(modelViewMatrix)) 
console.log(projectedPosition) 

은 기본적으로 내 쉐이더에서 작업을 복제 한 gl_Position을 도출 :

여기 내 최신 시도합니다.

projectedPosition 어디서나 화면 좌표를 저장하고 싶습니다.

가 나는 분명 뭔가를 놓친 적이 있다면 미안 해요 ... 나는 많은 것들을 시도했지만 지금까지 아무 일 없다 :/

감사합니다 사전에 어떤 도움을. 내가 그것을 알아 냈

Answer 1

...

var position = new THREE.Vector3(x, y, z) 

var projectedPosition = position.applyMatrix4(points.matrixWorld).project(camera)