Need help loading an OBJ and MTL file in Three.js
Question
I'm experiencing an odd issue while trying to load an OBJ and MTL file in Three.js using it's OBJMTLLoader() function and just can't seem to figure it out, or find a solution on Google. I have my index.html file inside of a folder, and also in that same folder is my js folder, which includes all external js files that I wrote for my project along with the three.js r68 library. Also in my root project folder is a folder named 'obj', which includes all of my obj files and their corresponding mtl files.
I initially started my project under a Windows system and was able to load everything just fine, no problem at all, but now I switched to my personal Linux system and I started seeing this problem and am unable to load any of my obj/mtl files any longer.
The error I am receiving is ' Uncaught TypeError: undefined is not a function ' and I've tried printing out my 'loader' variable and it simply shows me in the console that it's an object of type OBJMTLLoader. Any thoughts on this?
EDIT: The first file is js/main.js, and the next one is index.html.
const WIDTH = 1200; const HEIGHT = 700; const VIEW_ANGLE = 45; const ASPECT_RATIO = WIDTH / HEIGHT; const NEAR = 0.1; const FAR = 10000; var renderer, camera, scene; var pointLight, pointLight2; var xrot = 0.0025, yrot = 0.0025; $(document).ready(function() { // setup renderer, camera, perspective, etc. initScene(); $('#loadfile').change(getLoadedFile); $('input[type=range]').eq(0).change(showYRot); // lights pointLight = new THREE.PointLight(0xffffff); pointLight.position.x = -10; pointLight.position.y = 50; pointLight.position.z = 130; scene.add(pointLight); pointLight2 = new THREE.PointLight(0xffffff); pointLight2.position.x = 0; pointLight2.position.y = 50; pointLight2.position.z = 500; scene.add(pointLight2); var render = function() { window.requestAnimationFrame(render); $(scene.children).each(function() { if (this !== camera && this !== pointLight) { this.rotation.x = xrot; this.rotation.y += yrot; } }); renderer.render(scene, camera); }; render(); }); function initScene() { renderer = new THREE.WebGLRenderer({ antialias: true }); camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT_RATIO, NEAR, FAR); scene = new THREE.Scene(); scene.add(camera); camera.position.z = 250; renderer.setSize(WIDTH, HEIGHT); $('div#container').append(renderer.domElement); } function getLoadedFile(evt) { var fileList = evt.target.files; var filename = fileList[0].name; if (filename.substring(filename.length - 4, filename.length) == '.obj') { var obj = filename; var mtl = filename.substring(0, filename.length - 4) + '.mtl'; console.log('adding ' + filename + ' to scene.'); loadOBJMTLModel(obj, mtl); } } function loadOBJMTLModel(obj, mtl) { var loader = new THREE.OBJMTLLoader(); loader.load('obj/' + obj, 'obj/' + mtl, function(object) { scene.add(object); }); }
<script src="https://threejs.org/examples/js/loaders/OBJMTLLoader.js"></script> <script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script> <script src="https://threejs.org/examples/js/loaders/MTLLoader.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>OBJ Model Previewer</title> <style> body { background-color: lightgrey; } div#container { width: 1200px; height: 700px; border: 1px solid grey; } </style> <!-- <script src="js/main.js"></script> //--> <body> <h3>Choose file to load</h3> <input id="loadfile" type="file" /> <br /> <div id="container"></div> <br /> <span></span><br /> <span></span><br /> <br /> <span>Y Rotation: </span><input type="range" min="0.0" max="0.1" step="0.001" /> <span id="yrot"></span> </body> </html>
1 answers
solution1
2 ACCPTED 2017-06-14 15:39:54
As requested.
OBJMTLLoader is deprecated. you must use MTLLoader and OBJLoader together. You can view a traditional example here: view-source:threejs.org/examples/webgl_loader_obj_mtl.html
There have also been numerous updates to objloader2.js available @ https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/OBJLoader2.js
For a little more digging, see my previous answer for automated MTL loading here: Is there a way to load a mtl using the path in the obj file?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.