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