Импорт obj модели в canvas(текстурирование)

Question

Пытаюсь залоадить модель obj, всё получается, но появляется проблема с текстурированием. В общем, есть модель obj формата из blenderа, которую надо заимпортить в three js, при этом оставить изначальное качество модели, ну или хотя бы приблежённо что-то в этом роде

код: `

function addModel(pos) {
        const mtlLoader1 = new MTLLoader();
        mtlLoader1.load('./models/untitled4.mtl', function(mtlParseResult) {
        mtlParseResult.preload();
        const objLoader = new OBJLoader();
        objLoader.setMaterials(mtlParseResult);
        objLoader.load('./models/untitled4.obj', function(r12) {
              r12.position.x = 0;
            r12.position.y = 0.04;
            r12.position.z = 0;
            r12.rotation.y = 1.55;
            r12.scale.x = 10;
            r12.scale.y = 10;
            r12.scale.z = 10;
            r12.isDraggable = true;
            scene.add(r12);
      });
    });
}

`

Answer 1

OBJ модели не очень удобно импортировать. Сам когда-то сталкивался с такой проблемой, что после импорта ломается развертка и грузится только один материал. Чтобы импорт модели производился корректно я использовал THREE.LoadingManager и подгружал геометрию и материалы асинхронно.

Попробуйте такой вариант загрузки, должно работать:


const loadingManager = new THREE.LoadingManager();
const objLoader = new THREE.OBJLoader(loadingManager);
const mtlLoader = new THREE.MTLLoader(loadingManager);

const scene = new THREE.Scene();

/**
* Вернет Promise<THREE.Group>.
* THREE.Group можно будет добавить в сцену;
*/
function loadModel(path, basename) {
 return mtlLoader.setPath(path)
                 .setResourcePath(path)
                 .loadAsync(`${basename}.mtl`)
                 .then((materials) => {
                   materials.preload();
                   return materials;
                 })
                 .then((materials) => {
                   return objLoader.setPath(path)
                                   .setMaterials(materials)
                                   .loadAsync(`${basename}.obj`);
                 });
}

loadModel('./models/', 'untitled4').then((group) => {
           scene.add(group);
         })
         .catch(console.error);

Обязательно проверьте правильность пути до файлов текстур в файле *.mtl. Blender может указать его не совсем верно.

БЛОГ НА HUSL

Импорт obj модели в canvas(текстурирование)

Ответы (1 шт):