Как добавить материал (.mtl) к объекту (.obj), используя three.js? - PullRequest
Новая
       96

Как добавить материал (.mtl) к объекту (.obj), используя three.js?

1 голос
/ 18 октября 2019

Я успешно получил файл .obj для отображения с использованием three.js из фрагмента кода, который нашел в Интернете и адаптировал для своих нужд. Но сейчас я пытаюсь добавить файл материала .mtl и застреваю.

Я пробовал несколько вещей, но, похоже, ничего не работает. Я новичок в three.js, поэтому определенно неправильно что-то понимаю здесь ...

Вот текущий код, который я использую, который прекрасно работает для отображения моего файла .obj: 

var renderer, scene, camera, Nefertiti;

var ww = window.innerWidth,
    wh = window.innerHeight;

function init(){

    renderer = new THREE.WebGLRenderer({canvas : document.getElementById('scene')});
    renderer.setSize(ww,wh);

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50,ww/wh, 0.1, 10000 );
    camera.position.set(0,0,500);
    scene.add(camera);

    //Add a light in the scene
    directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
    directionalLight.position.set( 0, 0, 350 );
    directionalLight.lookAt(new THREE.Vector3(0,0,0));
    scene.add( directionalLight );

    //Load the obj file
    loadOBJ();
}

var loadOBJ = function(){

    //Manager from ThreeJs to track a loader and its status
    var manager = new THREE.LoadingManager();
    //Loader for Obj from Three.js
    var loader = new THREE.OBJLoader( manager );

    //Launch loading of the obj file, addNefertitiInScene is the callback when it's ready 
    loader.load( '/mypath/Nefertiti-3d.obj', addNefertitiInScene);

};

var addNefertitiInScene = function(object){
    Nefertiti = object;
    //Move the Nefertiti in the scene
    Nefertiti.scale.set(0.7,0.7,0.7);
    Nefertiti.rotation.x = 0.5;
    Nefertiti.rotation.y = 5.5;
    Nefertiti.rotation.z = 0.2;
    Nefertiti.position.y = -40;
    Nefertiti.position.z = 1;
    //Go through all children of the loaded object and search for a Mesh
    object.traverse( function ( child ) {
        //This allow us to check if the children is an instance of the Mesh constructor
        if(child instanceof THREE.Mesh){
            child.material.color = new THREE.Color(0XFFFFFF);
            //Sometimes there are some vertex normals missing in the .obj files, ThreeJs will compute them
            child.geometry.computeVertexNormals();
        }
    });
    //Add the 3D object in the scene
    scene.add(Nefertiti);

    var canvas = renderer.domElement;
canvas.addEventListener('mousemove', onMouseMove);

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

function onMouseMove(event) {
  Nefertiti.rotation.y += event.movementX * 0.001;
     Nefertiti.rotation.x += event.movementY * 0.0005;
}
};


init();

Здесьэто фрагмент, который я попытался добавить, чтобы загрузить файл mtl, который не работал (я только что сократил фактический путь к / mypath / для чистоты здесь) 

var loadOBJ = function(){

    var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl( '/mypath/' );
mtlLoader.setPath( '/mypath/' );
var url = "/mypath/Nefertiti-3d.mtl";
mtlLoader.load( url, function( materials ) {

    materials.preload();

    //Manager from ThreeJs to track a loader and its status
    var manager = new THREE.LoadingManager();
    //Loader for Obj from Three.js
    var loader = new THREE.OBJLoader( manager );

    loader.setMaterials( materials );
    loader.setPath( '/mypath/' );

    //Launch loading of the obj file, addNefertitiInScene is the callback when it's ready 
    loader.load( '/mypath/Nefertiti-3d.obj', addNefertitiInScene);

    object.position.y = - 95;
        scene.add( object );

    }, onProgress, onError );


};

Из исследования я вижу, что тамдолжен быть меш для материала, чтобы работать, но я просто не могу понять из любой документации, как я могу правильно его реализовать.

Любая помощь в том, чтобы добавить файл mtl в мой код, будет очень признателен! !

** РЕДАКТИРОВАТЬ **

Поэтому я изменил фрагмент кода, основанный на совете от Mugen87, на следующий: 

var loadOBJ = function(){

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( '/mypath/' );
var url = "/mypath/Nefertiti-3d.mtl";
mtlLoader.load( url, function( materials ) {

materials.preload();

//Manager from ThreeJs to track a loader and its status
var manager = new THREE.LoadingManager();
//Loader for Obj from Three.js
var loader = new THREE.OBJLoader( manager );

loader.setMaterials( materials );
loader.setPath( '/mypath/' );

//Launch loading of the obj file, addNefertitiInScene is the callback when it's ready 
loader.load( '/mypath/Nefertiti-3d.obj', addNefertitiInScene);

}, onProgress, onError );


};

И я также включил MTLLoader.js из примеров на three.js (я не уверен, что это правильно, мне трудно найти информацию по этому вопросу), и я получаю следующие ошибки в консоли: 

Uncaught SyntaxError: Cannot use import statement outside a module

(index):136 Uncaught TypeError: THREE.MTLLoader is not a constructor
    at loadOBJ ((index):136)
    at init ((index):132)
    at (index):199
loadOBJ @ (index):136
init @ (index):132
(anonymous) @ (index):199

Есть идеи? Что-то не так с тем, как у меня MTL в коде?

1 Ответ

3 голосов
/ 18 октября 2019 
object.position.y = - 95;
scene.add( object );

Полагаю, вы скопировали обе строки кода из официального примера OBJ / MTL , верно? К сожалению, здесь они не имеют смысла, поскольку object равно undefined. Помните, что addNefertitiInScene - это ваш обратный вызов onLoad(), который отвечает за добавление загруженного объекта в сцену.

Кроме того, mtlLoader.setBaseUrl( '/mypath/' ); не должно быть необходимым. Метод был удален довольно давно.

Также убедитесь, что с помощью инструментов разработчика браузера MTL-файл действительно загружен.

three.js R109

...