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

Question

按照如何在a帧中创建自定义正方形中的此示例，我尝试使用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可以解决问题 - 在此小提琴中查看。