在AFrame中随时随地操作顶点?

本教程将介绍在AFrame中随时随地操作顶点?的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

在AFrame中随时随地操作顶点? 教程 第1张

问题描述

我有一架定制飞机:

JS:

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:

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

现在怎么操作动画循环中的顶点位置?

让我们说第一点:

geometry.vertices[0] 

我知道我可以通过以下方式访问网格:

document.getElementById("myPlane").object3D;

并更改其位置,例如:

document.getElementById("myPlane").object3D.position.set(1,0,0)

但平面网格的几何体上没有顶点:

document.getElementById("plane").object3D.children[0]

怎么操作该几何图形的顶点?

编辑:

我发现您可以这样更新顶点的位置:

document.getElementById("myPlane").object3D.children[0].geometry.attributes.position.array[0] = 20;

document.getElementById("myPlane").object3D.children[0].geometry.attributes.position.needsUpdate = true;

我想在tick()函数中执行所有操作,因为我真正想要的是用一条线连接两个对象。

现在平面的顶点如下所示:

Float32Array(18) [-0, 0, -3, 0, 1, -3, 2, 2, -3, 1, 1, -3, 2, 2, -3, 1, 2, -3]

由于平面有4个点,我预计会有4*3=12个元素,但我们得到了18个元素。除了XYZ,剩下的是什么?

推荐答案

顶点可用作对象几何体的属性:

// mesh
const mesh = element.getObject3D("mesh");
// "vertices"
const vertices = mesh.geometry.attributes.position.array;

您只需更改您想要的任何内容,并使用以下命令确认更新:

mesh.geometry.attributes.position.needsUpdate = true;

最大的复杂性在于索引非索引几何图形之间的差异。简而言之:

    非索引几何图形包含网格中任何三角形的所有顶点。一个平面包含两个三角形,因此有2个三角形*3个顶点*3个坐标=18个条目。这可以在这个例子中得到说明,在这个例子中,我操纵一个顶点,但只有一个三角形受到影响:

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">

<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
 init: function() {
this.el.addEventListener("loaded", e => {
  const mesh = this.el.getObject3D("mesh");
  this.positionAttr = mesh.geometry.attributes.position;
})
 },
 tick: function(time) {
// manipulate "Y" of the third vertex
let offset = 0.25 * Math.sin(time * 0.001);
this.positionAttr.array[2 * 3 + 1] = 0.5 + offset;
this.positionAttr.needsUpdate = true;
 }
  })
</script>

<a-scene>
  <a-plane position="0 1.5 -2" wireframe="true" material="color: blue" foo></a-plane>
</a-scene>

    索引几何图形不喜欢将相同的顶点重复两次,因此它存储唯一的顶点,并提供引用任何存储的顶点的索引。现在操纵顶点看起来完全不同了:

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
 init: function() {
this.el.addEventListener("loaded", e => {
  const mesh = this.el.getObject3D("mesh");
  this.positionAttr = mesh.geometry.attributes.position;
})
 },
 tick: function(time) {
let offset = 0.25 * Math.sin(time * 0.001);
this.positionAttr.array[4] = 0.5 + offset;
this.positionAttr.needsUpdate = true;
 }
  })
</script>

<a-scene>
  <a-plane position="0 1.5 -2" wireframe="true" material="color: blue" foo></a-plane>
</a-scene>

代码看起来相同,但a帧版本不同-更改几何图形(geometry.toNonIndexed())时应该得到相同的结果

好了关于在AFrame中随时随地操作顶点?的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。