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 vPNoiseStren.........完整代码请登录后点击上方下载按钮下载查看