three+webgl实现可调节参数的墨水和水模拟鼠标跟随动画效果代码-html代码-BFW代码库

three+webgl实现可调节参数的墨水和水模拟鼠标跟随动画效果代码

代码语言：html

所属分类：三维

代码描述：three+webgl实现可调节参数的墨水和水模拟鼠标跟随动画效果代码，通过lil-gui调节参数实现更多酷炫效果。

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

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

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

  
  
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

.webgl {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  outline: none;
  background-color: #000000;
  cursor: move;
  /* fallback if grab cursor is unsupported */
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

#credits {
  position: absolute;
  width: 100%;
  margin: auto;
  bottom: 0;
  margin-bottom: 20px;
  font-family: "Open Sans", sans-serif;
  color: #544027;
  font-size: 0.7em;
  text-transform: uppercase;
  text-align: center;
}
#credits a {
  color: #7beeff;
}

#credits a:hover {
  color: #ff3434;
}
</style>

  
  
</head>

<body >
  <canvas class="webgl"></canvas>

<div id="credits">
  <p><a href="" target="blank">copyright</a></p>
</div>

<script type="x-shader/x-vertex" id="floorVertexShader">
  varying vec2 vUv; 

  #include <common>
  #include <shadowmap_pars_vertex>
  #include <logdepthbuf_pars_vertex>

	void main() {
		#include <beginnormal_vertex>
		#include <defaultnormal_vertex>
		#include <begin_vertex>

		vUv = uv;
		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

		#include <logdepthbuf_vertex>
		#include <worldpos_vertex>
		#include <shadowmap_vertex>

	}
</script>
  
<script type="x-shader/x-fragment" id="floorFragmentShader">
  uniform vec3 color;
  uniform sampler2D tScratches;
	varying vec2 vUv;
  
  #include <common>
  #include <packing>
  #include <lights_pars_begin>
  #include <shadowmap_pars_fragment>
  #include <shadowmask_pars_fragment>
	#include <logdepthbuf_pars_fragment>

	void main() {
			#include <logdepthbuf_fragment>
      vec3 col = color;
      vec4 scratchesCol = texture2D( tScratches, vUv);
      float inkValue = max( max(scratchesCol.r, scratchesCol.g), scratchesCol.b);
      col = mix(col, scratchesCol.rgb, inkValue);
      col.r = min(col.r, 1.0);
      col.g = min(col.g, 1.0);
      col.b = min(col.b, 1.0);
      
      col.gb -= (1.0 - getShadowMask() ) * .1;
      gl_FragColor = vec4(col, 1.0);
		 	#include <tonemapping_fragment>
			#include <colorspace_fragment>
		}
</script>  
<script type="x-shader/x-vertex" id="simulationVertexShader">
  precision highp float;

  uniform float time;
  varying vec2 vUv;

  void main() {
    vUv = uv;
    vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
    gl_Position = projectionMatrix * modelViewPosition; 
  }
.........完整代码请登录后点击上方下载按钮下载查看