如何获取 Three.js 中物体相对于相机的位置以绘制轨迹？答案

【问题标题】：How to get the position of object in Three.js relative to the camera to draw a trail?如何获取 Three.js 中物体相对于相机的位置以绘制轨迹？
【发布时间】：2023-03-21 18:00:01
【问题描述】：

我的场景中有一个对象（一支笔），它在渲染循环中围绕其轴旋转。

    groupPen.rotation.y += speed;
    groupPen.rotation.x += speed;

我还有一个 TrackballControls，它允许用户旋转整个场景。

我现在想要的是获得笔（或其拨片）的“真实”位置并放置小球体以在其后面创建一条轨迹。

这意味着我需要知道相机正在看的位置，并将轨迹球放置在笔尖后面，并将它们从动画和 TrackballControls 中排除。

我尝试的是：

groupSphereTrail.lookAt(camera.position);

没用。表示完全没有反应。

camera.add(groupSphereTrail);

没用。 groupSphereTrail 不在视图区域中，无法使其可见 - 操作 position.z 没有帮助。

然后我尝试了发送带有托盘轮的托盘之类的方法。这个想法是从相机的中心发出一条光线，穿过笔尖，然后在那里画出轨迹。但是我仍然没有“真正”的位置。

另一个想法是创建笔尖当前位置的 2d 向量，并在画布顶部绘制一个 html 元素：

    var p = penPeak.position.clone();
    var vector = p.project(camera);
    vector.x = (vector.x + 1) / 2 * width;
    vector.y = -(vector.y - 1) / 2 * height;

但这也行不通。

还有什么可行的解决方案？

目前的进展： https://zhaw.swissmade.xyz （点击笔帽查看字迹 - 当您旋转相机时，此字迹应保持原位）

【问题讨论】：

为什么不在笔尖画出你的球体呢？
@TheJim01 因为当您旋转相机时，它们会随着峰值旋转/动画。我希望它们在笔尖的同一位置绘制后粘在屏幕上。
您需要结果是 3D 吗？因为您可以在 three.js 画布上覆盖第二个透明画布，并通过取消对笔尖位置 (XYZ) 到屏幕空间 (XY) 的保护，使用 2D 上下文绘制到它。
我认为 2D 会是一个不错的开始。甚至是 2D 画布位于透明 3D 场景后面时的解决方案。

标签： javascript three.js

【解决方案1】：

如果我对问题的理解正确，您想显示轨迹，就好像它是在屏幕本身（屏幕空间）上绘制的一样？

yourTrailParticle.position.project(camera)
camera.add(yourTrailParticle)

这是基本的想法，但使用PerspectiveCamera 有点棘手。您可以设置一个全新的THREE.Scene 来保存轨迹，并使用固定大小的正交相机对其进行渲染。

重点是.project() 将为您提供世界空间矢量的标准化屏幕空间坐标，并且您需要以某种方式使其与该相机保持同步（因为屏幕也是如此）。透视相机有失真，因此您需要确定将坐标映射到的适当距离。使用单独的场景，这可能会变得更容易。

【讨论】：