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：当相机穿越完云层后，会头开始，这之间衔接效果不好，有时间再处理。

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