Three.js 咖啡杯烟雾效果 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt 复制代码

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

🖼️ 效果预览

🎮 案例演示

立即体验

效果拆解

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

核心技术点

1. 场景初始化

javascript 复制代码

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 复制代码

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 复制代码

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 复制代码

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

调试技巧

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

扩展思路

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