Question

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

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

您可以在[以下链接] [1]上看到问题：标签＆＃34; X＆＃34;相对于轴固定并与相机一起旋转，因此并不总是面向用户。

通过这两个链接link1和link2，我尝试添加（在我的示例中，我只尝试了＆＃34; X＆＃34;标签）：

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

有人能看到我的代码中有什么问题吗？我想知道我是否可以旋转＆＃34; X＆＃34;标签本身，即＆＃34; X＆＃34;标签像轴一样旋转但是自身（局部）方向作为旋转θ角度的函数应用，因此在相机旋转期间标签始终保持在用户的脸部？

感谢您的帮助。

Answer 1

您可能正在寻找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 );。来自the docs：

Object3D - ＆gt; 精灵：精灵是3d场景中面向摄像机的平面。

以下是如何使用它的简单示例：

{{1}}

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

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

1 个答案: