淘宝网站基础建设 托管网页设计从入门到精通

定义

贴图（Texture）是 Three.js 中用于为物体表面添加纹理的一种技术。它可以将图像、视频或其他类型的媒体映射到物体的表面，使其看起来更加真实和生动。

基本原理

贴图的基本原理是将图像或视频映射到物体的表面，使其看起来更加真实和生动。在 Three.js 中，贴图是通过 Texture 对象来实现的。Texture 对象包含了图像或视频的数据，以及一些用于控制贴图行为的属性和方法。

类型

在 Three.js 中，常用的贴图类型包括：

• 纹理贴图（Texture）： 纹理贴图是最常见的贴图类型，它可以将图像映射到物体的表面。纹理贴图可以通过 TextureLoader 加载图像文件。
• 视频纹理（VideoTexture）： 视频纹理是一种特殊的贴图类型，它可以将视频映射到物体的表面。视频纹理可以通过 VideoTextureLoader 加载视频文件。
• 立方纹理（CubeTexture）： 立方纹理是一种特殊的贴图类型，它可以将一个立方体的六个面分别映射到物体的表面。立方纹理可以通过 CubeTextureLoader 加载图像文件。
• …

Texture

属性

• image： 纹理图像的引用。可以通过设置该属性来更新纹理图像。
• needsUpdate： 一个布尔值，表示纹理是否需要更新。当纹理图像发生变化时，需要将该属性设置为 true。

//可以链式调用
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("path/to/texture.jpg");
const material = new THREE.MeshBasicMaterial({ map: texture });

TextureLoader

TextureLoader 构造函数通过 load 加载图片是一个异步操作，所以 load 还有其它参数

• url： 纹理图像的路径。
• onLoad： 加载完成后的回调函数。该函数会在加载完成后被调用，参数为加载完成的纹理对象。
• onProgress： 加载进度的回调函数。该函数会在加载过程中被调用，参数为加载进度的对象。（暂不支持）
• onError： 加载失败的回调函数。该函数会在加载失败后被调用，参数为加载失败的错误对象。

这个只是最基本的贴图效果，如果想做比较细节的贴图，在材质里面除了 map 这个属性还有：

• aoMap： 环境遮挡贴图，用于模拟环境遮挡效果。
• envMap： 环境贴图，用于模拟环境反射效果。
• lightMap： 光照贴图，用于模拟光照效果。
• specularMap： 高光贴图，用于模拟高光效果。
• alphaMap： 透明度贴图，用于模拟物体表面的透明度效果。
• displacementMap： 纹理位移贴图，用于模拟物体表面的位移效果。
• roughnessMap： 粗糙度贴图，用于模拟物体表面的粗糙度效果。
• normalMap： 法线贴图，用于模拟物体表面的法线效果。
• metalnessMap： 金属度贴图，用于模拟物体表面的金属度效果。
• emissiveMap： 自发光贴图，用于模拟物体表面的自发光效果。
• …

示例

如果想实现更加逼真的效果，可以使用多个贴图来模拟物体表面的不同特性。例如，可以使用环境贴图来模拟环境反射效果，使用高光贴图来模拟高光效果，使用法线贴图来模拟物体表面的法线效果等等。

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 创建场景
const scene = new THREE.Scene();// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 20, 0);
camera.lookAt(0, 0, 0);// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);//添加灯光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
const directionLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionLight.position.set(3, 3, 3);
scene.add(ambientLight, directionLight);//创建贴图
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("./texture/basecolor.png");//创建一个平面
const geometry = new THREE.PlaneGeometry(20, 20);
const material = new THREE.MeshStandardMaterial({map: texture,
});
const plane = new THREE.Mesh(geometry, material);
plane.rotation.x = -Math.PI / 2;
scene.add(plane);//创建控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 启用阻尼效果
controls.enableDamping = true;function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);
}animate();//监听窗口大小变化
window.addEventListener("resize", () => {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);
});

这只是通过贴图实现的效果，可以看出如果只是通过贴图，并不能实现非常逼真的效果，所以接下来我们通过多种贴图来实现更加逼真的效果。

会使用到环境光贴图（aoMap）、法线贴图（normalMap）、金属度贴图（metalnessMap）、粗糙度贴图（roughnessMap）、自发光贴图（emissiveMap）、纹理位移贴图（displacementMap）。

// 省略...//创建贴图
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("./texture/basecolor.png"); //基础颜色贴图
const aoTexture = textureLoader.load("./texture/ao.png"); //环境光贴图
const normalTexture = textureLoader.load("./texture/normal.png"); //法线贴图
const roughnessTexture = textureLoader.load("./texture/roughness.png"); //粗糙度贴图
const heightTexture = textureLoader.load("./texture/height.png"); //纹理位移贴图
const emissiveTexture = textureLoader.load("./texture/emissive.png"); //自发光贴图
const metalnessTexture = textureLoader.load("./texture/metallic.png"); //金属度贴图//创建一个平面
const geometry = new THREE.PlaneGeometry(20, 20);
const material = new THREE.MeshStandardMaterial({map: texture,aoMap: aoTexture,normalMap: normalTexture,roughnessMap: roughnessTexture,displacementMap: heightTexture,emissiveMap: emissiveTexture,metalnessMap: metalnessTexture,
});
const plane = new THREE.Mesh(geometry, material);
plane.rotation.x = -Math.PI / 2;
scene.add(plane);//省略...

效果预览

书洞笔记