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