javascript - texture - Three.js-etiqueta en AxisHelper withTextGeometry y el problema de rotación

three js texture

Question

Tengo una escena principal con una esfera y otra subventana (en la parte inferior derecha) donde dibujé el eje (x, y, z) de la escena principal.

En esta subventana, me gustaría dibujar las etiquetas "X" "Y" y "Z" en cada eje (más precisamente ubicado en el extremo de cada AxisHelper). Sé cómo usar TextGeometry, pero el problema es que no puedo rotar estas etiquetas para que aparezcan siempre en la cara del usuario.

Puede ver el problema en el [siguiente enlace] [1]: la etiqueta "X" está fija en relación con el eje y gira con la cámara, por lo que no siempre está en la cara del usuario.

A partir de estos dos enlaces link1 y link2 , intenté agregar (en mi ejemplo, probé solo con la etiqueta "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 representa una PerspectiveCamera que es la cámara de la subventana (es decir, zoomScene ); agrego TextGeometry a zoomScene haciendo:

zoomScene.add(meshText1);

¿Alguien podría ver lo que está mal en mi código? Me pregunto si puedo hacer girar la etiqueta "X" en sí misma, es decir, la etiqueta "X" está girando como un eje, pero se aplica una orientación propia (local) como una función del ángulo theta de rotación, por lo que la etiqueta siempre se mantiene en la cara de usuario durante la rotación de la cámara?

Gracias por tu ayuda.

Answer 1

Probablemente estés buscando THREE.SPRITE . De los documentos :

Object3D -> Sprite : Un sprite es un plano en una escena 3D que mira siempre hacia la cámara.

Aquí hay un ejemplo simple de cómo usarlo:

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

Este es un ejemplo práctico de un escenario similar (3 sprites escalados con diferente posicionamiento). Puedes encontrar el código en github .