Не отображаются текстуры у .obj модели. Three.js

Question

Пытаюсь загрузить модель из MagicaVoxel. Экспортировал ее в .obj, загружаю в коде, но модель становится черной в браузере.

Вот скрин модели

Вот код

import * as THREE from '../three.js-master/build/three.module.js';
import {OBJLoader2} from '../three.js-master/examples/jsm/loaders/OBJLoader2.js';
import {MTLLoader} from '../three.js-master/examples/jsm/loaders/MTLLoader.js';
import {MtlObjBridge} from '../three.js-master/examples/jsm/loaders/obj2/bridge/MtlObjBridge.js';

let canvas = document.querySelector('#webGL-output');

canvas.setAttribute('width', window.innerWidth);
canvas.setAttribute('height', window.innerHeight);


const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({canvas : canvas});

renderer.setClearColor(0xffffff)

const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.z = 5;
camera.position.x = 5;
camera.position.y = 5;

camera.lookAt(scene.position);

const mtlLoader = new MTLLoader();

mtlLoader.load("../textures/castle.mtl", mtlParseResult => {
    const materials = MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
    const objLoader = new OBJLoader2();

    objLoader.addMaterials(materials);
    objLoader.load("../textures/castle.obj", obj => scene.add(obj));
});

animate();

function animate() {
     requestAnimationFrame(animate);
     renderer.render(scene, camera);
}

Answer 1

Это вполне логично, .obj файл это только геометрический образ. Материал на него обычно накладывается картинкой, как это сделать на ThreeJS обсуждалось тут.

// Create a material
var textureLoader = new THREE.TextureLoader();
var map = textureLoader.load('./diffuse.png');
var material = new THREE.MeshPhongMaterial({map: map});

var loader = new THREE.OBJLoader();
loader.load( './my-model.obj', function ( object ) {

  // For any meshes in the model, add our material.
  object.traverse( function ( node ) {

    if ( node.isMesh ) node.material = material;

  } );

  // Add the model to the scene.
  scene.add( object );
} );

БЛОГ НА HUSL

Не отображаются текстуры у .obj модели. Three.js

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