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

代码语言：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 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
    gl_Position = projectionMatrix * modelViewPosition; 
  }
</script>

<script type="x-shader/x-fragment" id="simulationFragmentShader">
  // fragment shader
  precision highp float;

  uniform sampler2D inputTexture;
  uniform vec2 blade1PosOld;
  uniform vec2 blade1PosNew;
  uniform float strength;
  uniform float time;
  varying vec2 vUv;

  float lineSegment(vec2 p, vec2 a, vec2 b, float thickness) {
      vec2 pa = p - a;
      vec2 ba = b - a;
      float h = clamp( dot(pa,ba)/dot(ba,ba), 0.0, 1.0 );
      float idk = length(pa - ba*h);
      return smoothstep(thickness, .2 * thickness, idk);
  }

  void main(void) {
    vec4 prevTexture = texture2D(inputTexture, vUv);
    vec3 col = prevTexture.rgb * .999;
    if (strength>0.){
        float space = .001;
        float crease = .001;
        float thickness = .001 + strength * .001;
        float leftRed = lineSegment(vUv + space, blade1PosOld, blade1PosNew, thickness);
        float leftGreen = lineSegment(vUv + space + crease, blade1PosOld, blade1PosNew, thickness);
        float rightRed = lineSegment(vUv - space - crease, blade1PosOld, blade1PosNew, thickness);
        float rightGreen = lineSegment(vUv - space, blade1PosOld, blade1PosNew, thickness);
        col.r += ( leftRed + rightRed ) * strength * 3.0;
        col.g += ( leftGreen + rightGreen) * strength * 3.0;
        col.r = clamp(col.r, .0, 1.0);
        col.g = clamp(col.g, .0, 1.0);
    }
    gl_FragColor = vec4(col, 1.0);
}
</script>

<script type="x-shader/x-fragment" id="outlineFragmentShader">
  uniform vec3 color;
  void main(void) {
      gl_FragColor = vec4( color, 1.0);
  }
</script>

<script type="x-shader/x-vertex" id="outlineVertexShader">
  uniform float size;
  uniform float time;

  void main() {
    vec3 transformed = position + normal * size * (1.0 + abs( sin ( position.y * time * .02 ) * 2.0 ));
    vec4 modelViewPosition = modelViewMatrix * vec4(transformed, 1.0);
    gl_Position = projectionMatrix * modelViewPosition; 
  }
</script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.12.2.js"></script>
      <script type="module">
import * as THREE from "//repo.bfw.wiki/bfwrepo/js/module/three/build/156/three.module.js";
import { OrbitControls } from "//repo.bfw.wiki/bfwrepo/js/module/three/examples/156/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "//repo.bfw.wiki/bfwrepo/js/module/three/examples/156/jsm/loaders/GLTFLoader.js";

import { Reflector } from "//repo.bfw.wiki/bfwrepo/js/module/three/examples/156/jsm/objects/Reflector.js";

document.addEventListener("DOMContentLoaded", () => new App());

class App {
  constructor() {
    this.winWidth = window.innerWidth;
    this.winHeight = window.innerHeight;
    this.gltfFile = "//repo.bfw.wiki/bfwrepo/threemodel/rabbit.glb";
    this.loadAssets();
  }

  loadAssets() {
    const loaderModel = new GLTFLoader();
    loaderModel.load(this.gltfFile, gltf => {
      this.model = gltf.scene;
      this.setUpScene();
    });
  }

  setUpScene() {
    // Scene
    this.scene = new THREE.Scene();
    this.bgrColor = 0x332e2e;
    this.fog = new THREE.Fog(this.bgrColor, 13, 20);
    this.scene.fog = this.fog;
    this.camera = new THREE.PerspectiveCamera(
    60,
    this.winWidth / this.winHeight,
    1,
    100);

    this.camera.position.set(0, 4, 8);
    this.camera.lookAt(new THREE.Vector3());
    this.scene.add(this.camera);

    // Hero params
    this.heroAngularSpeed = 0;
    this.heroOldRot = 0;
    this.heroDistance = 0;
    this.heroOldUVPos = new THREE.Vector2(0.5, 0.5);
    this.heroNewUVPos = new THREE.Vector2(0.5, 0.5);
    this.heroSpeed = new THREE.Vector2(0, 0);
    this.heroAcc = new THREE.Vector2(0, 0);
    this.targetHeroUVPos = new THREE.Vector2(0.5, 0.5);
    this.targetHeroAbsMousePos = new THREE.Vector2(0, 0);
    this.raycaster = new THREE.Raycaster();
    this.mouse = new THREE.Vector2();
    this.isJumping = this.isLanding = false;
    this.jumpParams = { jumpProgress: 0, landProgress: 0 };

    // Clock
    this.clock = new THREE.Clock();
    this.time = 0;
    this.deltaTime = 0;

    // Core
    this.createRenderer();
    this.createSim();
    //this.createControls();
    this.createListeners();

    // Environment
    this.floorSize = 30;
    this.createMaterials();
    this.processModel();
    this.createFloor();
    this.createLine();
    this.createLight();
    this.createParticles();

    // Render loop
    this.draw();
  }

