具有动态子级的Three.js BufferGeometry

Question

我有几个具有相同形状，旋转，位置和比例不同的粒子。

var mesh = new THREE.Mesh(new THREE.Geometry(), material);
var geoArr = [];

function init() {
    var template = new THREE.BufferGeometry().fromGeometry(
        new THREE.TetrahedronGeometry(5, 0)
    );

    for (var i = 0; i < 20; ++i) {
        var geo = template.clone();

        // each geo have different rotate, scale, and translate
        geo.rotateX(...);
        geo.scale(...);
        geo.translate(...);
        geoArr.push(geo);
    }
    var bufferedGeo = THREE.BufferGeometryUtils.mergeBufferGeometries(this.geoArr);
    mesh.geometry = bufferedGeo;
}

function render() {
    // in each frame, rotate, scale, and translate are supposed to change
    for (var i = 0; i < geoArr.length; ++i) {
        geo.rotateX(...); // ???
        // Should I call rotateX, scale and translate? 
        // This will accumulate previous settings. How to set like mesh.position?
    }
    var bufferedGeo = THREE.BufferGeometryUtils.mergeBufferGeometries(this.geoArr);
    mesh.geometry = bufferedGeo;
}

我不确定是否应该以这种方式使用BufferGeometryUtils，以及如何在每个渲染帧中设置转换？