three实现三维圆球shockwave shaderpass双击波动动画效果代码-html代码-BFW代码库

three实现三维圆球shockwave shaderpass双击波动动画效果代码

代码语言：html

所属分类：动画

代码描述：three实现三维圆球shockwave shaderpass双击波动动画效果代码

代码标签： three 三维圆球 shockwave shaderpass 双击波动动画

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
<style>
      body {
        margin: 0;
        overflow: hidden;
        background: #000;
        font-family: sans-serif;
        user-select:none;
      }
      canvas {
        display: block;
      }
      .dg.ac {
        z-index: 10;
      }
    </style>

  
</head>

  <body>
    <canvas id="goo-canvas"></canvas>
    
        <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="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></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 { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
      import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';

      const canvas = document.querySelector('#goo-canvas');
      const renderer = new THREE.WebGLRenderer({ canvas });
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setPixelRatio(window.devicePixelRatio);

      const.........完整代码请登录后点击上方下载按钮下载查看