Texture Fundamentals

Texture mapping in Three.js utilizes THREE.MeshBasicMaterial and THREE.TextureLoader. The basic materail renders objects without lighting influence, allowing direct color assignment or image application to surfaces.

The texture loader facilitates loading of image assets for use as textures.

Before proceeding, set up the essential components: scene, camera, and renderer. For reference, see《『Three.js』Takeoff!》

<div id="canvasBox"></div>

<script type="module">
  import * as THREE from "./js/Three/src/Three.js"
  import { OrbitControls } from './js/Three/examples/jsm/controls/OrbitControls.js'

  // Create scene
  const scene = new THREE.Scene()
  // Create camera
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.set(1, 1, 5)
  camera.lookAt(scene.position)

  // Add coordinate helper
  const axesHelper = new THREE.AxesHelper(5)
  scene.add(axesHelper)

  // Create renderer
  const renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.getElementById('canvasBox').appendChild(renderer.domElement)

  // Add orbit controls
  const controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true

  // Animation loop
  function animate() {
    controls.update()
    renderer.render(scene, camera)
    requestAnimationFrame(animate)
  }

  animate()
</script>

Beyond basic setup, we've included an AxesHelper and OrbitControls for better visualization.

Loading Textures

To apply textures, follow these steps:

1. Create a mesh to hold the texture
2. Use THREE.TextureLoader to load the image via its load() method
3. Assign the loaded texture to a THREE.MeshBasicMaterial

Assuming prior setup, here's how to proceed:

// Omitted parts...

// Initialize texture loader
const textureLoader = new THREE.TextureLoader()
// Load texture image
const texture = textureLoader.load('./assets/images/chunge_flower.png')

// Create a box
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({
  map: texture // Apply texture
})
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

The map property of MeshBasicMaterial assigns the texture.

Double-Sided Rendering

By default, a cube displays only the front face when textured. To show both sides:

// Omitted parts...

// Initialize texture loader
const textureLoader = new THREE.TextureLoader()
// Load texture
const texture = textureLoader.load('./assets/images/chunge_flower.png')

// Create a circle
const circleGeometry = new THREE.CircleGeometry(0.5, 32)
const material = new THREE.MeshBasicMaterial({
  map: texture,
  side: THREE.DoubleSide // Render both sides
})
const circle = new THREE.Mesh(circleGeometry, material)
scene.add(circle)

Default side value is THREE.FrontSide. Options include THREE.BackSide, THREE.DoubleSide, and THREE.TwoPassDoubleSide.

Texture Offset

After loading a texture, adjust its position using the offset property.

// Omitted parts...

// Initialize texture loader
const textureLoader = new THREE.TextureLoader()
// Load texture
const texture = textureLoader.load('./assets/images/chunge_flower.png')

// Offset texture
texture.offset.set(0.1, -0.5)

// Create a circle
const circleGeometry = new THREE.CircleGeometry(0.5, 32)
const material = new THREE.MeshBasicMaterial({
  map: texture,
  side: THREE.DoubleSide
})
const circle = new THREE.Mesh(circleGeometry, material)
scene.add(circle)

Alternative syntax for offset:

texture.offset.x = 0.1
texture.offset.y = -0.5

Positive x shifts right; negative left. Positive y shifts down; negative up.

Rotating Textures

Textures can also be rotated through the rotation property:

1. Rotation uses radians. Convert degrees to radians with degrees * Math.PI / 180
2. Define rotation center via center property

Without setting center, rotation occurs around top-left corner:

// Omitted parts...

// Initialize texture loader
const textureLoader = new THREE.TextureLoader()
// Load texture
const texture = textureLoader.load('./assets/images/chunge_flower.png')

// Rotate texture
texture.rotation = 45 * Math.PI / 180

// Create a circle
const circleGeometry = new THREE.CircleGeometry(0.5, 32)
const material = new THREE.MeshBasicMaterial({
  map: texture,
  side: THREE.DoubleSide
})
const circle = new THREE.Mesh(circleGeometry, material)
scene.add(circle)

To rotate around the center point, set:

// Set rotation center
texture.center.set(0.5, 0.5)

Repeating Pattrens

Control repetition using repeat, wrapS, and wrapT properties:

Default wrapping mode is THREE.ClampToEdgeWrapping. Other options are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.

Example with repeated pattern:

// Omitted parts...

// Initialize texture loader
const textureLoader = new THREE.TextureLoader()
// Load texture
const texture = textureLoader.load('./assets/images/chunge_flower.png')

// Repeat 3 times horizontally, 2 vertically
texture.repeat.set(3, 2)
texture.wrapS = THREE.RepeatWrapping // Horizontal repeat
texture.wrapT = THREE.MirroredRepeatWrapping // Vertical mirrored repeat

// Create a box
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({
  map: texture
})
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

Grayscale Textures

Use grayscale textures for masking areas. Requires two images:

1. Main texture
2. Alpha mask (black hides, white reveals, gray for transparency)

Apply via alphaMap and enable transparency:

// Omitted parts...

// Initialize texture loader
const textureLoader = new THREE.TextureLoader()
// Load main texture
const texture = textureLoader.load('./assets/images/chunge_flower.png')
// Load alpha mask
const alphaTexture = textureLoader.load('./assets/images/chunge_alpha.png')

// Create a box
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({
  map: texture,
  alphaMap: alphaTexture,
  transparent: true
})
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

With side set to THREE.DoubleSide, both faces display the masked texture.