bufferGeometryを使用してTHREE.js Pointsオブジェクトの頂点のスクリーン座標を取得します。

Question

THREE.jsシミュレーションでDOMノードトラックをパーティクルにしたいとします。私のシミュレーションは、bufferGeometryを使ってPointsオブジェクトで構築されています。私は、レンダリングループの各頂点の位置を設定しています。シミュレーションの途中で、私はカメラとPointオブジェクトの両方を（親Object3dを介して）移動/回転させています。

パーティクルの信頼できる画面座標を取得する方法がわかりません。私はThree.JS: Get position of rotated object、Converting World coordinates to Screen coordinates in Three.js using Projectionのような他の質問の指示に従ってきましたが、それらのどれも私にとってはうまくいかないようです。この時点で、カメラの動きとオブジェクトの回転によって頂点の計算された投影が変化しているのがわかりますが、実際に画面にマッピングできる方法ではありません。また、スクリーン上でお互いに隣り合う2つの粒子が、大きく異なる投影位置を生じることもある。

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)