It is a webGL framework that is widely used due to its ease of use. If you want to learn webGL, it is a good choice to abandon those complex native interfaces and start with this framework. Okay, let’s introduce you to loading the obj model through a piece of code. The specific code is as follows:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="libs/"></script>
<script type="text/javascript" src="libs/"></script>
<script type="text/javascript">
var scene = null;
var camera = null;
var renderer = null;
var mesh = null;
var id = null;
function init() {
renderer = new ({// Renderer canvas: ('mainCanvas')//canvas });
(0x000000);//Canvas Color scene = new ();//Create a scene camera = new (-5, 5, 3.75, -3.75, 0.1, 100);//Orthogonal projection camera (15, 25, 25);//Camera location (new THREE.Vector3(0, 2, 0));// lookAt() sets the position of the camera looking (camera);//Add the camera to the scene var loader = new ();//In the init function, create a loader variable to import the model ('libs/', function(obj) {//The first represents the model path, and the second represents the callback function after the import is completed. Generally, we need to add the imported model to the scene in this callback function. (function(child) {
if (child instanceof ) {
= ;
}
});
mesh = obj;//Save in global variable (obj);//Add the imported model to the scene });
var light = new (0xffffff);//Light source color (20, 10, 5);//Light source position (light);//Add light source to the scene id = setInterval(draw, 20);//Repaint every 20 seconds }
function draw() {// We make the teapot rotate in the redraw function: (scene, camera);//Calling the render function of WebGLRenderer to refresh the scene += 0.01;//Add animation if ( > * 2) {
-= * 2;
}
}
</script>
</head>
<body onload="init()">
<canvas width="800px" height="600px" ></canvas>
</body>
</html>
Let's see how to load obj and mtl files using
OBJ and MTL are geometric model files and material files for 3D models.
In the latest version (r78), the previous OBJMTLLoader class is deprecated.
Now to load OBJ and MTL files, you need to combine OBJLoader and MTLLoader classes to implement, which also provides operational flexibility.
In the following code, first use MTLLoader to load the material file, and then set the material to an OBJLoader object for application 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 () {
var percentComplete = / * 100;
((percentComplete, 2) + '% downloaded');
}
};
var onError = function(xhr) {};
(/\.dds$/i, new ());
var mtlLoader = new ();
('/uploads/160601/obj/');
('', function(materials) {
();
var objLoader = new ();
(materials);
('/uploads/160601/obj/');
('', function(object) {
= -0.5;
(object);
}, onProgress, onError);
});
Summarize
The above is the example code for loading the obj model introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!