three打造三维鱼骨随鼠标游动躲避障碍物效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：three打造三维鱼骨随鼠标游动躲避障碍物效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"><head>

  <meta charset="UTF-8">

  <link href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="stylesheet">

  
  
  
<style>
#ocean {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(#045c7c, #0d324e);
}
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

#overlay {
  background: white;
  font-family: "Allerta Stencil", sans-serif;
  font-size: 1em;
  opacity: 0.75;
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
  top: 0;
  left: 0;
}

#settings {
  margin-top: 50px;
  font-size: 2.8em;
}
#parameter {
  margin-top: 50px;
  font-size: 1.1em;
}

#holder {
  width: 40%;
  margin-left: auto;
  margin-right: auto;
}

#parameter {
  width: 100%;
  margin-top: 20px;
  text-align: center;
}

#settings {
  text-align: center;
}

.slidecontainer {
  width: 100%;
}

.slider:hover {
  opacity: 0.85;
}

.slider {
  -webkit-appearance: none;
  margin-top: 30px;
  width: 100%;
  height: 2px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.25;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  margin-left: 0px;
  height: 45px;
  border-radius: 100%;
  width: 45px;
  border: solid black 6px;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  display: inline-block;
  margin-left: 0px;
  height: 50px;
  border-radius: 100%;
  width: 50px;
  border: solid black 4px;
  cursor: pointer;
}

#button {
  margin-top: 40px;
  width: 100%;
  background-color: white;
  color: black;
  border: 3px solid #555555;
  font-size: 1.75em;
  font-family: "Allerta Stencil", sans-serif;
}

#button:hover {
  background-color: #555555;
  color: white;
}
</style>


</head>

<body>
  <div id="ocean" class="ocean"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.109.js"></script>
      <script>
let mousePos = { x: 0, y: 0 };
HEIGHT = window.innerHeight,
WIDTH = window.innerWidth,
flag = true;

const Pi = Math.PI,
scene = new THREE.Scene(),
camera = new THREE.PerspectiveCamera(60, WIDTH / HEIGHT, 1, 10000),
renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }),
container = document.getElementById('ocean'),
ambientLight = new THREE.AmbientLight(0x045c7c, .5),
hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x000000, .9),
shadowLight = new THREE.DirectionalLight(0xffffff, .9);

const shapes = { //all the variables behind the objects in the scene
  seabed: {
    radius: 660,
    height: 700,
    rSeg: 50,
    hSeg: 20,
    ampR: 20,
    speedC: .015,
    color: 0x531e1e,
    rotation: .005,
    x: 0,
    y: -620,
    z: -50,
    step: .000005 },

  bottle: {
    colors: ["orange", "blue", "white", "red", "green", "blue"],
    height: 20,
    radius: 5,
    segments: 16,
    x: 0,
    y: 150,
    z: 110,
    scale: 1 },

  can: {
    colors: ["green", "orange", "black", "red", "brown", "blue"],
    radius: 5,
    height: 20,
    segments: 16 },

  fish: {
    radius: 4,
    height: 15,
    segments: 12 },


  water: {
    groupNumber: 22,
    membersNumber: 20,
    depth: 450,
    step: .0015 },

  tire: {
    innerR: 8,
    outerR: 16,
    rSegments: 8,
    tSegments: 20,
    number: 25,
    step: .003 },

  tentacle: {
    partsNum: 20,
    partsOffset: 30,
    firstOff: 10 },

  jellyfish: {
    y: 100,
    z: 110,
    minX: -350,
    maxX: 350,
    minY: 70,
    maxY: 450 } };


const settings = {
  camera: {
    x: 0,
    y: 350,
    z: 600,
    xRot: -Pi / 32 },

  oNpause: false },

params = {
  jsize: 1,
  speed: 1,
  tsize: 1 };


let water,
trash,
trashHolder,
jellyfish,
tentacles = [],
jellyDisplacementX = 0,
jellyDisplacementY = 0,
crashSpeedX = 0,
crashSpeedY = 0,
crash,
countTentacles = 0;

