[Three.js] Texture in Three.js - image application and attribute adjustment

 

Written in front:

Three.js is a powerful JavaScript library for creating interactive web-based 3D graphics and animations. In Three.js, texture is an important function, which allows us to apply images to geometric objects, and achieve richer visual effects by adjusting texture properties.

This article will introduce the texture function in Three.js, and demonstrate how to apply a picture as a texture to a geometric object, and adjust the properties of the texture such as repetition, offset, and rotation.

1. Texture function in Three.js

Three.js provides rich texturing capabilities that allow us to apply images to geometry for more realistic and detailed rendering.

Textures can be used to simulate the appearance and material of geometry, such as wood grain, stone grain, metal texture, etc.

Through the texture function of Three.js, we can create more vivid and realistic 3D scenes.

The following is a detailed introduction to the texture function in Three.js:

1. Texture Types:

   • Basic Texture: The simplest type of texture, you can apply an image or canvas as a texture to geometry.
   • Data Texture: A texture created using an array of pixel data that can directly manipulate pixel-level data.
   • Video Texture: <video>A texture created by capturing frames from a video element ( ), enabling dynamic video texture effects.
   • Cube Texture: A cube texture composed of six faces, often used for environment mapping and skybox effects.

2. Texture Loading:
   Three.js provides multiple ways to load textures:

   • Use TextureLoaderthe loader to load an image texture.
   • Use CubeTextureLoaderthe loader to load the cubemap.
   • DataTextureCreate data textures manually using classes.
   • Use VideoTexturea class to create a video texture from a video element.

3. Texture Properties:

   • image: The texture's image or canvas. Can be an image element ( <img>), canvas element ( <canvas>), or video element ( <video>).
   • minFilter, magFilter: Set the texture's minification and magnification filters to control how the texture is sampled at different sizes.
   • wrapS, wrapT: Set the wrapping mode of the texture on the S axis (horizontal direction) and T axis (vertical direction), including options such as repeat, mirrored repeat, and clamp to edge.
   • offset: Set the offset of the texture, which is used to translate the position of the texture.
   • repeat: Set the number of repetitions of the texture, which is used to control the number of repetitions of the texture on the surface of the geometry.
   • anisotropy: Sets the anisotropic filtering of the texture, improving the texture sampling quality in the diagonal direction.
   • flipY: Set whether to flip the texture vertically.

4. Texture Mapping:

   • Diffuse Mapping: used to simulate the color and texture of the surface of the object.
   • Normal Mapping: By modifying the normal vector to simulate the concave and convex details of the surface of the object, the lighting effect is enhanced.
   • Light Mapping: Use pre-calculated lighting information to apply lighting effects directly to textures for more realistic lighting effects.
   • Color Mapping: By adjusting the color and transparency properties of the texture to achieve color changes and transparency effects on the surface of the object.

5. Texture Blending:

   • TextureThe property used alphaMapcan set a single-channel texture as a transparency map to achieve the transparency effect of the texture.
   • MaterialThe property used alphaTestcan perform transparency testing based on the threshold of the transparency map, controlling whether to render transparent parts.

These are the main aspects of texture functionality in Three.js. By judicious use of textures, you can give geometry in Three.js a more realistic and varied look.

For more detailed documentation and examples, please refer to the official Three.js documentation: three.js docs

2. Photo Textures

2.1 Apply pictures as textures to geometry objects

In Three.js, the first step in using a texture is to load an image. We can use TextureLoadera class to load an image file and specify a callback function when the loading is complete.

Once loaded, we can create a material object and apply the loaded texture to the material.

We can then apply this material to the geometry object so that it has the loaded image texture.

To apply an image as a texture to a geometry object, you can use the Three.js provided TextureLoaderto load an image texture and apply it to the appropriate material.

2.2 Examples

Here is a simple sample code that demonstrates how to apply an image as a texture to a cube:

// 创建场景
var scene = new THREE.Scene();

// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建几何体
var geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建材质
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('path/to/your/image.jpg'); // 替换为实际图片路径
var material = new THREE.MeshBasicMaterial({ map: texture });

// 创建网格对象
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

In the above code,

First create a scene, camera and renderer.

Then, use TextureLoaderLoad to apply the image texture. Create a base material object by mappassing the loaded texture as an attribute to . MeshBasicMaterialFinally, create a mesh object with geometry and materials and add it to the scene.

