Question

我想在AxisHelper上添加标签，并随之旋转。从这个link开始，我使用了这个代码段：

  // Axes
  axes2 = new THREE.AxisHelper(70);

  // Axes labels
  addLabelAxes();

  // Add axes to zoomScene
  zoomScene.add(axes2);


function addLabelAxes() {

  // Axes label
  var loader = new THREE.FontLoader();
  loader.load( 'js/helvetiker_regular.typeface.js', function ( font ) {

  textGeo = new THREE.TextGeometry( 'Example label', {
    font: font,
    size: 15,
        height: 5,
    curveSegments: 10,
    } );

  var  color = new THREE.Color();
  color.setRGB(255, 0, 0);
  textMaterial = new THREE.MeshBasicMaterial({ color: color });
  meshText = new THREE.Mesh(textGeo, textMaterial);

  // Position of first axis
  meshText.position.x = axes2.geometry.vertices[1].x;
  meshText.position.y = axes2.geometry.vertices[1].y;
  meshText.position.z = axes2.geometry.vertices[1].z;

  meshText.rotation = zoomCamera.rotation;
  zoomScene.add(meshText);

  });

但是我在控制台日志中收到以下错误：

TypeError: axes2.geometry.vertices is undefined
addLabelAxes/<()
 sphere_dev.js:230
THREE.FontLoader.prototype.load/<()
 three.min.js:382
THREE.XHRLoader.prototype.load/<()

如果有人能够一眼就看出错误，那就太好了。

由于

Answer 1

AxisHelper的几何图形为BufferGeometry类型，而不是Geometry类型。

您可以访问AxisHelper几何体的位置元素，如下所示：

var axes = new THREE.AxisHelper( 20 );

var position = axes.geometry.attributes.position;

position是BufferAttribute。如果你研究它的内容，结构应该是显而易见的。

然后，您可以使用如下模式访问属性的元素：

var x = position.getX( index ); // or getY, getZ

three.js r.76

Three.js - 为AxisHelper添加标签 - 无法获得四肢的顶点

1 个答案: