调用object3D子项以获取独特的样式/动画

Question

我想知道如何调用多维数据集的各个子对象（mesh0，mesh1），因此我能够为它们两者设置不同的样式/动画。

AFRAME.registerComponent('multi_box', {
  schema: {},
  update: function() {
  for (var i = 0; i < 2; i++) {
    var material = new THREE.MeshBasicMaterial({color: "blue"});
    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var cube = new THREE.Mesh(geometry, material);
    cube.position.x = i == 0 ? -1 : 1;
    cube.position.y = 0.5;
    cube.position.z = -5;

    this.el.setObject3D("mesh"+i, cube); //unique name for each object
}
    console.log(this.el.object3DMap)  
}
});

Codepen链接：https://codepen.io/ubermario/pen/wrwjVG

我可以用console.log记录它们，并且看到它们彼此是唯一的对象，但是我在调​​用它们时遇到了麻烦：

var meshtest = this.el.getObject3D('mesh0')
console.log(meshtest.position)

我尝试过这种方法，但是没有运气：aframe get object3d children

感谢您的任何帮助：）

Answer 1

实例化

在您的for周期中创建

1. 一个新的几何实例
2. 一个新的材质实例
3. 连接前两个的新网格

每个new关键字创建一个独立于其他实例的唯一实例。在您的情况下，mesh0和mesh1彼此完全独立。如果您更改实例的任何属性，例如材料的颜色或位置，其他属性将不受此影响。实际上，您可以通过为每个多维数据集分配不同的x位置来做到这一点。

存储

您的组件拥有3D对象的地图。每个都有唯一的名称标识。您可以通过将前缀mesh与迭代编号（i的值）串联来生成此名称。

您以后可以像创建多维数据集一样访问多维数据集。按名称

this.el.getObject3D('mesh0')
this.el.getObject3D('mesh1')
//etc.

或按索引

this.el.object3D.children[0]
this.el.object3D.children[1]

您可以进一步操作它们。例如，您可以在Codepen中将其放在Ln19上：

this.el.getObject3D('mesh0').position.y = 2;
this.el.object3D.children[1].position.z = -3;

仅出于完整性考虑：如果最后省略+i，则将一次又一次覆盖相同的键，因此mesh仅引用最后一个多维数据集，而其他多维数据集则会丢失。

更改属性

Three.js有一个不错的API，但是在javascript中，您始终需要考虑幕后发生的事情。您将在学习新知识的同时看到这一点。例如：

this.el.object3D.children[1].position.z = -3;
this.el.object3D.children[1].material.color.set('#ffff00');
this.el.object3D.children[1].material.color = [1, 1, 0];

如您所见，可以直接更改位置，但是有时颜​​色需要设置器。向量使事情变得更加复杂，您需要注意哪些方法会更改当前实例，哪些方法会产生新实例。您很容易忘记clone。假设您有：

var pos = new THREE.Vector3(-1, 0.5, -5)
for (var i = 0; i < 2; i++) {
    var material = new THREE.MeshBasicMaterial({color: "blue"});
    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var cube = new THREE.Mesh(geometry, material);

    //wrong, since it will assign the object reference,
    //i.e. always the same object.
    //Thus, the cubes will be at one position in the end
    cube.position = pos;

    //right
    cube.pos = pos.clone();

    pos.x += 1;
    this.el.setObject3D("mesh"+i, cube); //unique name for each object
}

区别是关于引用和值类型的话题比较温和。您将找到许多有关此的教程，例如，我刚刚找到的this small gist。

我希望这对您有所帮助，并祝您学习愉快！！>