three+gsap实现水晶体闪烁下雪动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：three+gsap实现水晶体闪烁下雪动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">



<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.12.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CopyShader.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/LuminosityHighPassShader.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/EffectComposer.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/RenderPass.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ShaderPass.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/UnrealBloomPass.146.js"></script>
	<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		html,
		body {
			width: 100%;
			height: 100%;
		}

		body {
			margin: 0;
			overflow: hidden;
			background: #000;
		}

		canvas {
			display: block;
			width: 100vw;
			height: 100vh;
		}

		.button-3d {
			position: fixed;
			bottom: 20px;
			left: 20px;
			padding: min(15px, 4vw) min(30px, 8vw);
			font-family: 'Press Start 2P', cursive;
			font-size: clamp(12px, 2vw, 16px);
			color: #fff;
			background: linear-gradient(45deg, #ff3366, #66ffff);
			border: none;
			border-radius: 5px;
			cursor: pointer;
			transform: perspective(1000px) rotateX(10deg);
			transition: all 0.3s ease;
			text-decoration: none;
			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
			-webkit-transform: perspective(1000px) rotateX(10deg);
			-moz-transform: perspective(1000px) rotateX(10deg);
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			z-index: 1000;
			user-select: none;
			-webkit-user-select: none;
			-webkit-tap-highlight-color: transparent;
		}

		.button-3d:hover,
		.button-3d:focus {
			transform: perspective(1000px) rotateX(0deg) scale(1.05);
			-webkit-transform: perspective(1000px) rotateX(0deg) scale(1.05);
			-moz-transform: perspective(1000px) rotateX(0deg) scale(1.05);
			outline: none;
		}

		.credits {
			position: fixed;
			bottom: 20px;
			right: 20px;
			font-family: 'Press Start 2P', cursive;
			color: #fff;
			font-size: clamp(10px, 1.5vw, 14px);
			text-shadow: 0 0 10px #66ffff;
			z-index: 1000;
			user-select: none;
			-webkit-user-select: none;
		}

		@media (max-width: 768px) {
			.button-3d {
				bottom: 10px;
				left: 10px;
			}

			.credits {
				bottom: 10px;
				right: 10px;
			}
		}
	</style>
</head>

<body>


	<div class="credits" aria-label="Credits">CODE by HL</div>

	<script>
		const scene = new THREE.Scene();
		const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
		const renderer = new THREE.WebGLRenderer({
			antialias: true,
			powerPreference: "high-performance"
		});
		renderer.setPixelRatio(window.devicePixelRatio);
		renderer.setSize(window.innerWidth, window.innerHeight);
		document.body.appendChild(renderer.domElement);
		const composer = new THREE.EffectComposer(renderer);
		const renderPass = new THREE.RenderPass(scene, camera);
		composer.addPass(renderPass);
		const bloomPass = new THREE.UnrealBloomPass(
			new THREE.Vector2(window.innerWidth, window.innerHeight),
			2.0,
			0.3,
			0.9
		);
		composer.addPass(bloomPass);
		const simplex = new SimplexNoise();
		const geometry = new THREE.PlaneGeometry(100, 100, 128, 128);
		const material = new THREE.MeshStandardMaterial({
			color: 0x333333,
			emissive: 0x1a1a1a,
			metalness: 0.9,
			roughness: 0.1,
			wireframe: false,
			flatShading: true
		});
		const vertices = geometry.attributes.position.array;
		for (let i = 0; i < vertices.length; i += 3) {
			const x = vertices[i] / 20;
			const y = vertices[i + 1] / 20;
			vertices[i + 2] =
				simplex.noise2D.........完整代码请登录后点击上方下载按钮下载查看