three+lil-gui实现webgl三维柏林噪点动画效果代码-html代码-BFW代码库

three+lil-gui实现webgl三维柏林噪点动画效果代码

代码语言：html

所属分类：三维

代码描述：three+lil-gui实现webgl三维柏林噪点动画效果代码

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

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

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

  
  
  
  
<style>
* {
	margin:0;
	padding:0;
}
body,html {
	height:100%;
}
canvas {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
</style>


  
  
</head>

<body translate="no">
  <canvas></canvas>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.160.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.146.js"></script>
      <script type="module">

import GUI from "//repo.bfw.wiki/bfwrepo/js/lil-gui.esm.js";

/**
 * Sizes
 */
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight };

/**
 * Base
 */
// Debug
const gui = new GUI();

// Canvas
const canvas = document.querySelector('canvas');

// Scene
const scene = new THREE.Scene();

/**
 * Test mesh
 */
// Geometry
const geometry = new THREE.PlaneGeometry(2, 2, 128, 128);

// Material
const material = new THREE.ShaderMaterial({
  vertexShader: `varying vec2 vUv;
uniform float uTime;
varying float vTime;
uniform float uPNoiseStrength;
varying float vPNoiseStrength;
uniform float uPNoiseSize;
varying float vPNoiseSize;
uniform float uPNoiseSpeed;
varying float vPNoiseSpeed;

void main()
{
    vec4 modelPosition = modelMatrix * vec4(position,1.0); 
         
    vec4 viewPosition = viewMatrix * modelPosition;
    vec4 projectPosition = projectionMatrix * viewPosition;

    gl_Position = projectPosition;
    vUv = uv;
	vTime = uTime;
    vPNoiseStrength = uPNoiseStrength;
    vPNoiseSize = uPNoiseSize;
    vPNoiseSpeed = uPNoiseSpeed;
}`,
  fragmentShader: `
varying vec2 vUv;
varying float vTime;
varying float vPNoiseStrength;
varying float vPNoiseSize;
varying float vPNoiseSpeed;
	vec4 permute(vec4 x)
{
    return mod(((x*34.0)+1.0)*x, 289.0);
}

//	Classic Perlin 2D Noise 
//	by Stefan Gustavson (https://github.com/stegu/webgl-noise)
//
vec2 fade(vec2 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}

float cnoise(vec2 P){
  vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
  vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
  Pi = mod(Pi, 289.0); // To avoid truncation effects in permutation
  vec4 ix = Pi.xzxz;
  vec4 iy = Pi.yyww;
  vec4 fx = Pf.xzxz;
  vec4 fy = Pf.yyww;
  vec4 i = permute(permute(ix) + iy);
  vec4 gx = 2.0 * fract(i * 0.0243902439) - 1.0; // 1/41 = 0.024...
  vec4 gy = abs(gx) - 0.5;
  vec4 tx = floor(gx + 0.5);
  gx = gx - tx;
  vec2 g00 = vec2(gx.x,gy.x);
  vec2 g10 = vec2(gx.y,gy.y);
  vec2 g01 = vec2(gx.z,gy.z);
  vec2 g11 = vec2(gx.w,gy.w);
  vec4 norm = 1.79284291400159 - 0.85373472095314 * 
    vec4(dot(g00.........完整代码请登录后点击上方下载按钮下载查看