Threejs教程三【揭秘3D贴图魔法】

定义

贴图（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);

//省略...