Three.js - 向 AxisHelper 添加标签 - 无法获取四肢的顶点答案

【问题标题】：Three.js - add labels to AxisHelper - can't get vertices of extremitiesThree.js - 向 AxisHelper 添加标签 - 无法获取四肢的顶点
【发布时间】：2016-05-01 03:33:59
【问题描述】：

我想在随之旋转的 AxisHelper 上添加标签。从这个link，我使用了这个sn-p代码：

  // 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/<()

如果有人能一眼看出问题所在，那就太好了。

谢谢

【问题讨论】：

标签： javascript three.js

【解决方案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

【讨论】：