three+gsap实现三维鼠标牵绳子小兔子围绕旋转吃萝卜小游戏代码

代码语言:html

所属分类:三维

代码描述:three+gsap实现三维鼠标牵绳子小兔子围绕旋转吃萝卜小游戏代码,单击鼠标小兔子跳跃,拖动鼠标可用绳子牵引小兔子改变位置。

代码标签: three gsap 三维 跟随 鼠标 小兔子 围绕 绳子 旋转 吃萝卜 小游戏 代码

下面为部分代码预览,完整代码请点击下载或在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: -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;
}

#instructions {
  position: absolute;
  width: 100%;
  margin: auto;
  bottom: 60px;
  font-family: "Open Sans", sans-serif;
  color: #ff3434;
  font-size: 0.7em;
  text-transform: uppercase;
  text-align: center;
}
</style>

  
  
</head>

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

<div id="instructions"> - Press to jump - </div>


<script type="x-shader/x-vertex" id="reflectorVertexShader">
  uniform mat4 textureMatrix;
  varying vec4 vUvReflection;
  varying vec2 vUv; 

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

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

	vUvReflection = textureMatrix * vec4( position, 1.0 );
	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="reflectorFragmentShader">
  uniform vec3 color;
	uniform sampler2D tDiffuse;
  uniform sampler2D tScratches;
  varying vec4 vUvReflection;
	varying vec2 vUv;
  
  #include <common>
  #include <packing>
  #include <lights_pars_begin>
  #include <shadowmap_pars_fragment>
  #include <shadowmask_pars_fragment>
	#include <logdepthbuf_pars_fragment>
  
  vec4 blur9(sampler2D image, vec4 uv, vec2 resolution, vec2 direction) {
        vec4 color = vec4(0.0);
        vec2 off1 = vec2(1.3846153846) * direction;
        vec2 off2 = vec2(3.2307692308) * direction;
        color += texture2DProj(image, uv) * 0.2270270270;
        color += texture2DProj(image, uv + vec4(off1 / resolution, off1 / resolution)) * 0.3162162162;
        color += texture2DProj(image, uv - vec4(off1 / resolution, off1 / resolution)) * 0.3162162162;
        color += texture2DProj(image, uv + vec4(off2 / resolution, off2 / resolution)) * 0.0702702703;
        color += texture2DProj(image, uv - vec4(off2 / resolution, off2 / resolution)) * 0.0702702703;
        return color;
  }
	
  float blendOverlay( float base, float blend ) {
			return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );
	}

	vec3 blendOverlay( vec3 base, vec3 blend ) {
		return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );
	}

	void main() {
			#include <logdepthbuf_fragment>
        
        
			vec4 displacement = vec4( sin(vUvReflection.y * 3.) * .05, sin(vUvReflection.x * 3.) * .05, 0.0, 0.0);
      vec2 resolution = vec2(30., 30.);
      vec4 base = blur9( tDiffuse, vUvReflection + displacement, resolution, vec2(1., 0.) ) * .25;
      base += blur9( tDiffuse, vUvReflection + displacement, resolution, vec2(-1., 0.) ) * .25;
      base += blur9( tDiffuse, vUvReflection + displacement, resolution, vec2(0, 1.) ) * .25;
      base += blur9( tDiffuse, vUvReflection + displacement, resolution, vec2(0, -1.) ) * .25;
    
      vec4 scratchesCol = texture2D( tScratches, vUv);
    
			vec3 col = mix(color, base.rgb, .5);
      col.rgb += scratchesCol.r * .02;
	    col.gb -= scratchesCol.g * .01;
      col.gb -= (1.0 - getShadowMask() ) * .015;
    
      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 modelViewPos.........完整代码请登录后点击上方下载按钮下载查看

网友评论0