three打造一个三维小鱼跟随鼠标游动效果代码-html代码-BFW代码库

three打造一个三维小鱼跟随鼠标游动效果代码

代码语言：html

所属分类：三维

代码描述：three打造一个三维小鱼跟随鼠标游动效果代码

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

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

<head>

  <meta charset="UTF-8">
  


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

#world{
  background: linear-gradient(#8ee4ae, #e9eba3);
  position:absolute;
  width:100%;
  height:100%;
  overflow:hidden;
}
#instructions{
  position:absolute;
  width:100%;
  top:50%;
  margin: auto;
  margin-top:80px;
  font-family:'Open Sans', sans-serif;
  color:#71b583;
  font-size:1.2em;
  text-transform: uppercase;
  text-align : center;
}

#credits{
  position:absolute;
  width:100%;
  margin: auto;
  bottom:0;
  margin-bottom:20px;
  font-family:'Open Sans', sans-serif;
  color:#71b583;
  font-size:0.7em;
  text-transform: uppercase;
  text-align : center;
}
#credits a {
  color:#71b583;
}
</style>




</head>

<body >
  <div id="world"></div>
<div id="instructions">Move your mouse <br/>to change speed and direction</div>


 
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/stats-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.72.js"></script>

      <script>
//THREEJS RELATED VARIABLES 

var scene,
camera,
fieldOfView,
aspectRatio,
nearPlane,
farPlane,
shadowLight,
light,
renderer,
container;

//SCREEN VARIABLES 
var HEIGHT,
WIDTH,
windowHalfX,
windowHalfY,
xLimit,
yLimit;

// FISH BODY PARTS
var fish,
bodyFish,
tailFish,
topFish,
rightIris,
leftIris,
rightEye,
leftEye,
lipsFish,
tooth1,
tooth2,
tooth3,
tooth4,
tooth5;

// FISH SPEED
// the colors are splitted into rgb values to facilitate the transition of the color
var fishFastColor = { r: 255, g: 0, b: 224 }; // pastel blue
fishSlowColor = { r: 0, g: 207, b: 255 }; // purple
angleFin = 0; // angle used to move the fishtail

// PARTICLES COLORS
// array used to store a color scheme to randomly tint the particles 
var colors = ['#dff69e',
'#00ceff',
'#002bca',
'#ff00e0',
'#3f159f',
'#71b583',
'#00a2ff'];

// PARTICLES
// as the particles are recycled, I use 2 arrays to store them
// flyingParticles used to update the flying particles and waitingParticles used to store the "unused" particles until we need them;
var flyingParticles = [];
waitingParticles = [];
// maximum z position for a particle
maxParticlesZ = 600;

// SPEED
var speed = { x: 0, y: 0 };
var smoothing = 10;

// MISC
var mousePos = { x: 0, y: 0 };
var stats;
var halfPI = Math.PI / 2;


function init() {
  // To work with THREEJS, you need a scene, a camera, and a renderer

  // create the scene;
  scene = new THREE.Scene();

  // create the camera.........完整代码请登录后点击上方下载按钮下载查看