three实现三维飞行孤岛小人行走动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维飞行孤岛小人行走动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
<style>
/**
* Author: Vinces
* Website: https://vinces.io
* v.0.1
*/
@import url("https://fonts.googleapis.com/css?family=BenchNine");
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: BenchNine, sans-serif;
}

.world {
  background: #2980b9;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #2980b9, #6dd5fa, #ffffff);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #2980b9, #6dd5fa, #ffffff);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.input-group {
  position: absolute;
  top: 5%;
  right: 5%;
  padding: 1rem;
  color: black;
  font-size: 18px;
  z-index: 999;
}
.input-group > * {
  display: block;
}
.input-group > * + * {
  margin-top: 0.5rem;
}

.copy {
  margin: 15px;
  font-size: 14px;
  font-weight: bold;
  color: black;
  position: absolute;
  bottom: 0;
  left: 0%;
  z-index: 999;
}
.copy a {
  color: #2980b9;
  text-decoration: none;
  font-size: 16px;
}
</style>



</head>

<body >
  <canvas data-canvas class="world"></canvas>

<div class="input-group">
	<label for="bothAngle">Move Character (Wip)</label>
	<input type="range" min="-90" max="90" value='0' data-input-both id="bothAngle">
</div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.123.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>
      <script >

var container = { width: window.innerWidth, height: window.innerHeight };

/**
* HELPERS
* ------------------------------------------------------------------------
*/
// Rotate arms / legs
const degreesToRadians = degrees => {
  return degrees * (Math.PI / 180);
};
// Add shadow support to object
const shadowSupport = group => {
  group.traverse(object => {
    if (object instanceof THREE.Mesh) {
      object.castShadow = true;
      object.receiveShadow = true;
    }
  });
};
// Get random number
const randomize = (min, max, float = false) => {
  const val = Math.random() * (max - min) + min;
  if (float) {
    return val;
  }
  return Math.floor(val);
};
// Box Helper 
const boxHelperSupport = group => {
  const box = new THREE.BoxHelper(group, 0xffff00);
  scene.add(box);
};
// Random MORE VERTICES
const map = (val, smin, smax, emin, emax) => (emax - emin) * (val - smin) / (smax - smin) + emin;
const jitter = (geo, per) => geo.vertices.forEach(v => {
  v.x += map(Math.random(), 0, 1, -per, per);
  v.y += map(Math.random(), 0, 1, -per, per);
  v.z += map(Math.random(), 0, 1, -per, per);
});
// Cut Object helpers
const chopBottom = (geo, bottom) => geo.vertices.forEach(v => v.y = Math.max(v.y, bottom));
const chopTop = (geo, top) => geo.vertices.forEach(v => v.y = Math.min(v.y, top));



/**
* OBJECTS : SCENE, ISLAND, BBLOCK
* ------------------------------------------------------------------------
*/
class Scene {
  constructor(params) {
    this.params = {
      x: 0,
      y: 0,
      z: 0,
      aspectRatio: container.width / container.height,
      fieldOfView: 60,
      nearPlane: 0.1,
      farPlane: 3000,
      ...params };

    this.camera;
    this.scene;
    this.controls;
    this.renderer;
  }
  initStats() {
    // STATS
    this.stats = new Stats();
    this.stats.setMode(0); // 0: fps, 1: ms, 2: mb, 3+: custom
    // align top-left
    this.stats.domElement.style.position = "absolute";
    this.stats.domElement.style.left = "0px";
    this.stats.domElement.style.top = "0px";
    document.body.appendChild(this.stats.domElement);
  }
  initScene() {
    this.scene = new THREE.Scene();
    this.scene.background = null; /*new THREE.Color(0xa3e2ff)*/
  }
  initCamera() {
    this.camera = new THREE.PerspectiveCamera(
    this.params.fieldOfView,
    this.params.aspectRatio,
    this.params.nearPlane,
    this.params.farPlane);

    //this.camera.position.set(0, 3.5, 22);
    this.camera.updateProjectionMatrix();
    this.camera.position.set(6, 8.5, 25);
    this.camera.lookAt(this.scene.position);
    //this.camera.position.z = 12;
    // call this only in static scenes (i.e., if there is no animation loop)
  }
  initControls() {
    this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
    //call this only in static scenes (i.e., if there is no animation loop)
    //controls.addEventListener( 'change', initRenderer );
    // Force control
    // controls.minPolarAngle = -Math.PI*.45;
    // controls.maxPolarAngle = Math.PI*.45;
    this.controls.minDistance = 10;
    this.controls.maxDistance = 80;
  }
  initRenderer() {
    let pixelRatio = window.devicePixelRatio;
    let AA = true;
    if (pixelRatio > 1) {AA = false;}
    const canvas = document.querySelector("[data-canvas]");
    this.renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: AA, powerPreference: "high-performance" });
    this.renderer.setSize(container.width, container.height);
    this.renderer.setPixelRatio(window.devicePixelRatio);
    //renderer.setClearColor(0xc5f5f5, 0);
    this.renderer.physicallyCorrectLights; /*accurate lighting that uses SI units.*/
    this.renderer.shadowMap.enabled = true;
    this.renderer.shadowMap.soft = true;
  }
  initLights() {
    this.directionalLight = new THREE.DirectionalLight(0xffffff, 0.4, 100);
    this.light = new THREE.Hemisphe.........完整代码请登录后点击上方下载按钮下载查看