如何在框架中创建自定义3d形状

Question

跟随该示例：How to create a custom square in a-frame，我尝试使用在Blender-obj-export中找到的顶点和面创建一个四面体。

这是我的代码：

<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script>
AFRAME.registerGeometry('example', {
  schema: {
    vertices: {
      default: [],
    }
  },

  init: function (data) {
    var geometry = new THREE.Geometry();
    geometry.vertices = data.vertices.map(function (vertex) {
      var points = vertex.split(' ').map(function(x){return parseInt(x);});
      return new THREE.Vector3(points[0], points[1], points[2]);
    });
    geometry.computeBoundingBox();
        geometry.faces.push(new THREE.Face3(0,1,2));
        geometry.faces.push(new THREE.Face3(0,2,3));
        geometry.faces.push(new THREE.Face3(0,3,1));
        geometry.faces.push(new THREE.Face3(1,3,2));
    geometry.mergeVertices();
    geometry.computeFaceNormals();
    geometry.computeVertexNormals();
    this.geometry = geometry;
  }
});
</script>
<a-scene>
  <a-entity geometry="primitive: example; vertices:
    0 1 0,
    0.94 -0.33 0,
    -0.47 -0.33 -0.82,
    -0.47 -0.33 0.82
  "></a-entity>
</a-scene>

和一支笔：https://codepen.io/trufo/pen/rNaxgPr

使用原始示例中的顶点和面，我看到一个正方形，一切正常。但是，当我更改这些值以获得四面体时，什么也没有出现。我在做什么错？

Answer 1

您将parseInt用于浮点值（0.4，-0.82等）。它们中的大多数都舍入为0，因此大多数顶点为(0, 0, 0)-因此几何没有面。

将parseInt更改为parseFloat可解决问题-在this fiddle中进行检查。