Three.js - метка на AxisHelper с тестом на геометрию и ротацию

У меня есть основная сцена с шаром и другим подстрочным окном (в правом нижнем углу), где я нарисовал ось (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 представляет a PerspectiveCamera, который является камерой subwindow (i.e zoomScene), добавляю TextGeometry к zoomScene, делая:

zoomScene.add(meshText1);

Может ли кто-нибудь увидеть, что не так в моем коде? Интересно, могу ли я повернуть метку "X" на себя, т.е. Метка "X" вращается как ось, но ориентация на себя (локальная) применяется в зависимости от угла поворота тэта, поэтому ярлык всегда находится на грани пользователя во время вращения камеры?

Спасибо за вашу помощь.

Ответы

Ответ 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.