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: black; overscroll-behavior-x: none; overscroll-behavior-y: none; } body { font-family: "Asap", sans-serif; position: relative; width: 100vw; height: 100vh; overflow: hidden; } 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 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> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Tween.16.7.0.js"></script> <script type="module"> /*! Lightning Animation Copyright (c) 2024 by Wakana Y.K. (https://codepen.io/wakana-k/pen/QWoGYQa) */ "use strict"; import * as THREE from "three"; import { OrbitControls as e } from "three/addons/controls/OrbitControls.js"; import { GUI as t } from "three/addons/libs/lil-gui.module.min.js"; import { EffectComposer as o } from "three/addons/postprocessing/EffectComposer.js"; import { RenderPass as n } from "three/addons/postprocessing/RenderPass.js"; import { OutlinePass as a } from "three/addons/postprocessing/OutlinePass.js"; import { LightningStrike as r } from "three/addons/geometries/LightningStrike.js"; import { LightningStorm as s } from "three/addons/objects/LightningStorm.js"; import * as BufferGeometryUtils from "three/addons/utils/BufferGeometryUtils.js"; import { ImprovedNoise as i } from "three/addons/math/ImprovedNoise.js"; !async function () { function t() { c.aspect = window.innerWidth / window.innerHeight, c.updateProjectionMatrix(), d.setSize(window.innerWidth, window.innerHeight), E.setSize(window.innerWidth, window.innerHeight); } function r() { requestAnimationFrame(r), TWEEN.update(), function () { h.update(), (b += l.userData.timeRate * C.getDelta()) < 0 && (b = 0); T.visible && T.update(b); E.render(); }(); } let l, d, c, h, E, m, u, w, p, T, g, R, H, y, f, M; THREE.ColorManagement.enabled = !1; let b = 0; const C = new THREE.Clock(), P = 50; let S = new THREE.TextureLoader().loadAsync( "https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/equirectangular.png"); [p] = await Promise.all([S]), p.mapping = THREE.EquirectangularReflectionMapping, p.dispose(), S = null, (l = new THREE.Scene()).background = new THREE.Color( "indigo"). multiplyScalar(5), l.environment = p, (d = new THREE.WebGLRenderer({ antialias: !1 })). setPixelRatio(Math.min(window.devicePixelRatio, 2)), d.setSize(window.innerWidth, window.innerHeight), d.shadowMap.enabled = !0, document.body.appendChild(d.domElement), E = new o(d), (c = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 0.1, 3 * P)). position.set(0, 3, 0.5 * P), l.add(new THREE.AmbientLight("white", 0.1)), (R = new THREE.DirectionalLight("white", 3)).position.set(0, 3, 8), l.add(R), (H = new THREE.SpotLight("white", 1)).power = 30, H.position.set(0, 4, -2), H.castShadow = !0, H.shadow.camera.fov = 10, l.add(H), (h = new e(c, d.domElement)).autoRotate = !0, h.autoRotateSpeed = 2, h.enableDamping = !0, h.dampingFactor = 0.05, h.enablePan = !1, h.minDistance = 3, h.maxDistance = P, h.maxPolarAngle = Math.PI / 2, h.target.set(0, 0, 0), h.update(), window.addEventListener("resize", t), function () { const e = function (e, t) { const o = e * t, n = new Uint8Array(o); let a = new i(), r = 100 * Math.random(), s = 1; for (let t = 0; t < 3; t++) { for (let t = 0; t < o; t++) { let o = t % e, i = ~~(t / e); n[t] += Math.abs(a.noise(o / s, i / s, r) * s); } s *= 4; } const l = Math.ceil(Math.min(e / 5, t / 5)); let d = new THREE.Vector3(e / 2, t / 2, 0), c = 0.99 * Math.floor(Math.min(e / 2, t / 2)); for (let t = 0; t < o; t++) { let o = t % e, a = ~~(t / e), r = new THREE.Vector3(o, a, 0); var h = Math.abs(r.distanceTo(d)); h >= c ? n[t] = 0 : h <= l ? n[t] = 10 : ( n[t] *= 10 * Math.sin((h - l) / (c - l) * Math.PI), n[t] += 10); } return n; }(51, 51); (m = new THREE.PlaneGeometry(5 * P, 5 * P, 50, 50)).rotateX(-Math.PI / 2); const t = m.attributes.position.array; let o, n = 0; for (let a = 0, r = 0, s = t.length; a < s; a++, r += 3) o = 0.25 * e[a], t[r + 1] = o, n < o && (n = o); m.translate(0, -2.5, 0), m.attributes.position.needsUpdate = !0, m.computeVertexNormals(), m.computeBoundingBox(), (w = new THREE.Mesh( m, new THREE.MeshLambertMaterial({ color: "sienna" }))). receiveShadow = !0, l.add(w); let a, r = []; u = new THREE.MeshLambertMaterial({}), r = [], (m = new THREE.CapsuleGeometry(0.5, 0.7, 4, 10)).translate(0, 0, 0), r.push(m), (m = new THREE.CapsuleGeometry(0.18, 0.5, 4, 10)).translate(0.2, -1, 0), r.push(m), (m = new THREE.CapsuleGeometry(0.18, 0.5, 4, 10)).translate( -0.2, -1, 0), r.push(m), (m = new THREE.SphereGeometry(0.5, 10, 10)).translate(0, 1.2, 0), r.push(m), (m = new THREE.CapsuleGeometry(0.15, 0.5, 4, 8)).translate(0.2, 1.8, 0), r.push(m), (m = new THREE.CapsuleGeometry(0.15, 0.5, 4, 8)).translate( -0.2, 1.8, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0