使用 bufferGeometry 获取 THREE.js Points 对象中顶点的屏幕坐标

Posted 2023-02-27

【中文标题】使用 bufferGeometry 获取 THREE.js Points 对象中顶点的屏幕坐标

【英文标题】：Get screen coordinates of a vertex in a THREE.js Points object using bufferGeometry

【发布时间】：2017-07-08 00:47:56

【问题描述】：

我想让一个 DOM 节点在我的 THREE.js 模拟中跟踪一个粒子。我的模拟是用 Points 对象构建的，使用 bufferGeometry。我在渲染循环中设置每个顶点的位置。在模拟过程中，我正在移动/旋转相机和 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 是我想存储屏幕坐标的地方。

如果我遗漏了一些明显的东西，我很抱歉……我已经尝试了很多东西，但到目前为止都没有奏效：/

提前感谢您的帮助。

【问题讨论】：

您是否有机会添加一个重现问题的小提琴？

【参考方案1】：

我想通了……

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

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