Three.js 赛博水面效果 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
使用 Three.js 实现【赛博水面效果】，具体要求：

【核心特效】
- Three.js Water 扩展实现真实水面
- 天空盒反射
- 法线贴图动画

【场景与光照】
- 天空盒背景
- 太阳方向光照

【交互与控制】
- OrbitControls 轨道控制器
- GUI 面板调节水面参数

【技术要求】
- Three.js 最新版本
- Water 扩展对象
- CubeTextureLoader 天空盒

🖼️ 效果预览

赛博水面效果

🎮 案例演示

立即体验

📖 效果拆解

层次 视觉效果 技术实现
基础 大面积水面 Water 对象 + PlaneGeometry
核心特效 水面动画 法线贴图 + 时间动画
反射 天空盒反射 CubeTexture 环境映射
模型 GLB模型加载 GLTFLoader

🔧 核心技术点

1. Water 扩展使用

使用 Three.js 官方的 Water 扩展创建真实水面。

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const water = new Water(waterGeometry, {
  textureWidth: 512,
  textureHeight: 512,
  waterNormals: new THREE.TextureLoader().load('waternormals.jpg', tex => {
    tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
  }),
  sunDirection: new THREE.Vector3(0.3, 0.9, 0.2).normalize(),
  sunColor: 0xffffff,
  waterColor: 0x1394f6,
  distortionScale: 3.7,
  fog: scene.fog !== undefined
});
water.rotation.x = -Math.PI / 2;
scene.add(water);

2. 天空盒设置

使用六张立方体贴图创建天空盒。

javascript
1
2
const skyUrls = [0,1,2,3,4,5].map(k => `skyBox0/${k+1}.png`);
scene.background = new THREE.CubeTextureLoader().load(skyUrls);

3. 模型环境映射

让模型反射天空盒环境。

javascript
1
2
3
4
5
6
7
8
9
new GLTFLoader().load('wajueji.glb', gltf => {
  const root = gltf.scene;
  root.traverse(child => {
    if(child.isMesh) {
      child.material.envMap = scene.background;
    }
  });
  scene.add(root);
});

💡 调试与优化

问题类型 表现形式 解决方案
水面颜色异常 颜色不符合预期 调整 waterColor 参数
水面动画卡顿 帧率下降 降低 textureWidth/Height 或减少水面面积
天空盒加载失败 背景黑色 检查立方体贴图路径
模型无反射 模型表面暗淡 确保材质设置了 envMap

🚀 扩展思路

变体效果 核心改动 难度
动态太阳 添加时间变量控制太阳位置 ⭐⭐
水面波纹 添加鼠标交互产生波纹 ⭐⭐⭐
水下效果 添加折射和散射 ⭐⭐⭐
浮体模拟 添加漂浮物体的物理模拟 ⭐⭐⭐

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。