three实现三维网格能量源动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维网格能量源动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { overflow: hidden; background: #050508; color: #fff; font-family: 'Inter', sans-serif; } #scene-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } :root { --background-color: rgba(22, 22, 30, 0.5); --text-color: rgba(255, 255, 255, 0.95); --title-background-color: rgba(40, 40, 60, 0.6); --title-text-color: rgba(255, 255, 255, 0.95); --widget-color: rgba(60, 60, 80, 0.5); --hover-color: rgba(80, 80, 120, 0.6); --focus-color: rgba(100, 100, 150, 0.7); --number-color: #ff55aa; --string-color: #55aaff; } .energy-button { border-radius: 6px !important; background: linear-gradient(to right, rgba(255, 65, 108, 0.9), rgba(255, 75, 43, 0.9)) !important; color: white !important; font-weight: bold !important; font-size: 14px !important; box-shadow: 0 4px 15px rgba(255, 85, 170, 0.4) !important; transition: all 0.3s !important; width: 100% !important; height: 40px !important; margin-top: 15px !important; margin-bottom: 8px !important; cursor: pointer !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; position: relative !important; overflow: hidden !important; backdrop-filter: blur(4px) !important; } .energy-button:before { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50%); z-index: 1; transform: translateX(-100%); transition: transform 0.6s; } .energy-button:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(255, 75, 43, 0.6) !important; } .energy-button:hover:before { transform: translateX(100%); } .energy-button:active { transform: translateY(1px) !important; } @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); </style> </head> <body translate="no"> <div id="scene-container"></div> <script type="module"> import * as THREE from "https://esm.sh/three"; import { OrbitControls } from "https://esm.sh/three/examples/jsm/controls/OrbitControls.js"; import { EffectComposer } from "https://esm.sh/three/examples/jsm/postprocessing/EffectComposer.js"; import { RenderPass } from "https://esm.sh/three/examples/jsm/postprocessing/RenderPass.js"; import { UnrealBloomPass } from "https://esm.sh/three/examples/jsm/postprocessing/UnrealBloomPass.js"; import GUI from "https://esm.sh/lil-gui"; class SuperformulaWireframe { constructor() { this.presets = [ { m1: 5, n11: 10, n12: 2, n13: 7, m2: 5, n21: 10, n22: 10, n23: 10 }, { m1: 2, n11: 1, n12: 4, n13: 8, m2: 8, n21: 1, n22: 1, n23: 4 }, { m1: 6, n11: 1, n12: 1, n13: 1, m2: 3, n21: 1, n22: 5, n23: 1 }, { m1: 12, n11: 15, n12: 8, n13: 8, m2: 12, n21: 8, n22: 4, n23: 15 }]; this.presetOptions = { "Star Crystal": 0, "Ocean Creature": 1, "Spiral Galaxy": 2, "Quantum Form": 3 }; this.themes = { "Synthwave": { colors: ["#ff1f5a", "#ff758a", "#1e3799", "#0984e3"], burstColor: "#ffffff" }, "Forest": { colors: ["#38ef7d", "#11998e", "#ffe259", "#ffa751"], burstColor: "#ffff99" }, "Ocean": { colors: ["#2193b0", "#38ef7d", "#00b4db", "#0083B0"], burstColor: "#8cffff" }, "Sunset": { colors: ["#FF416C", "#FF4B2B", "#f5af19", "#f12711"], burstColor: "#ffffa8" } }; this.themeNames = Object.keys(this.themes); this.params = { preset: 0, morphDuration: 2.0, pulseSpeed: 1.0, pulseIntensity: 0.2, microAnimationIntensity: 0.15, colorTheme: "Sunset", burstSpeed: 0.8, burstDuration: 6.0, multiWave: true, bloomStrength: 1.4, bloomRadius: 0.5, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0