Как оптимизировать создание куба текстуры плитки с помощью PlaneGeometry в three.js

Question

1. Я хочу создать 1024-пиксельный 3D-куб для веб-vr.
2. У меня 24 (= 6 граней * 4 каждого сегмента) 512 пиксельных текстур.

3. Я хочу обновить каждую плитку куба (или грань), когда завершится загрузка текстуры размером 512 пикселей.

   • Дизайн 1: Создайте 24 сетки PlaneGeometry и отобразите каждую сетку после завершения загрузки текстуры.
   • Дизайн 2: Создание 6 сеток PlaneGeometry и использование faceVertexUvs для отображения каждого сегмента (возможно, каждая сетка должна быть воссоздана при загрузке каждой плитки текстуры)
   • Дополнительно: используйте PlaneBufferGeometry и объединяйте ее для оптимизации (я неуверен, что PlaneBufferGeometry полностью поддерживает faceVertexUvs)

    function useFaceVetexUvs()
{
    for (let faceIndex = 0; faceIndex < 6; faceIndex++) {
        faceGeometrys.push(new THREE.PlaneGeometry(1024, 1024, 2, 2));
        const faceSegments = [];

        for (let faceSegmentIndex = 0; faceSegmentIndex < 4; faceSegmentIndex++) {
            faceSegments.push(new THREE.MeshBasicMaterial({ map: textures[faceSegmentIndex] }));
        }
        faceMaterials.push(faceSegments);
        for (let polygonIndex = 0; polygonIndex < 8; polygonIndex += 2) {
            faceGeometrys[faceIndex].faceVertexUvs[0][i][0] = new THREE.Vector2(0, 1);
            faceGeometrys[faceIndex].faceVertexUvs[0][i][1] = new THREE.Vector2(0, 0);
            faceGeometrys[faceIndex].faceVertexUvs[0][i][2] = new THREE.Vector2(1, 1);

            faceGeometrys[faceIndex].faceVertexUvs[0][i + 1][0] = new THREE.Vector2(0, 0);
            faceGeometrys[faceIndex].faceVertexUvs[0][i + 1][1] = new THREE.Vector2(1, 0);
            faceGeometrys[faceIndex].faceVertexUvs[0][i + 1][2] = new THREE.Vector2(1, 1);
        }

        setPlanePosition()
        const plane = new THREE.Mesh(planeGeometry, faceMaterials);
        scene.add(faceGeometrys[faceIndex]);
    }
}