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

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

Я успешно получил файл .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 в коде?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector