three实现三维炫酷科技感振动波金字塔发光动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维炫酷科技感振动波金字塔发光动画效果代码，点击按钮可触发不同的振动动画特效。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
       
    </head>
    <body>
  
        <style>
            body {
                margin: 0;
                overflow: hidden;
                background-color: #000;
                font-family: 'Inter',sans-serif
            }

            canvas {
                width: 100%;
                height: 100vh;
                display: block;
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%)
            }

            #ui-container {
                position: fixed;
                bottom: 30px;
                left: 50%;
                transform: translateX(-50%);
                z-index: 10;
                text-align: center
            }

            #effect-trigger {
                padding: 12px 24px;
                font-size: 16px;
                font-weight: 600;
                color: #fff;
                background: rgba(255,255,255,0.1);
                border: 2px solid rgba(255,255,255,0.3);
                border-radius: 12px;
                cursor: pointer;
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                transition: background .3s,color .3s,transform .2s
            }

            #effect-trigger:hover {
                background: rgba(255,255,255,0.2);
                border-color: rgba(255,255,255,0.5)
            }

            #effect-trigger:active {
                transform: scale(0.95)
            }

            #effect-info {
                margin-top: 10px;
                color: rgba(255,255,255,0.8);
                font-size: 14px
            }
        </style>
        <div id="ui-container">
            <button id="effect-trigger">Trigger Effect</button>
            <div id="effect-info">Lightning Storm</div>
        </div>
      <script type="importmap">
{
 "imports":{
    "three":"//repo.bfw.wiki/bfwrepo/js/module/three/build/164/three.module.js",
    "three/addons/":"//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/"
 }
}
</script>
        <script type="module">
            import*as THREE from 'three';
            import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
            import {EffectComposer} from 'three/addons/postprocessing/EffectComposer.js';
            import {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
            import {UnrealBloomPass} from 'three/addons/postprocessing/UnrealBloomPass.js';
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);
            const renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setClearColor(0x000000);
            document.body.appendChild(renderer.domElement);
            const controls = new OrbitControls(camera,renderer.domElement);
            controls.enableDamping = true;
            controls.dampingFactor = .05;
            camera.position.set(0, 2, 6);
            controls.target.set(0, 1, 0);
            controls.update();
            const composer = new EffectComposer(renderer);
            const renderPass = new RenderPass(scene,camera);
            composer.addPass(renderPass);
            const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth,window.innerHeight),1.5,0.4,0.85);
            bloomPass.threshold = .1;
            bloomPass.strength = 2.5;
            bloomPass.radius = .8;
            composer.addPass(bloomPass);
            let effectState = 0;
            const clock = new THREE.Clock();
            let time = 0;
            const effectThemes = [{
                name: "Lightning Storm",
                effect: "lightning",
                outer: [new THREE.Color(0x00ffff), new THREE.Color(0x4169e1), new THREE.Color(0x9400d3)],
                outerEdge: new THREE.Color(0x87cefa),
                inner: [new THREE.Color(0xff1493), new THREE.Color(0xff4500), new THREE.Color(0xffd700)],
                innerEdge: new THREE.Color(0xffd700)
            }, {
                name: "Volcanic Shards",
                effect: "shards",
                outer: [new THREE.Color(0xffd700), new THREE.Color(0xff4500), new THREE.Color(0x8b0000)],
                outerEdge: new THREE.Color(0xff8c00),
                inner: [new THREE.Color(0xffff00), new THREE.Color(0xff6347), new THREE.Color(0xdc143c)],
                innerEdge: new THREE.Color(0xffa500),
                shardColors: [new THREE.Color(0xff8c00), new THREE.Color(0xffa500), new THREE.Color(0xffff00)]
            }, {
                name: "Arctic Rings",
                effect: "rings",
                outer: [new THREE.Color(0x00ffff), new THREE.Color(0x87ceeb), new THREE.Color(0xb0e0e6)],
                oute.........完整代码请登录后点击上方下载按钮下载查看