移動數組中的項目

Question

目前在陣列中有球體網格，並且希望能夠將它們放置在一個關卡中。 目前它們已經設置在 position（骨架形）中，但我想移動整個陣列並將其放置在一個位置，而不是單獨移動每個網格。 這可能嗎？

 var meshJoints = []; for (var i = 0; i < 25; i++) { var geo = new THREE.SphereGeometry(0.02, 18, 18); var mat = new THREE.MeshPhongMaterial({color: 0xCCCCCC}); var mesh = new THREE.Mesh(geo, mat); meshJoints.push(mesh); }

Answer 1

將所有網格添加到一個Group中，然后移動該Group 。

var meshJoints = new THREE.Group();
for (var i = 0 ; i < 25 ; i++)
{
    var geo = new THREE.SphereGeometry(0.02, 18, 18);
    var mat = new THREE.MeshPhongMaterial({color: 0xCCCCCC});
    var mesh = new THREE.Mesh(geo, mat);
    meshJoints.add(mesh);
}

scene.add(group);
meshJoints.position.set(x, y, z); // setting group position will cascade to all children

一個Group充當一個集合，並且它是可自我轉換的。 在Group上設置 position、旋轉或縮放會將更改級聯到其所有子級。 在這種情況下，設置Group的position將導致所有Mesh es 移動相同的變化量。

Answer 2

方法一

如果您使用額外的幾何圖形合並這些球體：

const mergedGeometry = new THREE.Geometry();
mergedGeometry.merge(mesh1.geometry, mesh1.matrix);

您可以只設置合並網格的 position，它們都將被重新定位。 這是一個代碼筆： https://codepen.io/ThanosSar/pen/JjRgyQz

three.js 文檔：

https://threejs.org/docs/index.html#api/en/core/Geometry ：

 .merge ( geometry: Geometry, matrix: Matrix4, materialIndexOffset: Integer ): null Merge two geometries or geometry and geometry from object (using object's transform)

方法二

編輯：（使用這種方法，網格將保持獨立，並且它們也可以單獨移動）

第二種方法是通過以下方式創建 object3d 層次結構：

fatherMesh.add(mesh1)

這是一個代碼筆： https://codepen.io/ThanosSar/pen/VwKoMLw

three.js 文檔：

https://threejs.org/docs/index.html#api/en/core/Object3D ：

.add ( object: Object3D, ... ): 添加 object 作為 object 的子項。 可以添加任意數量的對象。 此處傳入的 object 上的任何當前父級都將被刪除，因為 object 最多只能有一個父級。