javascript - Threejs 多重网格动画

Question

我是 threejs 的新手，我创建了一个 for 循环来绘制 400 个圆柱体。一切都很好，它们被调用到场景中并正确渲染。当我为对象制作动画时，400 个对象中只有一个似乎在旋转。如何旋转所有圆柱体？

代码:

        for( var j = 0; j < 400; j++){
                abgeometry2 = new THREE.CylinderGeometry (1, 5, 8, 4);
              abmesh2 = new THREE.MeshPhongMaterial({color: 0x3B170B,
                    wireframe: false });
              mesh2 = new THREE.Mesh(abgeometry2, abmesh2);
                mesh2.position.x = Math.random() * 400 - 200;
                mesh2.position.y = Math.random() * 400 - 200;
                mesh2.position.z = Math.random() * 400 - 200;
                scene.add( mesh2 );
            }

在动画中我输入:mesh2.rotation.z += 0.06; 我知道我可能在做一些愚蠢的事情，但我对 threejs 不太熟悉。

Answer 1

您只需将旋转应用于最后一个圆柱体，因为它们在循环期间都已分配给 mesh2。

尝试这样的事情:

var numCylinders = 400;

var cylinders = [];

var geo = new THREE.CylinderGeometry (1, 5, 8, 4);
var mesh = new THREE.MeshPhongMaterial({color: 0x3B170B, wireframe: false });

for (var i = 0; i < numCylinders; i++){
    var curCylinder = new THREE.Mesh(geo, mesh);

    curCylinder.position.x = Math.random() * 400 - 200;
    curCylinder.position.y = Math.random() * 400 - 200;
    curCylinder.position.z = Math.random() * 400 - 200;

    scene.add(curCylinder);

    cylinders.push(curCylinder);
}

var render = function () {
    requestAnimationFrame( render );

    for (var i = 0; i <numCylinders; i++){
        cylinders[i].rotation.z += 0.06;
    }

    renderer.render(scene, camera);
};

render();