three+gsap实现三维粒子烟花绽放动画效果代码
代码语言:html
所属分类:三维
代码描述:three+gsap实现三维粒子烟花绽放动画效果代码
代码标签: three gsap 三维 粒子 烟花 绽放 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #EF9595; } </style> </head> <body translate="no"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.6.3.js"></script> <script type="importmap"> { "imports": { "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/160/three.module.js", "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/160/jsm/" } } </script> <canvas id="canvas"></canvas> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.12.2.js"></script> <script type="module"> import * as THREE from "three"; import { OrbitControls } from "three/addons/controls/OrbitControls.js"; const canvas = document.querySelector("#canvas"); let D = { w: window.innerWidth, h: window.innerHeight }; let renderer, camera, controls, scene, group, envMap; const MAX_ROCKETS = 2; const ROCKET_GAP = 0.5; // seconds const COLORS = ['#E76161']; const P_COUNTS = [85, 100, 102, 113, 120, 129, 140]; let rockets = [],fireworks = []; /** Renderer */ renderer = new THREE.WebGLRenderer({ canvas, antialias: true }); renderer.setClearColor('#EF9595'); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; /** Camera */ camera = new THREE.PerspectiveCamera(20, D.w / D.h, 0.1, 100); camera.position.set(0, 9, 41); /** Orbit Controls */ controls = new OrbitControls(camera, renderer.domElement); controls.target.set(0, 5.5, 0); controls.enableDamping = true; controls.enablePan = false; controls.dampingFactor = 0.02; controls.maxPolarAngle = 85 * Math.PI / 180; controls.minPolarAngle = 55 * Math.PI / 180; controls.minDistance = 25; controls.maxDistance = 41; // addEventListener('mousemove', () => { // console.log(camera.position, controls.target); // }) /** Scene */ scene = new THREE.Scene(); /** Light */ const light1 = new THREE.DirectionalLight('#ffffff', 1); light1.position.set(0, 10, 0); light1.castShadow = true; light1.shadow.camera.left = -15; light1.shadow.camera.right = 15; light1.shadow.camera.top = 15; light1.shadow.camera.bottom = -15; scene.add(light1); /** Fog */ scene.fog = new THREE.Fog('#EF9595', 45, 70); /** Ground */ const ground = new THREE.Mesh( new THREE.PlaneGeometry(1000, 1000), new THREE.MeshStandardMaterial({ color: '#FFC5C5', emissive: '#FFC5C5', emissiveIntensity: 0.8 })); ground.rotation.x = -Math.PI / 2; ground.receiveShadow = true; scene.add(ground); /** Group */ group = new THREE.Group(); group.position.y = 0.5; scene.add(group); /** Load envMap */ new THREE.TextureLoader().load('//repo.bfw.wiki/bfwrepo/icon/63ed7c0922a66.gif?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90', _envMap => { _envMap.mapping = THREE.EquirectangularReflectionMapping; _envMap.encoding = THREE.sRGBEncoding; envMap = _envMap; }); function Rocket({ color, position, particleCount }) { this.color = color; this.targetPos = new THREE.Vector3(position.x, position.y, position.z); let currentPos = new THREE.Vector3(0, 0, 0); this.particleCount = particleCount; const self = this; init(); function init() { const geometry = new THREE.SphereGeometry(0.1, 32, 32); const material = new THREE.MeshStandardMaterial({ color: self.color, metalness: 1, roughness: 0.1, envMap, envMapIntensity: 1 }); self.mesh = new THREE.Mesh(geometry, material); self.mesh.frustumCulled = false; self.mesh.castShadow = true; scene.add(self.mesh); } this.isCompleted = function () { return currentPos.distanceTo(this.targetPos) < 0.25; }; this.update = function (delta) { currentPos.lerp(this.targetPos, delta * 0.0027); self.mesh.position.copy(currentPos); }; this.remove = function () { scene.remove(this.mesh); }; } function Firework({ color, targetPos, particleCount }) { this.color = color; this.targetPos = targetPos; this.particleCount = particleCount; const self = this; let startTime; init(); function init() { const particleGeo = new THREE.SphereGeometry(0.2, 32); const geometry = new THREE.InstancedBufferGeometry().copy(particleGeo); geometry.index = particleGeo.index; geometr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0