Как текстурировать 3д модель в Three.Js?

Question

Столкнулся с проблемой текстурирования моделей. Если текстурировать обычные объекты то проблем нет, но если модели загруженные из вне то не получается. В чём может быть проблема? Буду благодарен любым ответам. Спасибо заранее

//если текстурировать obj модель не работает
let loader = new THREE.TextureLoader();
let texture = loader.load('texture.png');
const material = new THREE.MeshPhongMaterial({
     map: texture
});
this.objLoader.load('model.obj', (model) => {
    let modelTextured = new THREE.Mesh(model,material)
    scene.add(modelTextured);
});

//если текстурировать примитивные объекты то работает
    let loader = new THREE.TextureLoader();
    let texture = loader.load('texture.png');
    const material = new THREE.MeshPhongMaterial({
        map: texture
    });
    let geomentry = new THREE.BoxGeometry(10,10,10);
    let cube = new THREE.Mesh(geomentry,material);
    scene.add(cube);

Answer 1

Для того что бы модель имела текстуру вам нужно воспользоваться любым 3д редактором. Я использовал Blender. В Blender я корректно развернул модель и наложил на её uv-map текстуру моей модели. После этого я экспортировал модель в формате glb.

Далее в Three.js вы загружаете вашу glb модель в ваш проект и добавляете в сцену и всё прекрасно работает

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader  = new GLTFLoader(),

this.loader.load( 'model.glb',  ( gltf )=> {
     scene.add( gltf.scene );
}

БЛОГ НА HUSL

Как текстурировать 3д модель в Three.Js?

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