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

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

代码语言：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, -.........完整代码请登录后点击上方下载按钮下载查看