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

In the 3D world, many models, including OBJ, VTK, GLTF and so on, have a lot in common. No matter what the model is, in the three-dimensional world they are made up of points, lines and planes. Add textures, materials and light to make them more like objects in the natural world.

In this section we will look at how to give multiple textures to an Obj model.

Prepare the texture

  • We need to prepare two texture maps to implement our function

  • The first image is a texture map with texture coordinates that we used earlier
  • The second image is a new texture we found

Create multiple texture instances

  • One texture instance is bound to one texture map, we need two here
// Create a texture instance
var texture = new THREE.Texture();
var texture2 = new THREE.Texture();
Copy the code

Load multiple texture image resources

  • Load multiple texture resources and assign values to different texture instances for caching.
var loader = new THREE.ImageLoader(manager);
loader.setCrossOrigin("Anonymous");  // Resolve cross-domain issues

loader.load(`${base_url}/textures/UV_Grid_Sm.jpg`.function (image) {
    texture.image = image;
    texture.needsUpdate = true;
})
loader.load(`${base_url}/textures/disturb.jpg`.function (image) {
    texture2.image = image;
    texture2.needsUpdate = true;
})
Copy the code
  • useTHREE.ImageLoaderLoad our image resources
  • Set up thesetCrossOriginTo solve our online image cross – domain problem
  • The loaded image is added to the texture
  • Textures need to be setneedsUpdateTo update.

Add multiple textures to the OBJ model

  • We traverse the submodels in the model and assign different textures to the submodels by judging the models
var i = 0;
var objLoader = new THREE.OBJLoader(manager)
objLoader.setCrossOrigin("Anonymous");  // Resolve cross-domain issues
objLoader.load(`${base_url}/models/obj/male02/male02.obj`.function (object) {
    // Iterate over the submodel
    object.traverse(function (child) {
        if (child instanceof THREE.Mesh) {
            // Apply texture 2 when modulo equals 0
            if (i % 2= =0) {
                child.material.map = texture2
            } else {
                child.material.map = texture
            }
            i++
        }
    })
    object.position.y = -80
    scene.add(object)
}, onProgress, onError)
Copy the code
  • throughTHREE.OBJLoaderLoad our OBJ model
  • After the loading is completed and the model is obtained, theobject.traverseIterate over the submodel
  • Assign different textures to different submodels according to our judgment conditions
  • We can also passonProgressListen for the loading progress,onErrorListening load error.
  • Finished the effect display, the current random texture maps, two hands and two feet are not the same, a little incongruously.

  • We can also give texture 2 to the body and texture 1 to the rest of the body so that the hands and feet are symmetrical.
object.traverse(function (child) {
  if (child instanceof THREE.Mesh) {
      // The name of the model is body part, give texture 2
      if (child.name === 'mesh1.002 _mesh1 - geometry') {
          child.material.map = texture2
      } else {
          child.material.map = texture
      }
  }
})
Copy the code
  • Mesh1.002 _mesh1 - geometryThis model is the body parts of the model, the other sub-models are the hands, feet and hair.
  • If you want to map the head separately, you need to make the head into a separate model, which needs to be handled by the modeler.

So that’s how we put multiple textures into practice for our models.

conclusion

In this section, we mainly talk about the following contents:

  • Prepare multiple texture images
  • Assign multiple textures to the model by judgment