Three.js - 9. Texture mapping, texture object array, ground grid auxiliary observation, UV coordinates and animation

Create a texture map

const geometry = new THREE.PlaneGeometry(100, 100);
//纹理贴图加载器TextureLoader
const texLoader = new THREE.TextureLoader();
// .load()方法加载图像，返回一个纹理对象Texture
const texture = texLoader.load(
  new URL(`../assets/img/zhizhen.png`, import.meta.url).href
);
const material = new THREE.MeshLambertMaterial({
    
    
  //  color:0x00ffff,
  // 设置纹理贴图：Texture对象作为材质map属性的属性值
  map: texture, //map表示材质的颜色贴图属性
});

When color and map are used at the same time, overlapping and mixing will occur. It is best to set color without setting map, and to set map without setting color. The default color for color is white

Try different shapes of models

const geometry = new THREE.BoxGeometry(100, 100, 100); //长方体

Effect:

const geometry = new THREE.SphereGeometry(50, 50, 50); //长方体

Vertex UV coordinates

const uvs = new Float32Array([0, 1, 1, 1, 0, 0, 1, 0]);
geometry.attributes.uv = new THREE.BufferAttribute(uvs, 2);

The 2 here represents a group of 2

Get texture map quarter

const uvs = new Float32Array([0, 0.5, 0.5, 0.5, 0, 0, 0.5, 0]);
geometry.attributes.uv = new THREE.BufferAttribute(uvs, 2);

Circular plane set texture map

If you create a circular geometry CircleGeometryand use the image as a circular material map, then it will cut and render a square image into a circular effect.

    const geometry = new THREE.CircleGeometry(100, 100);
    const textureLoader = new THREE.TextureLoader();
    const material = new THREE.MeshBasicMaterial({
    
    
      color:0xfff000,
      map: textureLoader.load(
        new URL(`../assets/img/zhizhen.png`, import.meta.url).href
      ),
      // transparent: true,
      side: THREE.DoubleSide, //两面可见
    });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.y = 100;
    mesh.position.x = 100;
    scene.add(mesh);

The effect is as follows:

principle

CircleGeometryThe UV coordinates will extract the color texture map.map, and CircleGeometrythe UV coordinates will extract a circular outline by default.

Texture object Texture array

Use the array function of the threejs texture object Texture + the rectangular plane geometry PlaneGeometry to achieve a floor tile effect.

 const geometry = new THREE.PlaneGeometry(100, 100);
    const texLoader = new THREE.TextureLoader();
    const texture = texLoader.load( new URL(`../assets/img/zhizhen.png`, import.meta.url).href);
    const material = new THREE.MeshBasicMaterial({
    
    
      map: texture,
    });
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set(12, 12);
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

texture.wrapS is one of the properties of the texture object in WebGL and is used to specify how the texture repeats in the horizontal direction. It can be set to one of the following values:

• gl.REPEAT: The texture repeats horizontally.
• gl.CLAMP_TO_EDGE: The texture is truncated horizontally and stretched to edge pixels.

• gl.MIRRORED_REPEAT: The texture is repeated horizontally, but the texture is flipped each time it is repeated.
  For example, setting texture.wrapS = gl.REPEAT causes the texture to repeat horizontally, resulting in a seamless tiling effect. It should be noted that the wrapS and wrapT properties of the texture control how the texture repeats in the horizontal and vertical directions respectively.

Rotate rectangular plane

Note that the rotation direction affects whether the back side or the front side of the rectangular plane faces upward. Threejs renders the front side by default and does not render the back side.

// 旋转矩形平面
mesh.rotateX(-Math.PI/2);

background transparent png texture

Using a .png image with a transparent background as a color map for a flat rectangular mesh model Mesh is a very useful function. Through such a function, three.js three-dimensional scenes can be marked.

Let’s change it to a rectangle for testing.

const geometry = new THREE.PlaneGeometry(100, 100);
const textureLoader = new THREE.TextureLoader();
const material = new THREE.MeshBasicMaterial({
    
    
  map: textureLoader.load(
    new URL(`../assets/img/zhizhen.png`, import.meta.url).href
  ),
  transparent: true, // 开启透明
  side: THREE.DoubleSide, //两面可见
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Effect:

Grid ground auxiliary observationGridHelper

Rotate 90°

mesh.rotateX(-Math.PI / 2);

const gridHelper = new THREE.GridHelper(300, 25, 0x004444, 0x004444);
scene.add(gridHelper);

If you don't want to turn on transparency, it will become a color map.

const geometry = new THREE.PlaneGeometry(100, 100);
const textureLoader = new THREE.TextureLoader();
const material = new THREE.MeshBasicMaterial({
    
    
  map: textureLoader.load(
    new URL(`../assets/img/zhizhen.png`, import.meta.url).href
  ),
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Rotate rectangular plane

mesh.rotateX(-Math.PI / 2);

If you don’t want to overlap with the ground grid, you can set an offset for the plane .positionso that it does not overlap with the ground.

mesh.position = 1;

About animation

Let’s talk about texture image rotation animation here

Rotating sphere texture map

Texture object .wrapS or .wrapT is used in combination with .offset

After you set the offset in the animation method, you need to set .wrapSor .wrapTset to repeated mapping.
The following is a comparison effect.

Add offset directly

  const render = () => {
    
    
    texture.offset.x += 0.001;
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  };

Effect:

Offset + texture mapping

  texture.offset.x += 0.5; 
  texture.wrapS = THREE.RepeatWrapping; // 对应offste.x偏移
  /* 或 */
  // texture.offset.y +=0.5;//纹理V方向偏移
  // texture.wrapT = THREE.RepeatWrapping;//对应offste.y偏移

Effect:

It can be seen that the first method will cause problems after one rotation, and subsequent mapping cannot be repeated.

Texture map array + UV animation

Through the array texture map setting .map, the texture pixels can be smaller.

 const geometry = new THREE.PlaneGeometry(500, 500);
    const texLoader = new THREE.TextureLoader();
    texture = texLoader.load(
      new URL(`../assets/img/zhizhen.png`, import.meta.url).href
    );
    const material = new THREE.MeshBasicMaterial({
    
    
      // color:0xfff000,
      map: texture,
      // transparent: true,
      // side: THREE.DoubleSide, //两面可见
    });
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    // uv两个方向纹理重复数量
    texture.repeat.x = 5; //注意选择合适的阵列数量
    texture.repeat.y = 5; //注意选择合适的阵列数量
    const mesh = new THREE.Mesh(geometry, material);
    mesh.rotateX(-Math.PI / 2);
    scene.add(mesh);

  const render = () => {
    
    
    texture.offset.x += 0.01;
    texture.offset.y += 0.01;
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  };
  render();