Examples to explain three.js loading obj model

The main example of this article introduces the loading of obj model by three.js. Three.js is a webGL framework and is widely used due to its ease of use. If you want to learn webGL, it is a good choice to abandon those complicated native interfaces and start with this framework. Okay, let me introduce you to three.js loading obj model through a piece of code. The specific code is as follows:

Let’s take a look at how to use Three.js to load obj and mtl files

OBJ and MTL are the geometric model files and material files of the 3D model.

In the latest three.js version (r78), the previous OBJMTLLoader class has been deprecated.

Now to load OBJ and MTL files, you need to combine the two classes OBJLoader and MTLLoader to achieve this, which also provides operational flexibility.

In the following code, MTLLoader is first used to load the egg.mtl material file, and then the material is set to an OBJLoader object so that it can be applied when loading the obj model.

onProgress is the loading process callback function, and onError is the error handling function.

// model var onProgress = function(xhr) { if (xhr.lengthComputable) { var percentComplete = xhr.loaded / xhr.total * 100; console.log(Math.round(percentComplete, 2) + '% downloaded'); } }; var onError = function(xhr) {}; THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader()); var mtlLoader = new THREE.MTLLoader(); mtlLoader.setPath('/uploads/160601/obj/'); mtlLoader.load('egg.mtl', function(materials) { materials.preload(); var objLoader = new THREE.OBJLoader(); objLoader.setMaterials(materials); objLoader.setPath('/uploads/160601/obj/'); objLoader.load('egg.obj', function(object) { object.position.y = -0.5; scene.add(object); }, onProgress, onError); });

Related recommendations:

Example explanation of Three.js loading external model

Detailed explanation of three.js local running method

JS Library Three.js Basics Introduction

The above is the detailed content of Examples to explain three.js loading obj model. For more information, please follow other related articles on the PHP Chinese website!