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

Threejs多网格动画

1 个答案: