Three.js - AxisHelper上的标签withTextGeometry和旋转问题

Question

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

在这个子窗口中,我想在每个轴上绘制标签"X""Y"和"Z"(更精确地位于每个AxisHelper的末尾).我知道如何使用TextGeometry,但问题是我无法旋转这些标签,以使它们始终在用户面前显示.

您可以在[以下链接] [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);我zoomScene通过执行以下操作添加TextGeometry :

zoomScene.add(meshText1);

谁能看到我的代码中出了什么问题？我想知道我是否可以在其自身上旋转"X"标签,即"X"标签像轴一样旋转但是自身(局部)方向作为旋转θ角度的函数应用,因此标签始终保持在脸部用户在相机旋转期间？

谢谢你的帮助.

Answer 1

您可能正在寻找THREE.SPRITE. 来自文档：

Object3D -> 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 );

下面是一个类似场景的工作示例（3 个具有不同定位的缩放精灵）。您可以在github上找到代码。