three实现三维网格能量源动画效果代码-html代码-BFW代码库

代码语言：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,
    .........完整代码请登录后点击上方下载按钮下载查看