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

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

0 голосов
/ 06 ноября 2019
  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]);
    }
}
...