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"></scr.........完整代码请登录后点击上方下载按钮下载查看