时间戳

首页 > 解决方案 > Three.js - 在缩放时保持对象静态

javascript - Three.js - 在缩放时保持对象静态

问题描述

我在应用程序中使用 Three.js 进行 2D 演示，因此我使用 MapControls 设置了正交相机。场景中添加了一些对象，可以进行 2d 平移和放大/缩小。除了它们，我还有一个箭头对象，它必须是静态的，即从平移和缩放中排除。这个箭头将有一个特殊的形式和动画旋转，这就是为什么我不使用 CSS 来绘制它。

我尝试了此 SO 帖子中的指南，并成功限制了平移。

scene.add(camera);
...
camera.add(directionArrow);

但是当使用鼠标滚轮放大/缩小时，箭头也会放大/缩小。

这是一个复制最少的jsfiddle。

三角形（箭头）在缩放时应该保持静止，就像在平移时一样。

标签： javascriptthree.js

解决方案

使用 GUI 层和渲染层。

如果在 GUI 层中绘制指针，则可以根据需要更改渲染层，而不会影响 GUI 层。

通常 Three.js GUI 层是用 HTML 完成的。

一旦你有了这个，你将需要获取对象的坐标并更新 HTML。这是该过程中最复杂的部分，因此这里有一篇关于如何通过一些示例进行此操作的文章。

https://threejsfundamentals.org/threejs/lessons/threejs-align-html-elements-to-3d.html

推荐阅读