Question

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

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

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

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

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

我尝试的是：

groupSphereTrail.lookAt(camera.position);

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

camera.add(groupSphereTrail);

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

然后我尝试了一些类似的任务，例如使用traycaster发送托盘。这个想法是使光线从相机中心穿过笔尖，然后在笔尖绘制轨迹。但是那时我仍然没有“真正的”职位。

另一个想法是创建笔尖当前位置的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 （单击笔帽以查看文字-旋转相机时，该文字迹应保持在该位置）

Answer 1

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

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

这是基本概念，但是使用PerspectiveCamera会有些棘手。您可以设置一个全新的THREE.Scene来保留路径，并使用固定大小的正交摄影机对其进行渲染。

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

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

1 个答案: