canvas实现粒子上升动画效果代码
代码语言:html
所属分类:粒子
代码描述:canvas实现粒子上升动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; padding: 0; background-color: #1e222a; } #threeDScene { width: 100vw; height: 100vh; margin: 0; display: block; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); position: absolute; } .App { position: absolute; width: 85vmin; height: 85vmin; border-radius: 42.5vmin; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); overflow: hidden; background-color: black; border: solid 10px #2c313c; box-sizing: border-box; box-shadow: 0px 0px 30px rgba(10, 14, 20, 0.5); } .baseImg { opacity: 0; visibility: hidden; width: 0; height: 0; display: none; } </style> </head> <body> <div class="App"> <canvas id="threeDScene"></canvas> </div> <img src='//repo.bfw.wiki/bfwrepo/image/5e2b80eb53d22.png' class="baseImg" id="Img"/> <script type="module"> import { Scene, PerspectiveCamera, WebGLRenderer, Clock, PlaneGeometry, BufferAttribute, Points, ShaderMaterial, PointsMaterial, MeshBasicMaterial, Mesh, Vector3, TextureLoader, Uniform } from "https://cdn.skypack.dev/three@0.125.2"; import { BloomEffect, EffectComposer, EffectPass, RenderPass, Pass, ShaderPass, DepthOfFieldEffect } from "https://cdn.skypack.dev/postprocessing@6.20.3"; /* * A fast javascript implementation of simplex noise by Jonas Wagner * * Based on a speed-improved simplex noise algorithm for 2D, 3D and 4D in Java. * Which is based on example code by Stefan Gustavson (stegu@itn.liu.se). * With Optimisations by Peter Eastman (peastman@drizzle.stanford.edu). * Better rank ordering method by Stefan Gustavson in 2012. * * * Copyright (C) 2016 Jonas Wagner * * Permission is hereby granted, free of charge, to any person obtaining * a copy of this software and associated documentation files (the * "Software"), to deal in the Software without restriction, including * without limitation the rights to use, copy, modify, merge, publish, * distribute, sublicense, and/or sell copies of the Software, and to * permit persons to whom the Software is furnished to do so, subject to * the following conditions: * * The above copyright notice and this permission notice shall be * included in all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. * */ (function () { 'use strict'; var F2 = 0.5 * (Math.sqrt(3.0) - 1.0); var G2 = (3.0 - Math.sqrt(3.0)) / 6.0; var F3 = 1.0 / 3.0; var G3 = 1.0 / 6.0; var F4 = (Math.sqrt(5.0) - 1.0) / 4.0; var G4 = (5.0 - Math.sqrt(5.0)) / 20.0; function SimplexNoise(random) { if (!random) random = Math.random; this.p = buildPermutationTable(random); this.perm = new Uint8Array(512); this.permMod12 = new Uint8Array(512); for (var i = 0; i < 512; i++) { this.perm[i] = this.p[i & 255]; this.permMod12[i] = this.perm[i] % 12; } } SimplexNoise.prototype = { grad3: new Float32Array([1, 1, 0, -1, 1, 0, 1, -1, 0, -1, -1, 0, 1, 0, 1, -1, 0, 1, 1, 0, -1, -1, 0, -1, 0, 1, 1, 0, -1, 1, 0, 1, -1, 0, -1, -1]), grad4: new Float32Array([0, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 1, 0, 1, 1, 1, 0, 1, -1, 1, 0, -1, 1, 1, 0, -1, -1, -1, 0, 1, 1, -1, 0, 1, -1, -1, 0, -1, 1, -1, 0, -1, -1, 1, 1, 0, 1, 1, 1, 0, -1, 1, -1, 0, 1, 1, -1, 0, -1, -1, 1, 0, 1, -1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, -1, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 0]), noise2D: function (xin, yin) { var permMod12 = this.permMod12; var perm = this.perm; var grad3 = this.grad3; var n0 = 0; // Noise contributions from the three corners var n1 = 0; var n2 = 0; // Skew the input space to determine which simplex cell we're in var s = (xin + yin) * F2; // Hairy factor for 2D var i = Math.floor(xin + s); var j = Math.floor(yin + s); var t = (i + j) * G2; var X0 = i - t; // Unskew the cell origin back to (x,y) space var Y0 = j - t; var x0 = xin - X0; // The x,y distances from the cell origin var y0 = yin - Y0; // For the 2D case, the simplex shape is an equilateral triangle. // Determine which simpl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0