“This is the 35th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

The sample code USES three. Js – r73 version: cdnjs.cloudflare.com/ajax/libs/t…

In the last section, we mainly did the loading of the OBJ model into the scene, and added the texture map to the model. In this section, we will specifically talk about some problems that need to be paid attention to in the process of using OBJLoader. Let’s take a look.

View the OBJ model using Blender

  • Obj models can be viewed using 3D modeling software such as Blender
  • Choose File -> Import -> Import.objFile, select our OBJ model file for import

  • Effect of import

  • This also shows that our model itself has no texture maps (no clothes on) and we need to add texture maps if we want it to look good
  • Models without textures are also called white models

​

Load the model using OBJLoader

  • The load part of our OBJLoader source code is similar to VTKLoader, we use a custom loader manager here, and listen to the load progress

Custom Loader manager

  • Pass it to OBJLoader later
var manager = new THREE.LoadingManager();
manager.onProgress = function (item, loaded, total) {
    console.log(item, loaded, total);
}
Copy the code

Load model resources and listen for model loading progress

var objLoader = new THREE.OBJLoader(manager)
objLoader.setCrossOrigin("Anonymous");  // Resolve cross-domain issues
objLoader.load(`${base_url}/models/obj/male02/male02.obj`.function (object) {...// Process model data
}, onProgress, onError)

// Load model progress
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) {}Copy the code
  • lengthComputableWe can see this property by getting XHR. When this property is true, the model data length can be calculated
  • By calculatingLoaded data/total dataYou can calculate the percentage of the current load

Processing model data

  • Once the model is loaded, we can get an object, which is the model object. It’s an Object3D
objLoader.load(`${base_url}/models/obj/male02/male02.obj`.function (object) {
    console.log(object);
    // Iterate over the submodel
    object.traverse(function (child) {
        if (child instanceof THREE.Mesh) {
            child.material.map = texture
        }
    })

    object.position.y = -80
    scene.add(object)
}, onProgress, onError)
Copy the code
  • The object.traverse() method, inherited from Object3D, is used to traverse submodels
traverse: function ( callback ) {
	// The callback function passes itself
  callback( this );
	
  var children = this.children;
	
  for ( var i = 0, l = children.length; i < l; i ++ ) {
		// iterate over the submodel recursivelychildren[ i ].traverse( callback ); }},Copy the code
  • This method first passes itself (object) through a callback
  • It then iterates recursively through the child Object
  • Achieve the purpose of traversing all submodels
  • If the submodel belongs to the grid model, give it to himmaterial.mapAdd texture maps so that our models have texture maps (with clothes)

Why iterate over the submodel

  • Looking through Blender, one of our models is made up of many parts

  • Now the part I’ve selected is the body of the model, which is the left side of the yellow edge, and if we delete it, we’ll see that there are other parts.

  • So we go through all the sub-models, adding texture maps to each model

Codepen sample code