如何在框架中创建自定义方块 [英] How to create a custom square in a-frame
问题描述
如何创建自定义方块以在框架中注册新组件?
How can I create a custom square registering a new component in a-frame?
我正在尝试更新此处的示例 https://github.com/aframevr/aframe/blob/master/docs/components/geometry.md在注册自定义几何图形"标题下
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"
以下是我尝试过的 - 首先是 js
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;
}
});
我在我进行更改的地方发表了评论,基本上只是在以前三个元素的地方添加了 4 个元素
I have made comments where I have made changes, essentially just adding 4 elements where there were previously three
然后我将其添加到 html
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>
但它似乎只是忽略了我的新顶点而只是创建了一个三角形.我怀疑关于 Three.js 代码的某些内容我不明白,而且我似乎无法通过查看他们的文档来解决它 - 任何帮助将不胜感激.
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.
推荐答案
这似乎有效;
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 中再次跟上这个
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>
这篇关于如何在框架中创建自定义方块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!