How to create a custom square in a-frame

问题

How can I create a custom square registering a new component in a-frame?

I am trying to update the example found here https://github.com/aframevr/aframe/blob/master/docs/components/geometry.md under the heading "Register a Custom Geometry"

Below is what I have tried - first the 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;
      }
    });

I have made comments where I have made changes, essentially just adding 4 elements where there were previously three

I then add this into the html

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

But it seems to just ignore my new vertice and just creates a triangle. I suspect there is something about the three.js code that I do not understand and I don't seem to be able to solve it by looking at their documentation - any help would be much appreciated.

回答1:

This seems to work;

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;
      }
    });

again followed by this in the html

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

来源：https://stackoverflow.com/questions/47663216/how-to-create-a-custom-square-in-a-frame

标签

javascript

three.js

aframe

webvr