Question

如何创建在框架中注册新组件的自定义方块？

我正在尝试更新此处找到的示例https://github.com/aframevr/aframe/blob/master/docs/components/geometry.md 在标题下＃34;注册自定义几何＆＃34;

以下是我的尝试 - 首先是js

AFRAME.registerGeometry('example', {
      schema: {
        vertices: {
          default: ['-10 10 0', '-10 -10 0', '10 -10 0', '10 -10 0'], //added a 4th set of dimensions here
        }
      },

      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], points[3]); //added a 4th 'points' here
        });
        geometry.computeBoundingBox();
        geometry.faces.push(new THREE.Face3(0, 1, 2, 3)); //added a 4th number here
        geometry.mergeVertices();
        geometry.computeFaceNormals();
        geometry.computeVertexNormals();
        this.geometry = geometry;
      }
    });

我做了一些评论，我做了更改，基本上只添加了4个元素，而以前有三个

然后我将其添加到html

中

<a-entity geometry="primitive: example; vertices: 1 1 -3, 3 1 -3, 2 2 -3, 1 2 -3"></a-entity>

但它似乎只是忽略了我的新顶点而只是创建了一个三角形。我怀疑有些关于three.js代码的内容我不明白，而且我似乎无法通过查看他们的文档来解决它 - 任何帮助都会非常感激。

Answer 1

这似乎有效;

AFRAME.registerGeometry('example', {
      schema: {
        vertices: {
          default: ['-10 10 0', '-10 -10 0', '10 -10 0', '10 -10 0'],
        }
      },

      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.mergeVertices();
        geometry.computeFaceNormals();
        geometry.computeVertexNormals();
        this.geometry = geometry;
      }
    });

再次在html中显示

<a-entity geometry="primitive: example; vertices: 1 1 -3, 3 1 -3, 2 2 -3, 1 2 -3"></a-entity>

如何在框架中创建自定义方块

1 个答案: