vue3 three.js 实现动态云层登录页面

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、效果图

二、使用的库

three.js v141
vue3

三、实现

思路

1. 在Z轴上放一堆的64*64的平面图形，图形的X Y是随机的。
2. 把所有的图形合成一个大的图形
3. 把大的图形和贴片材质（云）生成网格，网格放进场景中
4. 动效就是将相机从远处沿着Z轴缓慢移动，就会有了穿越云层的效果

开始

定义实现该效果的方法，参数是一个element实例

import * as THREE from 'three'
import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
import cloud from '@/assets/cloud.png' // 云贴图
function cloudLoginBg(HTMLElement: HTMLElement | null) {
 ...
}

cloudLoginBg方法内容

   let camera: THREE.Camera, // 相机
        scene: THREE.Scene, // 场景
        renderer: THREE.WebGLRenderer, // 渲染器
        mesh; //网格
    const StartTime = Date.now();
    const BackGroundColor = '#1e4877'; // 背景色
    const CloudCount = 8000; // 云数量
    const perCloudZ = 2; // 每个云所占z轴的长度
    const cameraPositionZ = CloudCount * perCloudZ;// 所有的云一共的Z轴长度
    // X轴和Y轴平移的随机参数
    const RandomPositionX = 500;
    const RandomPositionY = 120;
    init();
    animate();

init()实现

相机

camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.x = Math.floor(RandomPositionX / 2);
camera.position.z = cameraPositionZ;
camera.position.y = Math.floor(RandomPositionY / 10);

场景

scene = new THREE.Scene();
scene.background = new THREE.Color(BackGroundColor);

材质
用ShaderMaterial的材质必须使用WebGLRenderer来渲染

const texture = new THREE.TextureLoader().load(cloud); // 加载文件
let fog = new THREE.Fog(BackGroundColor, 1, 1000);
// GLSL(OpenGL着色语言OpenGL Shading Language)
const vs = `varying vec2 vUv;void main(){vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}`;
const fs = `
        uniform sampler2D map;
        uniform vec3 fogColor;
        uniform float fogNear;
        uniform float fogFar;
        varying vec2 vUv;
        void main()
        {
            float depth = gl_FragCoord.z / gl_FragCoord.w;
            float fogFactor = smoothstep( fogNear, fogFar, depth );
            gl_FragColor = texture2D( map, vUv );
            gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 );
            gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
        }
    `;
    //着色器材质 自定义材质
    const material = new THREE.ShaderMaterial({
            uniforms: {
                "map": {
                    value: texture
                },
                "fogColor": {
                    value: fog.color
                },
                "fogNear": {
                    value: fog.near
                },
                "fogFar": {
                    value: fog.far
                },
            },
            vertexShader: vs,
            fragmentShader: fs,
            transparent: true
        });

平面图形

const geometry = new THREE.PlaneGeometry(64, 64); // 64*64平面图形
const geometries = []; // 一堆图形
for (let i = 0; i < CloudCount; i++) {
    const plane = geometry.clone() // 克隆
    plane.translate(Math.random() * RandomPositionX, -Math.random() * RandomPositionY, i * perCloudZ)
    geometries.push(plane);
}
// 把一组图形合并一个
const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(geometries);
// 生成网格
mesh = new THREE.Mesh(mergedGeometry, material);
// 加入场景中
scene.add(mesh);

渲染

renderer = new THREE.WebGLRenderer({
   antialias: false
});
renderer.setSize(window.innerWidth, window.innerHeight);
HTMLElement!.appendChild(renderer.domElement);

animate()实现

requestAnimationFrame(animate);
camera.position.z = cameraPositionZ - (((Date.now() - StartTime) * 0.1) % cameraPositionZ);
renderer.render(scene, camera)

总结

动态云层的效果以上就是全部代码了哟，有什么不对的地方欢迎大家评论。
目前有一个bug：当相机穿越完云层后，会头开始，这之间衔接效果不好，有时间再处理。

谢谢大家阅读星海君的前端文章~~~