【发布时间】：2018-04-20 19:07:40
【问题描述】：
我一直在尝试使用 Aframe js 创建平行四边形，但找不到要创建的原语。请帮我创建它。
【问题讨论】：
标签： javascript aframe
【发布时间】：2018-04-20 19:07:40
【问题描述】：
您可以手动创建，通过创建自定义组件，该组件将基于自定义 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);
工作小提琴here。 也请查看this question。
【讨论】：
以下是我将如何创建任何我想要的自定义形状（以平行四边形为例），虽然 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);
},
});
然后，使用该组件和现有的材质组件制作一个图元
//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 是一个工作小提琴
【讨论】：
或者，这是另一种方法，将 'shapemaker' 与 'shapeata' 分开，这样您就可以使用一个脚本来制作您喜欢的任何自定义形状并添加通过注册一个自定义基元（使用该组件）并从那里传递特定于形状的信息，在特定于形状的数据中。
所以，一个通用的 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 是一个工作小提琴
【讨论】：