three.js shader 打造动态天空云层效果

最新推荐文章于 2026-09-11 21:02:34 发布

原创

最新推荐文章于 2026-09-11 21:02:34 发布 · 651 阅读

1. 从零开始：理解Shader与天空云层的基本原理

如果你玩过一些3D游戏，或者用过像Blender这样的建模软件，一定对那种逼真的天空和飘动的云朵印象深刻。那种效果，如果只用传统的3D建模方法，比如用一张静态的云朵图片贴在一个大球上，会显得非常假，云不会动，也没有体积感。今天，我就来跟你聊聊怎么用three.js的shader技术，亲手“造”出一片会呼吸、会流动的动态天空云层。这听起来很高深，但别怕，我会用最直白的方式，带你一步步拆解明白。

首先，我们得搞清楚shader到底是什么。你可以把它想象成3D世界的“化妆师”或者“滤镜大师”。在three.js里，一个物体长什么样（颜色、质感、光泽），传统上是由材质（Material）决定的，比如MeshBasicMaterial、MeshStandardMaterial。但这些材质的内置效果是固定的。而shader，则是一段运行在你电脑显卡（GPU）上的小程序，它直接告诉GPU：“这个像素点，我就要它呈现出这样的颜色和效果”。这给了我们近乎无限的控制权。我们这次要做的云，本质上不是“模型”，而是用shader在天空球体的每一个像素上“计算”和“绘制”出来的。这样做的好处太大了：云层可以无限复杂、动态变化、而且性能消耗相对可控。

那么，用shader生成云的核心思想是什么呢？是噪声。真实的云为什么形状不规则、边缘蓬松？因为它本质上是一种符合某种自然随机规律的形态。在图形学里，我们使用一种叫“Perlin噪声”或者“Simplex噪声”的函数来模拟这种随机但又连续的自然纹理。想象一下电视的雪花屏，那是完全随机的噪点。而Perlin噪声则像是把那些噪点做了平滑和连续处理，形成像大理石纹理、云雾、山脉一样有连续过渡的图案。我们的云层shader，就是通过多层、不同频率的噪声叠加，模拟出云朵那种蓬松、有体积感的形态。代码里那个noise函数，干的就是这个事儿。

2. 搭建你的Three.js基础开发环境

工欲善其事，必先利其器。在开始写炫酷的shader之前，我们得先把基础的three.js项目架子搭起来。这里我推荐一种最直接、最不容易出错的方式：使用现代的构建工具，比如Vite。它配置简单，热更新快，非常适合学习和快速原型开发。

首先，打开你的终端，创建一个新的项目文件夹并初始化：

npm create vite@latest my-cloud-project -- --template vanilla
cd my-cloud-project
npm install

接着，安装three.js的核心库以及我们可能会用到的轨道控制器：

npm install three

安装完成后，你会得到一个标准的项目结构。我们主要关注main.js和index.html。在index.html中，确保有一个<canvas>元素或者一个用于挂载渲染器的容器<div>。我这里习惯直接使用document.body。

现在，我们来创建最基础的three.js场景。在main.js中，写入以下代码：

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// 1. 初始化场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(0, 0, 5);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

// 2. 添加轨道控制器，方便用鼠标拖拽查看
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 添加阻尼感，转动更平滑

// 3. 添加基础光照（虽然云主要靠shader自发光，但场景里其他物体可能需要）
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

// 4. 创建一个简单的动画循环
function animate() {
    requestAnimationFrame(animate);
    controls.update(); // 只有启用了阻尼才需要
    renderer.render(scene, camera);
}
animate();

// 5. 处理窗口大小变化
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

运行npm run dev，你应该能在浏览器里看到一个灰色的3D视图，可以用鼠标左键旋转、右键平移、滚轮缩放。这个“画布”我们就准备好了。接下来，我们不会去创建传统的模型，而是要制作一个巨大的球体作为“天空穹顶”，并把我们的云层shader应用在这个球体的内

标签