【threejs】纹理贴图Texture

常用加载器

常用的纹理贴图加载器有:

  • TextureLoader - 加载单张纹理
  • CubeTextureLoader - 加载立方体贴图 6 张纹理

常用贴图类型

  • map - 基础颜色贴图 (定义模型表面的基础颜色)
  • normalMap - 法线贴图 (通过改变表面法线方向，模拟凹凸细节，增加模型的真实感)
  • aoMap - 环境光遮蔽贴图, ARM 组合贴图 (模拟模型表面因环境光遮蔽而产生的阴影效果，增加细节和真实感)
  • roughnessMap - 粗糙度贴图, ARM 组合贴图 (定义模型表面的粗糙程度，影响光线的反射方式)
  • metalnessMap - 金属度贴图, ARM 组合贴图 (定义模型表面的金属感，影响光线的反射和折射)
  • displacementMap - 置换贴图 (通过改变顶点位置，模拟模型表面的凹凸效果)

代码示例

贴图素材: https://threejs.rocyuan.top

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<template>
  <div ref="threeContainer" class="three-container"></div>
</template>
<script setup>
  import { onMounted, ref } from "vue";
  import * as THREE from "three";
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

  const threeContainer = ref(null);

  function init3D() {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, threeContainer.value.clientWidth / threeContainer.value.clientHeight, 0.1, 1000);
    camera.position.set(0, 3, 3);
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(threeContainer.value.clientWidth, threeContainer.value.clientHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    threeContainer.value.appendChild(renderer.domElement);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;

    const ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.y = 200;
    directionalLight.position.x = 200;
    directionalLight.position.z = 100;
    directionalLight.castShadow = true;
    scene.add(directionalLight);

    const texture = new THREE.TextureLoader().load("/images/textures/rock_boulder_cracked_diff_1k.png");
    const textureNo = new THREE.TextureLoader().load("/images/textures/rock_boulder_cracked_nor_gl_1k.png");
    const textureARM = new THREE.TextureLoader().load("/images/textures/rock_boulder_cracked_arm_1k.png");
    const textureDis = new THREE.TextureLoader().load("/images/textures/rock_boulder_cracked_disp_1k.png");
    texture.colorSpace = THREE.SRGBColorSpace;
    textureNo.colorSpace = THREE.SRGBColorSpace;
    textureARM.colorSpace = THREE.SRGBColorSpace;
    textureDis.colorSpace = THREE.SRGBColorSpace;

    // 创建球体
    const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32);
    const sphereMaterial = new THREE.MeshStandardMaterial({
      // 设置纹理贴图
      map: texture,
      normalMap: textureNo,
      aoMap: textureARM,
      roughnessMap: textureARM,
      metalnessMap: textureARM,
      displacementMap: textureDis,
      displacementScale: 0.02, // 控制凹凸强度
    });
    const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphere.position.set(0, 1, 0);
    sphere.castShadow = true;
    sphere.receiveShadow = true;
    scene.add(sphere);

    // 创建平板
    const planeGeometry = new THREE.PlaneGeometry(5, 5);
    const planeMaterial = new THREE.MeshStandardMaterial({
      color: 0xffffff,
      side: THREE.DoubleSide,
    });
    const plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.rotation.x = Math.PI / 2;
    plane.receiveShadow = true;
    scene.add(plane);

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;

    function animate() {
      requestAnimationFrame(animate);
      controls.update();
      camera.lookAt(sphere.position);
      renderer.render(scene, camera);
    }
    animate();
  }

  onMounted(() => {
    init3D();
  });
</script>
<style scoped>
  .three-container {
    width: 100vw;
    height: calc(100vh - 20px);
  }
</style>

效果

效果1

效果2

贴图素材示例