理解 Three.js 中 texture 的 offset, repeat 及 wrap

發布於: 2024-02-18 更新於: 2024-02-18 分類於: Three.js 閱讀次數:

前言

Threejs 中的 texture(貼圖) 可以設置 offset, repeat 及 wrap 屬性，但大部分文章都只有文字說明而沒有視覺化的範例，所以寫了一個視覺化範例讓自己能夠理解

Demo

圖片渲染在 (x,y) 平面上，右方橘色線為 x 軸，上方綠色線為 y 軸

範例程式碼

import * as THREE from 'three';

export class Plane {
  constructor(experience) {
    this.experience = experience;

    this.create();
    this.createDebugGUI();
  }

  // 創建 PlaneGeometry 並設置 texture
  create() {
    this.geometry = new THREE.PlaneGeometry(8, 8);
    this.loader = new THREE.TextureLoader();
    const texture = this.loader.load(
      'https://cdn.pixabay.com/photo/2018/07/09/17/44/baby-elephant-3526681_1280.png'
    );

    this.material = new THREE.MeshBasicMaterial({ map: texture });
    this.mesh = new THREE.Mesh(this.geometry, this.material);
    this.experience.scene.add(this.mesh);
  }

  // 設置 debug gui
  createDebugGUI() {
    this.experience.debug.gui
      .add(this.material.map.offset, 'x')
      .name('offsetX')
      .min(-1)
      .max(1)
      .step(0.1);
    this.experience.debug.gui
      .add(this.material.map.offset, 'y')
      .name('offsetY')
      .min(-1)
      .max(1)
      .step(0.1);

    this.experience.debug.gui
      .add(this.material.map.repeat, 'x')
      .name('repeatX')
      .min(-10)
      .max(10)
      .step(1);
    this.experience.debug.gui
      .add(this.material.map.repeat, 'y')
      .name('repeatY')
      .min(-10)
      .max(10)
      .step(1);

    this.experience.debug.gui
      .add(this.material.map, 'wrapS')
      .options({
        RepeatWrapping: THREE.RepeatWrapping,
        ClampToEdgeWrapping: THREE.ClampToEdgeWrapping,
        MirroredRepeatWrapping: THREE.MirroredRepeatWrapping
      })
      .onChange(() => {
        this.material.map.needsUpdate = true;
      });
    this.experience.debug.gui
      .add(this.material.map, 'wrapT')
      .options({
        RepeatWrapping: THREE.RepeatWrapping,
        ClampToEdgeWrapping: THREE.ClampToEdgeWrapping,
        MirroredRepeatWrapping: THREE.MirroredRepeatWrapping
      })
      .onChange(() => {
        this.material.map.needsUpdate = true;
      });
  }
}

Offset - 偏移

藉由設置 offset 可以改變 uv 座標對應到的紋理圖片，預設的 offset 為 0

1 2	material.map.offset.x = 0; material.map.offset.y = 0;

offset 為 0，原圖位於正中間

offset.x 為 -0.5，圖片會往右半邊偏移

offset.x 為 0.5，圖片會往左半邊偏移

offset.y 為 -0.5，圖片會往上偏移

offset.y 為 0.5，圖片會往下偏移

這裡我一直有個疑問，為什麼 offset.x 設為 -0.5 的時候圖片是往右半邊偏移而不是往左半邊偏移呢？後來才想出一個合理的解釋，uv 座標的原點在左下角，而 offset.x = -0.5 的意思是整個 uv 座標系.x - 0.5 = 紋理圖片的位置.x，所以以右上角 uv 座標系的 (1, 1) 來看，x 減掉 0.5 後變成 (0.5, 1) 而這個 (0.5, 1) 對應到的是紋理圖片的位置，所以 offset.x 設為 -0.5 看到的結果就是圖片往右偏移了一半