如何将对象渲染为'图标'在three.js?

时间:2014-03-22 19:03:04

标签: javascript 3d three.js

说我在我的场景中渲染了一个漂亮的太空飞船。然后我缩小,船变得更小。这一切都很简单。现在在某些时候我想用一个代表船的简单三角形替换宇宙飞船物体。在此阶段,应该渲染船舶的图标而不是船舶。显然,三角形应根据船舶的运动和我的相机移动而移动。三角形不应改变方向,因此即使我旋转相机或使船舶滚动,三角形应保持相同的方向。所以在画布上这很简单。我只需要取出3d对象的x和y分量,然后在坐标处绘制三角形。我的问题是我不知道如何直接在WebGL画布上绘图?可能吗?如果没有,有没有人有任何指向策略来完成这项工作?如果我能在正确的方向上轻推,我会很高兴:)在此先感谢。

更新:我最终决定使用下面建议的正交相机叠加方法以及其他几个地方。

1 个答案:

答案 0 :(得分:3)

使用Sprite对象作为图标。然后在距离相机特定距离的太空船和相机之间放置图标(使用Raycaster或仅计算)。

使用@WestLangley提到的正交覆盖也是可能的。由于在这种情况下您必须计算相对于画布的船舶位置,您甚至可以使用DIV创建纯HTML叠加并将其中的图标作为IMG对象放置。