Replace in the code 'path/to/your/image.jpg'with the actual image path to load the image texture you want to apply.

3. Texture attribute adjustment

In addition to applying images as textures to geometry, Three.js also provides some properties to adjust the texture's appearance. Among them, commonly used attributes include

1. repeat
2. offset
3. rotation
4. Flip
5. Zoom (scale)
6. Environment Mapping (envMap)
7. Transparency (opacity)
8. blending mode
9. Reflectivity
10. anisotropy

3.1 Repeat

By setting the texture's repeat property, we can make the texture repeat on the geometry. For example, a setting texture.repeat.set(2, 2)will cause the texture to repeat twice each horizontally and vertically. This is very useful when creating tiling effects.

3.2 Offset

By setting the texture's offset property, we can translate the position of the texture on the geometry. For example, a setting texture.offset.set(0.5, 0.5)will cause the texture to be translated horizontally and vertically by half the distance to the right and down. This can be used to create dynamic effects or localized texture applications.

3.3 Rotation

By setting the texture's rotation property, we can make the texture rotate on the geometry. For example, a setting texture.rotation = Math.PI / 4will rotate the texture 45 degrees in a counterclockwise direction. This is very useful when creating interesting visual effects.

3.4 Flip

By setting the flip property of the texture, the texture can be flipped horizontally or vertically. For example, texture.flipY = truewill flip the texture vertically.

3.5 scaling

By setting the scaling property of the texture, you can control the scaling of the texture on the geometry. For example, texture.repeat.set(2, 1)would make the texture repeat twice horizontally and not vertically, for a horizontally stretched effect.

3.6 Environment Mapping (envMap)

By setting the environment mapping property of the texture, it is possible to simulate the effect of ambient lighting around the geometry. Typically used to create reflection or refraction effects. A CubeTexture can be used as an environment map texture.

3.7 Transparency (opacity)

You can control the opacity of a texture by setting its transparency property. This is useful for creating translucent effects, glass materials or transparent textures.

3.8 Blending mode (blending)

You can control how the texture blends with the background by setting the blend mode property of the texture. For example, additive blending can be THREE.AdditiveBlendingachieved with , or THREE.MultiplyBlendingmultiplicative blending can be achieved with .

3.9 Reflectivity

By setting the reflectivity property of the texture, you can adjust how much the texture reflects light. A higher reflectivity will cause the texture to be more specular, a lower reflectivity will make the texture appear duller.

3.10 Anisotropy

By setting the anisotropy property of the texture, you can adjust how the texture is sampled in various directions, so that the texture maintains clarity at different angles. This is useful when working with textures that have significant directionality.

4 sample demo

To better understand the application of textures and property adjustments, we will demonstrate a simple example below.

We load an earth texture and apply it to a sphere.

We then watched how the texture changed by adjusting the texture's repeat, offset, and rotation properties.

// 创建场景、摄像机和渲染器等代码省略

// 创建球体几何体
const geometry = new THREE.SphereGeometry(5, 32, 32);

// 加载地球贴图
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('earth.jpg', () => {
  // 创建材质对象并应用纹理
  const material = new THREE.MeshBasicMaterial({ map: texture });

  // 创建球体对象并应用材质
  const sphere = new THREE.Mesh(geometry, material);
  scene.add(sphere);
// 渲染场景等代码省略

// 调整纹理属性
texture.repeat.set(2, 2); // 重复纹理两次
texture.offset.set(0.5, 0.5); // 平移纹理的位置
texture.rotation = Math.PI / 4; // 旋转纹理

// 更新场景渲染
function animate() {
  // 更新纹理属性
  texture.rotation += 0.01;

  // 渲染场景
  renderer.render(scene, camera);

  // 循环调用动画函数
  requestAnimationFrame(animate);
}

// 开始执行动画
animate();

Through the above example, we can see that the earth map is applied to the sphere, and by adjusting the repeat, offset and rotation properties of the texture, different visual effects are achieved.

5 Conclusion:

The texture function in Three.js provides a powerful tool for us to create more realistic and vivid 3D scenes. By applying images as textures to geometry and adjusting texture properties, we can achieve rich and diverse visual effects and bring users a better interactive experience.

For those developers and designers who want to create realistic graphics and animations, the texture function in Three.js is undoubtedly an indispensable and important component.