“This is the 21st 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…

Skin is texture, how to add texture to our three-dimensional world, to make it more realistic to real life. Let’s take a look.

The texture is introduced

  • Texture is essentially a picture
  • If we attach beautiful patterns to the walls of our courtyard, they will become colorful.

  • By slapping human skin on our 3D model, we become a real person

Texture class

In Threejs, the Texture class is represented by three. Texture, which has THREE commonly used properties

  • Image: image
  • WrapS: wrapS
  • Offset: migration

Its constructor looks like this:

THREE.Texture = function (image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy)
Copy the code
  • Image: This is an image type that basically has ImageUtils to load
  • Mapping: is a three.uvmapping () type, which represents texture coordinates (how textures are mapped to objects).
  • WrapS: The way of wrapping the texture on the X axis is the problem of how to wrap the rest of the plane when the width of the texture is smaller than the width of the plane to be mapped.
  • WrapT: indicates the texture loop mode of the y axis.
  • MagFilter and minFilter are ways to filter, and that’s the basic concept of OpenGL, so you don’t have to worry about it right now. When you do not set it, it takes the default value.
  • Format: Indicates the format of the image to be loaded. This parameter can be THREE.RGBAFormat, RGBFormat, etc. THREE.RGBAFormat means that each pixel should be represented by four components, namely red, green, blue and transparent. RGBFormat does not use transparency, which means textures do not have a transparent effect.
  • Type: indicates the format of each byte of memory in which the texture is stored, whether it is signed, unsigned, integer, or floating point. Default is unsigned (three. UnsignedByteType)
  • Anisotropy: anisotropic filtering. Using anisotropic filtering makes textures look better, but consumes more memory, CPU, and GPU time.

​

Points to note when using textures

The texture loading class ImageUtils

  • Load a class for different image formats
THREE.TextureLoader()
Copy the code

Cross-origin cross domain error

  • Javascipt does not have access to local files
  • If developed locally, we need to start a static service
  • If you really want to develop locally, use local files to add a suffix to Chrome
    • To create a shortcut for Chrome, right-click Chrome. exe and choose “Create shortcut” or “Send to” → “Desktop Shortcut”), right-click shortcut and select Properties. Then add the –enable-webgl –ignore-gpu-blacklist –allow-file-access-from-files parameter to the target. Note that the exe must be followed by a space

The loaded image should be raised to the power of two

If the image is not raised to the power of 2, the following error is reported

THREE.WebGLRenderer: image is not power of two (915x631). Resized to 1024x512
Copy the code

Actual combat displays texture images in the scene

  • We used a 512*512 image as a texture image

  • To modify our previous code, comment out the light and use a texture as a material
function initObject() {
    // Create plane geometry
    var geometry = new THREE.PlaneGeometry(512.512);
    // Get the texture, internally using ImageLoader
    // Get the texture, internally using ImageLoader
    var loader = new THREE.TextureLoader();
    loader.setCrossOrigin("Anonymous");  // Resolve cross-domain issues
    var texture = loader.load("textures/image.png");
    // Use a texture to create a material
    var material = new THREE.MeshBasicMaterial({ map: texture })
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh)
}
Copy the code
  • Use it to create PlaneGeometry
  • Three. TextureLoader: a texture class that uses ImageLoader internally to load texture images
  • The MeshBasicMaterial: map property allows you to set a texture map
  • This parameter is required if online images are usedloader.setCrossOrigin("Anonymous")To solve the image cross – domain problem
  • According to the effect

Codepen sample code

conclusion

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

  • Introduction to textures
  • Texture class
  • Issues to be aware of when using textures
  • Actual combat displays texture images in the scene