Three.js - AxisHelper 上带有TextGeometry 和旋转问题的标签答案

【问题标题】：Three.js - label on AxisHelper withTextGeometry and rotation issueThree.js - AxisHelper 上带有TextGeometry 和旋转问题的标签
【发布时间】：2016-08-30 16:08:19
【问题描述】：

我有一个带有球体的主场景和另一个子窗口（在右下角），我在其中绘制了主场景的 (x,y,z) 轴。

在这个子窗口中，我想在每个轴上绘制标签“X”“Y”和“Z”（更准确地说，位于每个 AxisHelper 的末端）。我知道如何使用 TextGeometry，但问题是我无法旋转这些标签以使它们始终出现在用户面前。

您可以在 [following link][1] 上看到问题：标签“X”相对于轴是固定的，并且随着相机旋转，因此它并不总是面对用户。

从link1 和link2 这两个链接中，我尝试添加（在我的示例中，我尝试仅使用“X”标签）：

function addLabelAxes() {

  // Axes label
  var loader = new THREE.FontLoader();
  loader.load( 'js/helvetiker_regular.typeface.js', function ( font ) {

  var textGeo1 = new THREE.TextGeometry( 'X', {
      font: font,
      size: 5,
      height: 0.1,
      bevelThickness: 0.1,
      bevelSize: 0.1,
      bevelEnabled: true,
  } );

  var  color = new THREE.Color();
  color.setRGB(255, 255, 255);
  textMaterial = new THREE.MeshBasicMaterial({ color: color });
  var meshText1 = new THREE.Mesh(textGeo1, textMaterial);

  // Position of axes extremities 
  var positionEndAxes = axes2.geometry.attributes.position;

  var label1X = positionEndAxes.getX(0);
  meshText1.position.x = label1X + axisLength;
  meshText1.position.y = 0;
  meshText1.position.z = 0;

  // Rotation of "X" label
  //meshText1.rotation = zoomCamera.rotation;
  meshText1.lookAt(zoomCamera.position);

  // Add meshText to zoomScene
  zoomScene.add(meshText1);

  });

}

zoomCamera 代表PerspectiveCamera，它是子窗口的摄像头（即zoomScene）；我通过这样做将TextGeometry 添加到zoomScene：

zoomScene.add(meshText1);

有人能看出我的代码有什么问题吗？我想知道我是否可以在自身上旋转“X”标签，即“X”标签像轴一样旋转，但自（局部）方向作为旋转θ角的函数应用，所以标签总是保持在脸上相机旋转期间的用户？

感谢您的帮助。

【问题讨论】：

使用THREE.Sprite。见stackoverflow.com/a/35433819/1461008
谢谢，这正是我想要的

标签： javascript three.js rotation

【解决方案1】：

您可能正在寻找THREE.SPRITE。来自the docs：

Object3D -> Sprite：sprite 是 3d 场景中始终面向相机的平面。

下面是一个简单的使用示例：

var map = new THREE.TextureLoader().load( "sprite.png" );
var material = new THREE.SpriteMaterial( { map: map, color: 0xffffff, fog: true } );
var sprite = new THREE.Sprite( material );
scene.add( sprite );

这是一个类似场景的working example（3 个具有不同定位的缩放精灵）。您可以在github 上找到代码。

【讨论】：