轴助手上的标签与文本几何和旋转问题

Label on AxisHelper withTextGeometry and rotation issue

本文关键字：旋转 问题 文本 标签      更新时间：2023-09-26

我有一个带有球体的主场景和另一个子窗口(在右下角(，在那里我绘制了主场景的(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表示子窗口(即zoomScene(的相机PerspectiveCamera;I通过以下方式将文本几何添加到zoomScene：

zoomScene.add(meshText1);

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

您可能正在寻找THREE.SPRITE。从文档中：

Object3D -> 精灵：精灵是 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上找到代码。

相关文章：