提示词

使用Three.js加载3D咖啡杯模型，并通过自定义着色器实现逼真的烟雾效果，结合Perlin噪声实现自然的烟雾运动。

效果拆解

效果 实现方式
3D模型加载 使用GLTFLoader加载咖啡杯模型
烟雾几何体 使用PlaneGeometry创建烟雾平面
噪声纹理 加载Perlin噪声纹理用于烟雾变形
顶点着色器 实现烟雾的旋转和风力效果
片元着色器 实现烟雾的透明度和颜色渐变
动画更新 在渲染循环中更新时间uniform

核心技术点

1. 场景初始化

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const initializeScene = ({ root, antialias = true } = {}) => {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    35,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.z = 110;

  const renderer = new THREE.WebGLRenderer({ antialias });
  renderer.setSize(window.innerWidth, window.innerHeight);
  
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  root.appendChild(renderer.domElement);

  const gui = new GUI({ container: root });
  const stats = new Stats();
  stats.showPanel(0);
  root.appendChild(stats.domElement);

  return { scene, renderer, camera, controls, gui, stats };
};

2. 模型加载

JAVASCRIPT
1
2
3
4
5
6
7
8
9
const gltfLoader = new GLTFLoader();
gltfLoader.load(
  FILE_HOST+'files/model/coffeeMug.glb',
  (gltf) => {
    gltf.scene.getObjectByName("baked").material.map.anisotropy = 8;
    controls.target.y += 3;
    scene.add(gltf.scene);
  }
);

3. 烟雾着色器材质

JAVASCRIPT
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
const textureLoader = new THREE.TextureLoader();
const perlinTexture = textureLoader.load(FILE_HOST+'images/perlin.png');
perlinTexture.wrapS = THREE.RepeatWrapping;
perlinTexture.wrapT = THREE.RepeatWrapping;

const smokeGeometry = new THREE.PlaneGeometry(1, 1, 16, 64);
smokeGeometry.translate(0, 0.5, 0);
smokeGeometry.scale(1.5, 6, 1.5);

const smokeMaterial = new THREE.ShaderMaterial({
  vertexShader: `#define M_PI 3.1415926535897932384626433832795

  varying vec2 vUv;
  
  uniform float uTime;
  uniform sampler2D uPerlinTexture;
  
  vec2 rotate2D(vec2 value, float angle) {
    float s = sin(angle);
    float c = cos(angle);
    mat2 m = mat2(c, s, -s, c);
    return m * value;
  }
  
  void main() {
    vUv = uv;
    
    vec3 newPosition = position;
    float angle = texture(
      uPerlinTexture,
      vec2(0.5, uv.y * 0.3 + uTime * 0.02)
    ).x * 7.;
    newPosition.xz = rotate2D(position.xz, angle);
    
    vec2 windOffset = vec2(
      texture(uPerlinTexture, vec2(0.2, uTime * 0.02)).x - 0.5,
      texture(uPerlinTexture, vec2(0.7, uTime * 0.02)).x - 0.5
    );
    
    newPosition.xz += windOffset * pow(uv.y, 2.) * 8.;
    
    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(newPosition, 1.0);
  }
  `,
  fragmentShader: `varying vec2 vUv;

  uniform float uTime;
  uniform sampler2D uPerlinTexture;
  
  void main() {
    vec2 uv = vec2(vUv.x * 0.5, vUv.y * 0.3 - uTime / 15.);
    
    float intensity = texture2D(uPerlinTexture, uv).x;
    intensity = smoothstep(0.4, 1.0, intensity);
    
    intensity *= smoothstep(0.0, 0.1, vUv.x);
    intensity *= smoothstep(1.0, 0.9, vUv.x);
    
    intensity *= smoothstep(0.0, 0.1, vUv.y);
    intensity *= smoothstep(1.0, 0.4, vUv.y);
    
    gl_FragColor = vec4(1.0, 0.8, 0.6, intensity);
    
    #include <tonemapping_fragment>
    #include <colorspace_fragment>
  }
  `,
  uniforms: {
    uTime: { value: 0 },
    uPerlinTexture: { value: perlinTexture },
  },
  transparent: true,
  depthWrite: false,
  side: THREE.DoubleSide,
});

const smoke = new THREE.Mesh(smokeGeometry, smokeMaterial);
smoke.position.y = 1.83;
scene.add(smoke);

4. 动画循环

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const clock = new THREE.Clock();

const tick = () => {
  requestAnimationFrame(tick);
  stats.begin();

  controls.update();
  smokeMaterial.uniforms.uTime.value = clock.getElapsedTime();

  stats.end();
  renderer.render(scene, camera);
};

tick();

调试技巧

  1. 烟雾高度：调整smokeGeometry的scale改变烟雾高度
  2. 运动速度：修改uTime的乘数调整烟雾运动速度
  3. 风力强度：调整windOffset的乘数改变风力效果
  4. 透明度范围：修改smoothstep参数调整烟雾的可见范围

扩展思路

  1. 多股烟雾：创建多个烟雾平面增加效果
  2. 颜色变化：根据时间改变烟雾颜色
  3. 交互效果：添加鼠标交互影响烟雾方向
  4. 音频响应：根据音频强度改变烟雾密度
  5. 光照效果：添加动态光照增强烟雾立体感
  6. 粒子系统：使用粒子系统创建更真实的烟雾