如何使用 Aframe js 创建平行四边形？

Question

我一直在尝试使用 Aframe js 创建平行四边形，但找不到要创建的图元。请帮我创建它。

Answer 1

您可以通过创建自定义组件手动创建它，这将根据自定义 THREE.js 形状创建网格：

let points = [];
points.push(new THREE.Vector2(0, 0));
points.push(new THREE.Vector2(3, 0));
points.push(new THREE.Vector2(5, 3));
points.push(new THREE.Vector2(2, 3));

for (var i = 0; i < points.length; i++) {
  points[i].multiplyScalar(0.25);
}
var shape = new THREE.Shape(points);
var material = new THREE.MeshBasicMaterial({
  color: 0x00ff00
});
var mesh = new THREE.Mesh(geometry, material);
this.el.object3D.add(mesh);

工作fiddlehere。请也查看。

Answer 2

以下是我如何创建我想要的任何自定义形状（以平行四边形为例），尽管 Piotr 的回答更加简洁，也许另一种方法会有所帮助。

首先创建一个自定义组件，其中包含形状所需的所有顶点。（抱歉，顶点让它变长了，但它更清楚发生了什么）

//register parallelogram component

AFRAME.registerComponent('parallelogram', {

//create schema
schema: {    
},

//define vertices of a parallelogram
//made up of 4 triangles that are combined together
para_vertices: [
    //first triangle
    {
        'x': -1,
        'y': 0,
        'z': 0,
    },
    {
        'x': 0,
        'y': 0,
        'z': 0,
    },
    {
        'x': 0,
        'y': 1,
        'z': 0,
    },
    //second triangle
    {
        'x': 0,
        'y': 0,
        'z': 0,
    },
    {
        'x': 1,
        'y': 0,
        'z': 0,
    },
    {
        'x': 0,
        'y': 1,
        'z': 0,
    }, 
    //third triangle  
    {
        'x': 1,
        'y': 0,
        'z': 0,
    },
    {
        'x': 1,
        'y': 1,
        'z': 0,
    },
    {
        'x': 0,
        'y': 1,
        'z': 0,
    },
    //fourth triangle  
    {
        'x': 1,
        'y': 0,
        'z': 0,
    },
    {
        'x': 2,
        'y': 1,
        'z': 0,
    },
    {
        'x': 1,
        'y': 1,
        'z': 0,
    }, 

],


init: function (){

    //create 3.js geometry      
    this.geometry = new THREE.Geometry();
    var geometry = this.geometry

    //get the vertices that we described above
    var verts = this.para_vertices
    //calculate number of faces     
    var faceCount = verts.length/3

    //loop through vertices and add to the geometry
    for (var i = 0; i < verts.length; i++) {
        var v3 = verts[i]
        geometry.vertices.push ( new THREE.Vector3(v3.x, v3.y, v3.z) );
    }
    //add faces to geometry 
    for (var i = 0; i < faceCount; i++) {
        a = i+i*2
        geometry.faces.push(new THREE.Face3(a, a+1, a+2))
    }
    geometry.computeBoundingBox();
    geometry.computeFaceNormals();
    geometry.computeVertexNormals();
    geometry.mergeVertices();

    //use out of the box material that you add to the entity in the primitive below
    this.material = this.el.components.material.material
    //make a new 3.js mesh combining the geometry and the material
    this.mesh = new THREE.Mesh(this.geometry, this.material);
    //add this mesh to our parent element
    this.el.setObject3D('mesh', this.mesh);

},

});

然后，使用该组件和现有的 material 组件制作图元

//make it a primitive by defining a-parallelogram and adding the above component
AFRAME.registerPrimitive('a-parallelogram', {
  defaultComponents: {
    //add the material component
    // you could define this yourself in the above component if you prefer
    material: {},
    //add the parallelogram component we have just created
    parallelogram: {},
  },
  mappings: { 
    //specify any attributes and their mappings that you would like to be able to define from the html layer
    color: 'material.color',
  }, 
});

然后您可以像这样在 HTML 中使用它

<html>
  <head>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
    <!-- include a script that contains the parallelogram component -->
    <script src="scripts/parallelogram.js"></script>
  </head>
  <body>
    <a-scene>
        <a-parallelogram position="-1 0.5 -5" color="blue"></a-parallelogram>
        <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Here 是有效的 fiddle

希望对您有所帮助，您可以找到有关创建自定义组件的更多信息here and in particular for making shapes here

Answer 3

或者，这是另一种将 'shapemaker' 与 'shapedata' 分开的方法，这样您就可以有一个脚本来制作您喜欢的任何自定义形状，并通过注册一个自定义基元（使用该组件）并从那里传递特定于形状的信息来添加特定于形状的数据。

因此，一个通用的 shapemaker 组件（当从原始注册传递过来时将解析架构中的顶点）

//register custom shape maker component
AFRAME.registerComponent('customshape', {

    schema: {
        model: {
            default: {},
            parse : function (value){  
                return value
            }
        },   
    },    

    init: function (){

        this.geometry = new THREE.Geometry();
        var geometry = this.geometry
        var verts = this.data.model
        var faceCount = verts.length/3
        for (var i = 0; i < verts.length; i++) {
            var v3 = verts[i]
            geometry.vertices.push(new THREE.Vector3(v3.x, v3.y, v3.z));
        }       
        for (var i = 0; i < faceCount; i++) {
            a = i*3
            geometry.faces.push(new THREE.Face3(a, a+1, a+2))
        }
        geometry.computeBoundingBox();
        geometry.computeFaceNormals();
        geometry.computeVertexNormals();
        geometry.mergeVertices();   
        this.material = this.el.components.material.material
        this.mesh = new THREE.Mesh(this.geometry, this.material);
        this.el.setObject3D('mesh', this.mesh);

    },

});

然后将您想要的任何形状注册为基元（例如平行四边形），并在分配默认组件时将顶点作为值传入

//register particular shape primitive and pass in shape specific vertices
AFRAME.registerPrimitive('a-parallelogram', {
  defaultComponents: {
    material: {},
    customshape: {model: [
        {
            'x': -1,
            'y': 0,
            'z': 0,
        },
        {
            'x': 0,
            'y': 0,
            'z': 0,
        },
        {
            'x': 0,
            'y': 1,
            'z': 0,
        },
        {
            'x': 0,
            'y': 0,
            'z': 0,
        },
        {
            'x': 1,
            'y': 0,
            'z': 0,
        },
        {
            'x': 0,
            'y': 1,
            'z': 0,
        }, 
        {
            'x': 1,
            'y': 0,
            'z': 0,
        },
        {
            'x': 1,
            'y': 1,
            'z': 0,
        },
        {
            'x': 0,
            'y': 1,
            'z': 0,
        },
        {
            'x': 1,
            'y': 0,
            'z': 0,
        },
        {
            'x': 2,
            'y': 1,
            'z': 0,
        },
        {
            'x': 1,
            'y': 1,
            'z': 0,
        }, 

    ],
},
  },
  mappings: { 
    color: 'material.color',
  }, 
});

然后在 HTML

中使用它

<html>
  <head>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
    <script src="scripts/simplecustomshapemaker.js"></script>
  </head>
  <body>
    <a-scene>
        <a-parallelogram position="-1 0.5 -5" color="blue"></a-parallelogram>
        <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

因此，通过使用相同的自定义 shapemaker 脚本，我可以将许多形状定义为基元，而无需更改该脚本。

Here 是有效的 fiddle

如何使用 Aframe js 创建平行四边形？

How to create parallelogram using Aframe js?

javascript

aframe