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