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();