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

发布于:2025-02-25 ⋅ 阅读:(14) ⋅ 点赞:(0)

定义

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

//省略...

效果预览

书洞笔记