使文本在旋转立方体时始终与平面正交

Question

我正在使用以下模式创建显示在 3D 立方体上的文本标签：

canvas = createTextCanvas(text, color, font, size);
texture = new THREE.Texture(canvas);
geom = new THREE.PlaneBufferGeometry(canvas.width, canvas.height, segW, segH);
material = new THREE.MeshBasicMaterial({map: texture, transparent: true});
mesh = new THREE.Mesh(geom, material);

mesh.position.x = x;
mesh.position.y = y;
mesh.position.z = z;
texture.needsUpdate = true;

标签及其位置在立方体的每条边的 for 循环中设置。这导致标签看起来类似于：

但是当我旋转立方体时（使用 OrbitControls），您会看到标签不再像上面那样垂直显示：

因此，以 Cost 标签为例，我希望无论何时旋转立方体，文本都保持垂直方向。基本上，我试图模仿 VTK 中轴标记的行为。

所以我认为这里的解决方案是将标签的 up 向量设置为始终与平面正交的向量。但我不确定如何实现这一点。如有任何建议或示例，我们将不胜感激。

如果有帮助，我正在使用 BoxGeometry 和 MeshNormalMaterial 构造立方体。

Answer 1

你的意思是标签一直跟着立方体移动吗？如果不是，有一个例子：http://stemkoski.github.io/Three.js/Sprite-Text-Labels.html。标签始终面向您，但可能不垂直。否则，你可能需要一个 canvas 纹理，标签就像立方体一样是一个对象，你可以设置它的位置以保持它 vertical.But 它看起来不太好 sometime.the 示例：http://stemkoski.github.io/Three.js/Texture-From-Canvas.html.

我想你只是希望当你改变视线时标签总是面向你。

使文本在旋转立方体时始终与平面正交

Make text always appear orthogonal to the plane when rotating a cube

three.js