“This is the 22nd 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…

We’ve learned about the basic use of textures and how to solve cross-domain problems. Here we’ll learn about more complex ways to use textures.

Texture repeat

• On a plane, you can have a lot of repeating textures, so let’s make the interface display repeating textures.

Repeated use of textures

• Master chant sutras, big brother has a headache, we make it more headache. It looks like this

• The image we used is the one below

function createGUI() {
    var ParamObj = function () {
        this.repeat = 1;
        this.wrap = 1;
    }
    param = new ParamObj();
    const gui = new dat.GUI();
    gui.add(param, "repeat".1.5).name('Texture repeat')
    gui.add(param, "wrap".1.3).name('Texture Wrap').step(1)}// Change the texture
function changeTexture() {
    if(texture ! =null) {
     		// The texture repeats
        texture.repeat.x = texture.repeat.y = param.repeat
    }
}

function animation() {
    changeTexture()
    renderer.render(scene, camera);
    requestAnimationFrame(animation);
    update()
}
Copy the code

• Texture. Repeat: How many times the texture will be repeated on the surface in the U and V directions.
• Let our texture repeat by changing the number of texture repeats
• But the presentation was not what we wanted

• The texture image shrinks to a brushed state, why
  • This is caused by the texture loop (more on that later)
  • Let’s first set the texture loop to repeat

var texture
function initObject() {
    // Create plane geometry
    var geometry = new THREE.PlaneGeometry(512.512);
    // Get the texture, internally using ImageLoader
    var loader = new THREE.TextureLoader();
    loader.setCrossOrigin("Anonymous");  // Resolve cross-domain issues
    texture = loader.load("textures/image.png");
    // Set the texture loop to repeat
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping
    // 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

• And that’s where we’re at

Texture repetition needs attention

• Let’s set the range of repeat values to (-100,100) and see how the maximum and minimum values are displayed
• Too much repetition can cause trypophobia

• If the repetition value is negative, the texture will be reversed

• Duplicate values in the range (-1 to 0 and 0 to 1) will be trimmed

Texture loopback

• Repeating a texture is called a texture loop
• Threejs gives us several texture loop constants to use
  • Simple repetition
  • Edge of the drawing
  • The mirror to repeat

Simple repetition

THREE.RepeatWrapping = 1000;
Copy the code

Edge of the drawing

THREE.ClampToEdgeWrapping = 1001;
Copy the code

The mirror to repeat

THREE.MirroredRepeatWrapping = 1002;
Copy the code

Dynamically change loopback parameters through the GUI

function createGUI() {
    var ParamObj = function () {
        this.repeat = 1;
        this.wrap = 1000;
    }
    param = new ParamObj();
    const gui = new dat.GUI();
    gui.add(param, "repeat", -100.100).name('Texture repeat')
    gui.add(param, "wrap".1000.1002).name('Texture Wrap').step(1)}function changeTexture() {
    if(texture ! =null) {
        texture.repeat.x = texture.repeat.y = param.repeat
        texture.wrapS = texture.wrapT = param.wrap
      	// Update the texture
        texture.needsUpdate = true}}Copy the code

Codepen sample code

conclusion

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

• Repeated use of textures
• Texture repeat the texture that needs attention
• Classification of texture loops
  • Simple repetition
  • Edge of the drawing
  • The mirror to repeat
• GUI dynamically modifies parameters