Introduction 00:00

Good textures can make a huge difference in your projects.

While textures are perfectly supported by native Three.js materials, TSL brings a few more tricks, some of which we’ll discover in this lesson.

Setup 00:18

The starter is close to the previous lessons, but with small changes to accommodate the upcoming features:

• OrbitControls to rotate around
• A floor already using the MeshStandardNodeMaterial with the fade out and a UV checker texture generated on uvchecker.atlux.one
• A torus already using the MeshStandardNodeMaterial
• Running the WebGPURenderer
• Some lighting with shadows
• An instance of the Inspector
• An instance of the TransformControls to play with the torus

Texture sampling 01:02

In the Floor section, comment the map property on the MeshStandardNodeMaterial:

const material = new THREE.MeshStandardNodeMaterial({
    // map: uvChecker,
    transparent: true
})

We’ll sample the texture using TSL, and we can do that with the texture() node.

Send the uvChecker (which is our floor texture) to the texture() node, and assign the result to colorNode:

material.colorNode = texture(uvChecker)

At the same time, many texture related features are automatically supported:

• colorSpace
• wrapS
• wrapT
• repeat
• rotation
• center
• magFilter
• minFilter

Let’s see that in action by changing some of the uvChecker properties as follows:

uvChecker.wrapS = THREE.MirroredRepeatWrapping
uvChecker.wrapT = THREE.MirroredRepeatWrapping
uvChecker.repeat.set(3, 3)
uvChecker.rotation = 1

By default, texture() will automatically use the uv() node, but we can also provide it ourselves as the second argument:

material.colorNode = texture(uvChecker, uv())

Some of the texture settings are ignored, like the repeat and rotation. Fortunately, we can do it ourselves.