Несколько экземпляров сетки GLB

#javascript #three.js

Вопрос:

Я пытаюсь создать поле астероидов и хотел бы загрузить одну и ту же простую модель породы один раз, а затем использовать этот экземпляр несколько сотен раз, произвольно регулируя положение, вращение и размер. У меня есть модель в виде файла .glb, и я смог импортировать ее один раз нормально и даже импортировать внутри цикла, чтобы получить результат, но это было чертовски медленно. Поэтому я пытаюсь использовать инстанцирование, чтобы заставить его работать, но я застрял.

Я работал над этим примером, и пока я использую их файл JSON, все в порядке. Я застрял, пытаясь импортировать файл .glb вместо .json. Я также хотел бы сохранить материал из glb.

 function initMesh() {

    let geometry, material;

    loader.load(
        modelsFolder   'rock.glb',
        function (gltf) {

            material = new THREE.MeshNormalMaterial();
            geometry = gltf.scene.children[0];
            makeInstanced(geometry, material, 20);

        },
        function ( xhr ) {
            // load progress
            // console.log( ( xhr.loaded / xhr.total * 100 )   '% loaded' );
        },
        function ( error ) {
            console.log( 'An error happened', error );
        }
    );
}

function makeInstanced( geometry, material, instanceCount ) {

    const matrix = new THREE.Matrix4();
    const mesh = new THREE.InstancedMesh( geometry, material, instanceCount );

    for ( let i = 0; i < instanceCount; i    ) {

        randomizeMatrix( matrix );
        mesh.setMatrixAt( i, matrix );

    }

    scene.add( mesh );

}

const randomizeMatrix = function () {

    const position = new THREE.Vector3();
    const rotation = new THREE.Euler();
    const quaternion = new THREE.Quaternion();
    const scale = new THREE.Vector3();

    return function ( matrix ) {

        position.x = Math.random() * 40 - 20;
        position.y = Math.random() * 40 - 20;
        position.z = Math.random() * 40 - 20;

        rotation.x = Math.random() * 2 * Math.PI;
        rotation.y = Math.random() * 2 * Math.PI;
        rotation.z = Math.random() * 2 * Math.PI;

        quaternion.setFromEuler( rotation );

        scale.x = scale.y = scale.z = Math.random() * 1;

        matrix.compose( position, quaternion, scale );

    };

}();
 

Комментарии:

1. Вы правы, у вас была медленная частота кадров из-за количества вызовов, и создание экземпляров-это решение. Этот пример очень эффективно рисует 1000 Сюзанн с помощью создания экземпляров. Вы должны посмотреть исходный код в этом примере, чтобы скопировать его методологию (в правом нижнем углу <> значка).

2. Спасибо. Я действительно последовал очень похожему примеру. Моя единственная проблема в том, что все они используют JSON для файлов моделей, а у меня есть GLB. Вероятно, есть способ преобразовать его в JSON, а затем использовать его, но я бы хотел сохранить свои текущие текстуры, которые также находятся в GLB.