This is the 21st day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Texture map

1. Set the texture map for the model object

TextureLoader loads an image and returns a Texture object called Texture, which can be used as a model material color map

// The texture maps to a rectangular plane
var geometry = new THREE.PlaneGeometry(204.102); // Rectangular plane
// TextureLoader creates a TextureLoader object that loads images as geometry textures
var textureLoader = new THREE.TextureLoader();
// The load method is used to load the Texture successfully and return a Texture object named Texture
textureLoader.load('Earth.png'.function(texture) {
  var material = new THREE.MeshLambertMaterial({
    // color: 0x0000ff,
    // Set the color Texture map: the Texture object is the property value of the Texture map property
    map: texture,// Set the color map property value
  }); // The Material object is Material
  var mesh = new THREE.Mesh(geometry, material); // Mesh model object Mesh
  scene.add(mesh); // Add the grid model to the scene
function render() {
    renderer.render(scene, camera);
}
  // After the texture map is loaded successfully, the rendering function is called to perform the rendering operation
  render();
})
Copy the code

The image loader ImageLoader loads an image and the Texture object’s.image property is an image.

// Image loader
var ImageLoader = new THREE.ImageLoader();
// The load method is a callback function that loads the image by path and returns an HTML element img object
ImageLoader.load('Earth.png'.function(img) {
  // Create a Texture object named Texture
  var texture = new THREE.Texture(img);
  // The update is triggered the next time the texture is used
  texture.needsUpdate = true;
  var material = new THREE.MeshLambertMaterial({
    map: texture, // Set the texture map
  });
  var mesh = new THREE.Mesh(geometry, material); // Mesh model object Mesh
  scene.add(mesh); // Add the grid model to the scene
});
Copy the code

2. Texture tile, rotation, offset, animation

1. The tile

var texture = textureLoader.load('Solar Panel.png');
// Set array mode to default ClampToEdgeWrapping RepeatWrapping: Array Mirroring Array: MirroredRepeatWrapping
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// Uv texture repeats in both directions
texture.repeat.set(4.2);
Copy the code

2. The migration

texture.offset = new THREE.Vector2(0.3.0.1)
Copy the code

2. Rotate

// Set the texture rotation Angle
texture.rotation = Math.PI/4;
// set the rotation center of the texture, default (0,0)
texture.center.set(0.5.0.5);
Copy the code

3. The animation

In the rendering function, the properties of the texture map are changed periodically, and the rendering function is repeated to achieve animation

function render() {
  renderer.render(scene, camera); // Perform render operations
  requestAnimationFrame(render);
  // Use addition and subtraction to set different directions of motion
  // Set the texture offset
  texture.offset.x -= 0.06
}
render();
Copy the code

Use canvas and video as texture maps

4. Bump map and normal map

Both maps are designed to deal with the problem of too many vertices in the model resulting in poor texture

var geometry = new THREE.SphereGeometry(100.25.25); / / the sphere

// Normal map

// TextureLoader creates a TextureLoader object that loads images as geometry textures
var textureLoader = new THREE.TextureLoader();
// Load a texture map
var texture = textureLoader.load('./Earth.png');
// Load the normal map
var textureNormal = textureLoader.load('./EarthNormal.png');
var material = new THREE.MeshPhongMaterial({
  map: texture, // Normal color texture map
  normalMap: textureNormal, // Normal map
  // set the depth, default (1,1).
  normalScale: new THREE.Vector2(1.2.1.2)});// The Material object is Material

// Bump map

var textureLoader = new THREE.TextureLoader();
// Load the color texture map
var texture = textureLoader.load('./ Bump map /diffuse. JPG ');
// Load bump map
var textureBump = textureLoader.load('./ bump map /bump.jpg');
var material = new THREE.MeshPhongMaterial({
  map: texture,// Normal texture map
  bumpMap:textureBump,// Bump map
  bumpScale:3.// Set the height of bump. The default value is 1.
}); // The Material object is Material
Copy the code

5. Lighting map (add shadows to the model)

The 3D model loader can be set up automatically without the programmer having to set it up in code, but do it anyway

// Create a plane geometry as the projection surface
var planeGeometry = new THREE.PlaneGeometry(300.200);

planeGeometry.faceVertexUvs[1] = planeGeometry.faceVertexUvs[0];
var textureLoader = new THREE.TextureLoader();
// Load a light map
var textureLight = textureLoader.load('shadow.png');
var planeMaterial = new THREE.MeshLambertMaterial({
  color: 0x999999.lightMap:textureLight,// Set the light map
  // lightMapIntensity:0.5,// The intensity of baking light. 1 by default.
});
var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); // Mesh model object Mesh
Copy the code

Geometry properties. FaceVertexUvs

General geometry has two sets of UV coordinates, For Geometry types,Geometry. FaceVertexUvs [0] contains texture coordinates for color map, normalMap, etc., and Geometry. FaceVertexUvs [1] contains a second set of texture maps for light map Geometry created through the Threejs Geometry API has only one set of texture coordinates, Geometry. FaceVertexUvs [0] by default, so to set up the light shadow map, Geometry. FaceVertexUvs [1] = Geometry. FaceVertexUvs [0]; Uv2 generally loads external models through Threejs, and the geometry type obtained by analyzing 3d model data is BufferGeometry type. For BufferGeometry, the two texture coordinates are represented by the.uv and.uv2 attributes respectively.

geometry.attributes.uv2 = geometry.attributes.uv;
Copy the code

6. Specular map (set brightness values for different areas of the model)

Set the brightness values for the different regions of the model. (Specular is the corresponding to specular. MeshPhongMaterial can only have specular properties.

// Load a texture map
var texture = textureLoader.load('earth_diffuse.png');
// Load a specular map
var textureSpecular = textureLoader.load('earth_specular.png');
var material = new THREE.MeshPhongMaterial({
  // specular: 0xff0000,// The color of the highlighted part
  shininess: 30.// The brightness of the highlights is 30 by default
  map: texture,// Normal texture map
  specularMap: textureSpecular, // Specular map
}); // The Material object is Material
Copy the code

7. Environment mapping (add maps to the surrounding environment of the model)

First introduce CubeTextureLoader (only environment maps use CubeTextureLoader, other maps use TextureLoader) and then set the envMap property to the material object. In general, the Specular Mesh material MeshPhongMaterial and the physical PBR material MeshStandardMaterial will use the environment map

var geometry = new THREE.BoxGeometry(100.100.100); / / cube

var loader = new THREE.CubeTextureLoader();
// If all maps are in the same directory, you can use this method to set shared paths
loader.setPath('Environment map /');
// the CubeTexture loader returns the CubeTexture object CubeTexture
var CubeTexture = loader.load(['px.jpg'.'nx.jpg'.'py.jpg'.'ny.jpg'.'pz.jpg'.'nz.jpg']);
// The Material object is Material
var material = new THREE.MeshPhongMaterial({
  // Set the color of the mesh model. The mesh model color and the environment map will be combined for calculation
  // color:0xff0000,
  envMap: CubeTexture, // Set the environment map
  // Ambient map reflectivity controls how much the ambient map affects the 3d model being rendered
  / / reflectivity: 0.1,
});
console.log(CubeTexture.image);
var mesh = new THREE.Mesh(geometry, material); // Mesh model object Mesh
scene.add(mesh); // Add the grid model to the scene
Copy the code