A-frame：如何给 Ring 或 Cylinder 之类的图元提供深度？

Question

是否可以给出像Ring这样的二维图元thickness/depth？我正在尝试用图元制作一个 3D 门，我想制作一个具有一定深度的环或一个具有更厚网格的圆柱体。即使它在 three.js 层，我也想学习如何做到这一点，这样我就不必在整个设计中依赖导入的 3D 对象。

Answer 1

要挤出形状，您需要使用 THREE.js。以下是如何执行此操作的示例。 https://threejs.org/examples/?q=extrude#webgl_geometry_extrude_shapes2

如何在 AFrame 中使用 THREE.js 几何图形？您制作一个创建新 THREE.Geometry 的自定义组件，并在该组件内部构建您的形状并将其拉伸（参见 THREE.js 示例，单击右下角的 (<>) 按钮查看代码).

下面是一个在组件中制作自定义四边形的示例。你可以在这里看到故障。

https://glitch.com/edit/#!/custom-quad

查看 quad.js 了解详细信息。您应该能够从 three.js 挤出演示中复制代码，并将其放入您的自定义组件初始化函数中以构建挤出形状。然后你可以创建参数，比如 'thickness'，并将它们放在模式中，然后可以从实体上的组件名称访问它们。如果您还不知道如何编写自定义组件，则需要进行练习以了解其工作原理。

https://aframe.io/docs/0.9.0/introduction/writing-a-component.html

这是我制作自定义四边形的故障片段。它展示了如何在 AFrame 自定义组件中制作 THREE.Geometry。

init: function (data) {

        var geometry = new THREE.Geometry();
        geometry.vertices = data.vertices.map(function (vertex) {
            var points = vertex.split(' ').map(function(x){return parseFloat(x);});              
            return new THREE.Vector3(points[0], points[1], points[2], points[3]);
        });
        // Build the UVs on the faces.
        geometry.faceVertexUvs[0].push( 
          [ new THREE.Vector2(1,0), new THREE.Vector2(0,1), new THREE.Vector2(1,1) 
],
          [ new THREE.Vector2(1,0), new THREE.Vector2(0,0), new THREE.Vector2(0,1) 
]);
        geometry.computeBoundingBox();
        geometry.faces.push(new THREE.Face3(0, 2, 1), new THREE.Face3(0, 3, 2));
        geometry.mergeVertices();
        geometry.computeFaceNormals();
        geometry.computeVertexNormals();
        this.geometry = geometry; 
        //console.log(data);
      }

A-frame：如何给 Ring 或 Cylinder 之类的图元提供深度？

A-frame: How to give a primitive like Ring or Cylinder depth?

three.js

aframe