function initScene() {//scene initialisation
  scene.fog = new THREE.Fog(0x38bbb7, -200, 950);
  camera.position.set(settings.camera.x, settings.camera.y, settings.camera.z);
  camera.rotation.x = settings.camera.xRot;
  renderer.setSize(WIDTH, HEIGHT);
  renderer.shadowMap.enabled = true;
  container.appendChild(renderer.domElement);
  window.addEventListener('resize', handleWindowResize, false);
}

function normalize(v, vmin, vmax, tmin, tmax) {
  const nv = Math.max(Math.min(v, vmax), vmin);
  const dv = vmax - vmin;
  const pc = (nv - vmin) / dv;
  const dt = tmax - tmin;
  const tv = tmin + pc * dt;
  return tv;
}

function handleMouseMove(event) {
  const tx = -1 + event.clientX / WIDTH * 2;
  const ty = 1 - event.clientY / HEIGHT * 2;
  mousePos = { x: tx, y: ty };
}

function handleWindowResize() {
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;
  renderer.setSize(WIDTH, HEIGHT);
  camera.aspect = WIDTH / HEIGHT;
  camera.updateProjectionMatrix();
}

function initLights() {
  scene.add(hemisphereLight);
  scene.add(shadowLight);
  scene.add(ambientLight);
}

Seabed = function (rad, h, rS, hS, a, sC, color, xP, yP, zP) {
  //the seabed is rotated cylinder
  const geometry = new THREE.CylinderGeometry(rad, rad, h, rS, hS);
  geometry.applyMatrix(new THREE.Matrix4().makeRotationX(-Pi / 2));
  geometry.mergeVertices();
  const length = geometry.vertices.length;
  this.bumps = [];
  //add some bumps for more realism
  for (let i = 0; i < length; i++) {
    const v = geometry.vertices[i];

    this.bumps.push({ x: v.x,
      y: v.y,
      z: v.z,
      ang: Math.random() * Pi * 2,
      amp: Math.random() * a,
      speed: sC + Math.random() * sC });
  }

  const material = new THREE.MeshPhongMaterial({
    color: color,
    transparent: true,
    opacity: .99,
    flatShading: true });


  this.mesh = new THREE.Mesh(geometry, material);
  this.mesh.receiveShadow = true;
  this.mesh.position.set(xP, yP, zP);
};

Seabed.prototype.moveBumps = function (step) {
  const verts = this.mesh.geometry.vertices;
  const length = verts.length;

  for (let i = 0; i < length; i++) {
    const v = verts[i];
    const vprops = this.bumps[i];
    v.x = vprops.x + Math.cos(vprops.ang) * vprops.amp;
    v.y = vprops.y + Math.sin(vprops.ang) * vprops.amp;
    vprops.ang += vprops.speed;
  }

  this.mesh.geometry.verticesNeedUpdate = true;
  seabed.mesh.rotation.z += step;
};

const seabed = new Seabed(shapes.seabed.radius, shapes.seabed.height,
shapes.seabed.rSeg, shapes.seabed.hSeg,
shapes.seabed.ampR, shapes.seabed.speedC, shapes.seabed.color,
shapes.seabed.x, shapes.seabed.y, shapes.seabed.z);
scene.add(seabed.mesh);

Water = function (gN, mN, d) {
  // water collects all of the different thing that can be swimming in it
  this.mesh = new THREE.Object3D();
  this.objects = [];
  const step = Pi * 2 / gN;
  let angle, object, type, offset, depth;
  for (let j = 0; j < gN; j++) {
    angle = step * j;
    offset = Pi / 16 * (Math.random() * 0.4 + 0.8); // put the next object on random place

    for (let i = 0; i < mN; i++) {

      type = Math.floor(Math.random() * 30); //choose the type of the object, it can be bottle, can or fish
      if (type < 8) {
        offset = Pi / 4 * (Math.random() * 0.4 - 0.8);
        if (type < 3) object = new Bottle(shapes.bottle.radius, shapes.bottle.height, shapes.bottle.segments, shapes.bottle.scale, shapes.bottle.colors);else
        object = new Can(shapes.can.radius, shapes.can.height, shapes.can.segments, shapes.can.colors);

        object.mesh.rotation.z = Math.random() * Pi * 2;
      } else
      {
        offset = Pi / 8 * (Math.random() * 0.4 - 0.8);
        object = new Fish(shapes.fish.radius, shapes.fish.height, shapes.fish.segments);
        object.mesh.rotation.z = angle + offset;
      }
      object.mesh.position.z = 0 - Math.random() * d;
      this.objects.push(object);
      depth = shapes.seabed.height + Math.random() * d * 1.5;
      object.mesh.position.y = Math.sin(angle + offset) * depth;
      object.mesh.position.x = Math.cos(angle + offset) * depth;
      object.angle = angle + offset;
      this.mesh.add(object.mesh);
    }
  }
};


