如何使用Aframe js創建平行四邊形？
[英]How to create parallelogram using Aframe js?
問題描述
我一直在嘗試使用Aframe js創建平行四邊形，但找不到原始圖。 請幫助我創建它。
3 個解決方案
解決方案1
1 已采納 2018-04-20 09:40:12
您可以通過創建自定義組件手動進行創建，該組件將基於自定義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);
解決方案2
0 2018-04-20 10:04:22
這是我將如何創建所需的任何自定義形狀的方法（以平行四邊形為例），盡管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>
這是一個工作的小提琴
解決方案3
0 2018-04-20 10:46:26
另外，這是將“ 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腳本，我可以將許多形狀定義為基本體，而不必更改該腳本。
這是一個工作的小提琴
如何使用 javascript 創建和框架實體 animation
[英]how to use javascript to create and aframe entity with animation
使用帶有地圖的three.js MeshStandardMaterial 的AFrame 示例
[英]AFrame example using three.js MeshStandardMaterial with maps
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.