云层效果

效果参考 首页

初始化函数 init()

创建容器

创建一个div元素作为3D场景的容器，设置其样式并添加到页面body中。

创建相机

创建一个THREE.Camera对象，设置其视场角、宽高比、近裁剪面和远裁剪面，并将相机位置设置在z轴上距离原点10的位置。

创建场景

创建一个THREE.Scene对象作为3D场景。

创建几何体和材质

• 创建一个THREE.Geometry对象作为云朵的几何体。
• 加载云朵纹理图片，并设置纹理的放大和缩小过滤方式为线性Mipmap线性过滤。
• 创建一个雾效果THREE.Fog，设置其颜色、近裁剪面和远裁剪面。
• 创建一个THREE.MeshShaderMaterial材质，设置其uniforms属性，包括纹理、雾颜色、雾近远裁剪面等，同时指定顶点着色器和片段着色器的代码，以及关闭深度测试。

创建云朵网格并合并几何体

• 创建一个THREE.Mesh对象作为单个云朵网格，其几何体为THREE.Plane平面几何体，大小为64x64。
• 使用循环创建8000个云朵网格，随机设置每个网格的位置、旋转角度和缩放比例，然后使用GeometryUtils.merge方法将这些网格的几何体合并到之前创建的几何体中。
• 将合并后的几何体和材质创建成一个新的THREE.Mesh对象，并将其添加到场景中。再将该网格复制一份，位置设置在z轴负方向8000的位置，也添加到场景中。

创建渲染器

创建一个THREE.WebGLRenderer对象作为渲染器，设置其抗锯齿属性为false，并设置渲染器的大小为窗口的宽高，然后将渲染器的DOM元素添加到容器中。

绑定事件监听

为文档绑定鼠标移动事件监听函数onDocumentMouseMove，用于获取鼠标在页面中的位置；为窗口绑定窗口大小改变事件监听函数onWindowResize，用于更新相机的宽高比和渲染器的大小。

鼠标移动事件处理函数 onDocumentMouseMove(event)

获取鼠标相对于窗口中心位置的偏移量，并分别乘以0.25和0.15作为mouseX和mouseY的值，用于后续控制相机的移动。

窗口大小改变事件处理函数 onWindowResize(event)

更新相机的宽高比，并调用updateProjectionMatrix方法更新相机的投影矩阵，同时设置渲染器的大小为新的窗口宽高，以保证渲染效果适应窗口大小的变化。

动画函数 animate()

使用requestAnimationFrame方法实现动画循环，不断调用render函数进行渲染。

渲染函数 render()

• 计算当前时间与开始时间的差值，乘以0.03后取模8000，得到一个周期性的位置值position。
• 根据鼠标位置和相机目标位置的差值，分别乘以0.01，更新相机在x轴和y轴上的位置，实现相机跟随鼠标移动的效果。
• 将相机的z轴位置设置为-position + 8000，使相机在z轴上移动，产生云朵移动的视觉效果。
• 将相机目标的位置设置为相机当前位置的x、y坐标，以及相机当前位置的z坐标减去1000。