  processModel() {
    this.rabbit = this.model.getObjectByName("Rabbit");
    this.rabbitBody = this.model.getObjectByName("body");
    this.earRight = this.model.getObjectByName("earRight");
    this.earLeft = this.model.getObjectByName("earLeft");
    this.tail = this.model.getObjectByName("tail");
    this.footLeft = this.model.getObjectByName("footLeft");
    this.footRight = this.model.getObjectByName("footRight");
    this.eyeLeft = this.model.getObjectByName("eyeLeft");
    this.eyeRight = this.model.getObjectByName("eyeRight");
    this.carrot = this.model.getObjectByName("carrot");
    this.carrotLeaf = this.model.getObjectByName("carrotLeaf");
    this.carrotLeaf2 = this.model.getObjectByName("carrotLeaf2");
    this.carrot.rotation.z = 0.2;
    this.carrot.rotation.x = 0.2;
    this.rabbitBody.material = this.primMat;
    this.earRight.material = this.primMat;
    this.earLeft.material = this.primMat;
    this.tail.material = this.primMat;
    this.footLeft.material = this.secMat;
    this.footRight.material = this.secMat;
    this.eyeLeft.material = this.secMat;
    this.eyeRight.material = this.secMat;
    this.carrot.material = this.bonusMat;
    this.carrotLeaf.material = this.primMat;
    this.carrotLeaf2.material = this.primMat;

    this.addOutline(this.rabbitBody);
    this.addOutline(this.earRight);
    this.addOutline(this.earLeft);
    this.addOutline(this.tail);
    this.addOutline(this.carrot);

    this.rabbit.traverse(object => {
      if (object.isMesh) {
        object.castShadow = true;
        object.receiveShadow = true;
      }
    });

    this.carrot.traverse(object => {
      if (object.isMesh) {
        object.castShadow = true;
      }
    });

    this.scene.add(this.rabbit);
    this.scene.add(this.carrot);
  }

  createFloor() {

    this.floor = new Reflector(
    new THREE.PlaneGeometry(this.floorSize, this.floorSize),
    {
      color: new THREE.Color(this.bgrColor),
      textureWidth: 1024,
      textureHeight: 1024 });


    this.floor.rotation.x = -Math.PI / 2;
    this.floor.receiveShadow = true;
    this.modifyFloorShader();

    this.scene.add(this.floor);
  }

  createLine() {
    const material = new THREE.LineDashedMaterial({
      color: 0x7beeff,
      linewidth: 1,
      scale: 1,
      dashSize: 0.2,
      gapSize: 0.1 });


    const points = [];
    points.push(new THREE.Vector3(0, 0.2, 0));
    points.push(new THREE.Vector3(3, 0.2, 3));
    const geometry = new THREE.BufferGeometry().setFromPoints(points);
    this.line = new THREE.Line(geometry, material);
    this.scene.add(this.line);
  }

  createParticles() {
    let bodyCount = 20;
    let tailCount = 5;
    let particleGeom = new THREE.BoxGeometry(.2, .2, .2, 1, 1, 1);
    this.particles1 = [];
    this.particles2 = [];

    let i = 0;

    for (i = 0; i < bodyCount; i++) {
      let m = new THREE.Mesh(particleGeom, this.bonusMat);
      this.particles1.push(m);
      m.scale.set(0, 0, 0);
      this.scene.add(m);
    }

    for (i = 0; i < tailCount; i++) {
      let m = new THREE.Mesh(particleGeom, this.primMat);
      this.particles2.push(m);
      m.scale.set(0, 0, 0);
      this.scene.add(m);
    }
  }

  createLight() {
    this.ambientLight = new THREE.AmbientLight(0xffffff);
    this.scene.add(this.ambientLight);

    this.light = new THREE.DirectionalLight(0xffffff, 1);
    this.light.position.set(1, 5, 1);
    this.light.castShadow = true;
    this.light.shadow.mapSize.width = 512;
    this.light.shadow.mapSize.height = 512;
    this.light.shadow.camera.near = 0.5;
    this.light.shadow.camera.far = 12;
    this.light.shadow.camera.left = -12;
    this.light.shadow.camera.right = 12;
    this.light.shadow.camera.bottom = -12;
    this.light.shadow.camera.top = 12;
    this.light.shadow.radius = 3;
    this.light.shadow.blurSamples = 4;
    this.scene.add(this.light);

    const helper = new THREE.CameraHelper(this.light.shadow.camera);
    //this.scene.add(helper);
  }

  createRenderer() {
    const canvas = document.querySelector("canvas.webgl");
    this.renderer = new THREE.WebGLRenderer({
      canvas,
      antialias: true,
      preserveDrawingBuffer: true });

    this.renderer.setClearCo.........完整代码请登录后点击上方下载按钮下载查看