三js:渲染第一帧需要太多时间

我用三个。js(使用WegGL)渲染在空间中动画的许多图像块(数千)的交替场景。动画由Tween处理。js。我使用Chrome进行测试。

为了优化图像加载,我在显示第一个场景之前预加载所有纹理图像。然后,所有纹理都会以相同的格式保存在内存中 THREE.Texture .现在,当我准备要显示的场景时,我会执行以下操作:

let tile = null, tweens = [], cameraZ = 1000;
for (let y =  0; y < rows; y++){
    for (let x =  0; x < columns; x++){
        tile = await this.createTile(x, y, [textureSize]);
        tile.position.x = x * this.tileWidth - this.picWidth / 2;
        tile.position.y = -y * this.tileHeight + this.picHeight / 2;
        tile.position.z = cameraZ * 1.1;

        tweens.push(new TWEEN.Tween(tile.position)
            .to({z: 0}, 4000)
            .delay(200 + x * 120 + Math.random() * 1000)
            .easing(TWEEN.Easing.Cubic.InOut));
        this.scene.add(tile);
    }
}
tweens.map(t => t.start());

场景准备还包括摄像机和一个点光源,大约需要400毫秒才能完成。

然后,我按如下方式渲染场景:

function render(){
    requestAnimationFrame(render);
    TWEEN.update();
    renderer.render(this.scene, this.camera);
}
render();

当测量一些处理持续时间时,我看到 第一 渲染调用大约需要1400毫秒!其他通话需要70到100毫秒。

我的最终目标是有多个这样的场景,一个接一个地播放,没有任何冻结。考虑到所有必需的资产都已加载,可能会出现什么问题?我如何优化?

谢谢