three实现三维空间彩色碎片纸屑落下下雪动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维空间彩色碎片纸屑落下下雪动画效果代码
代码标签: three 三维 空间 彩色 碎片 纸屑 落下 下雪 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Asap&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { background: radial-gradient( circle farthest-corner, hsl(320deg, 100%, 15%), hsl(320deg, 100%, 2%) 100% ); overscroll-behavior-x: none; overscroll-behavior-y: none; } body { font-family: "Asap", sans-serif; position: relative; width: 100vw; min-height: 100vh; text-align: center; overflow-x: hidden; color: white; display: flex; align-items: center; justify-content: center; } h1 { font-size: max(35px, 7vw); text-shadow: 1px 1px black; mix-blend-mode: difference; z-index: 1; } canvas { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 0; } </style> </head> <body > <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.6.2.js"></script> <script type="importmap"> { "imports": { "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/159/three.module.js", "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/159/jsm/" } } </script> <script type="module"> "use strict"; import * as THREE from "three"; import { OrbitControls } from "three/addons/controls/OrbitControls.js"; console.clear(); (function () { const worldRadius = 5; const confettiSize = 0.07; const confettiNum = 3000; const rotateRange_x = Math.PI / 30; const rotateRange_y = Math.PI / 50; const speed_y = 0.01; const speed_x = 0.003; const speed_z = 0.005; let camera, scene, renderer, controls; let confettiMesh; const dummy = new THREE.Object3D(); const matrix = new THREE.Matrix4(); const color = new THREE.Color(); init(); function init() { // camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, worldRadius * 3); camera.position.z = worldRadius * Math.sqrt(2); //camera.position.set(-1, 1.5, 2); //camera.lookAt(0, 0.5, 0); scene = new THREE.Scene(); //scene.background = new THREE.Color(0x666666); ///////////////////////////////// // Confetti ///////////////////////////////// // choose random color function getRandomColor() { let saturation = 100; let lightness = 50; const colors = [ "hsl(0, " + saturation + "%, " + lightness + "%)", "hsl(30, " + saturation + "%, " + lightness + "%)", "hsl(60, " + saturation + "%, " + lightness + "%)", "hsl(90, " + saturation + "%, " + lightness + "%)", "hsl(120, " + saturation + "%, " + lightness + "%)", "hsl(150, " + saturation + "%, " + lightness + "%)", "hsl(180, " + saturation + "%, " + lightness + "%)", "hsl(210, " + saturation + "%, " + lightness + "%)", "hsl(240, " + saturation + "%, " + lightness + "%)", "hsl(270, " + saturation + "%, " + lightness + "%)", "hsl(300, " + saturation + "%, " + lightness + "%)", "hsl(330, " + saturation + "%, " + lightness + "%)&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0