three+dat.gui实现水波纹可调节参数效果代码

代码语言:html

所属分类:动画

代码描述:three+dat.gui实现水波纹可调节参数效果代码

代码标签: three dat.gui 水波纹 调节 参数

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

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

<head>
  <meta charset="UTF-8">
  


  
  
  
    <style>
      body { margin: 0; overflow: hidden; user-select: none; background: #000000; }
      canvas { display: block; }
    </style>
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.139.js"></script>
</head>

  <body>
    <script type="module">
    
      import { GUI } from '//repo.bfw.wiki/bfwrepo/js/module/dat.gui.js';

      const vertexShader = `
        varying vec2 vUv;
        void main() {
          vUv = uv;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
      `;

      const fragmentShader = `
        uniform float time;
        uniform float speed;
        uniform float intensity;
        uniform float xIntensity;
        uniform float yIntensity;
        uniform vec3 color;
        uniform vec2 iResolution;
        uniform float iTime;
        uniform float noiseScale;
        uniform vec3 color_01;
        uniform vec3 color_02;
        uniform vec3 color_03;
        uniform vec3 color_04;
        uniform float m00;
        uniform float m01;
        uniform float m10;
        uniform float m11;
 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0