function createWater(y) {
  water = new Water(shapes.water.groupNumber, shapes.water.membersNumber, shapes.water.depth);
  water.mesh.position.y = shapes.seabed.y;
  scene.add(water.mesh);
}

Fish = function (r, h, seg) {
  //the fish is created with three cones
  this.mesh = new THREE.Object3D();
  this.mesh.name = "fish";

  const geomHead = new THREE.ConeGeometry(r, h * 8 / 15, seg);
  const material = new THREE.MeshPhongMaterial({ color: new THREE.Color("rgb(255," + Math.floor(95 + Math.random() * 100) + "," + Math.floor(Math.random() * 20) + ")") });
  const head = new THREE.Mesh(geomHead, material);
  head.castShadow = true;
  head.receiveShadow = true;
  this.mesh.add(head);

  const geomBody = new THREE.ConeGeometry(r, h, seg);
  const body = new THREE.Mesh(geomBody, material);
  body.rotation.x = Pi;
  body.position.y -= h * .77;
  body.castShadow = true;
  body.receiveShadow = true;
  this.mesh.add(body);

  const geomTail = new THREE.ConeGeometry(r / 2, h * 7 / 15, seg / 3);
  const tail = new THREE.Mesh(geomTail, material);
  tail.position.y -= h * 4 / 3;
  tail.castShadow = true;
  tail.receiveShadow = true;
  this.mesh.add(tail);
};


const Bottle = function (r, h, seg, sc, colors) {
  //the bottle is created with cylinders
  //material simulates transparency 
  this.mesh = new THREE.Object3D();
  const type = Math.floor(Math.random() * 3);
  const materialLiquid = new THREE.MeshPhongMaterial({ color: colors[2 * type], transparent: true, opacity: .6, flatShading: true });
  const materialLabel = new THREE.MeshPhongMaterial({ color: colors[2 * type + 1], transparent: true, opacity: .7, flatShading: true });
  const geometryBody = new THREE.CylinderGeometry(r, r, h, seg, seg);
  const body = new THREE.Mesh(geometryBody, materialLiquid);
  this.mesh.add(body);

  const geometryLabel = new THREE.CylinderGeometry(r, r, h * .4, seg, seg, 0, Pi / 4);
  const label = new THREE.Mesh(geometryLabel, materialLabel);
  label.position.y += h / 10;
  this.mesh.add(label);

  const geometryNeck = new THREE.CylinderGeometry(r / 3, r, h * .6, seg, seg);
  const neck = new THREE.Mesh(geometryNeck, materialLiquid);
  neck.position.y += h * .8;
  this.mesh.add(neck);

  const geometryCap = new THREE.CylinderGeometry(r * .4, r * .4, 3 * h / 20, seg, seg);
  const cap = new THREE.Mesh(geometryCap, materialLabel);
  cap.position.y += h * 1.2;
  this.mesh.add(cap);
  this.mesh.castShadow = true;
  this.mesh.receiveShadow = true;
  this.mesh.scale.set(sc, sc, sc);
};

const Can = function (r, h, seg, colors) {
  // using the same approach as for the bottle
  this.mesh = new THREE.Object3D();
  const type = Math.floor(Math.random() * 3);
  const materialLiquid = new THREE.MeshPhongMaterial({ color: colors[2 * type], transparent: true, opacity: .6, flatShading: tr.........完整代码请登录后点击上方下载按钮下载查看