Question

我希望在我的THREE.js模拟中有一个DOM节点跟踪一个粒子。我的模拟是使用PointsGeometry使用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)

使用bufferGeometry

1 个答案: