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.HemisphereLight(0xffffff, 0xb3858c, 0.9);

    this.scene.add(this.light);
    this.scene.add(this.directionalLight);

    this.directionalLight.position.set(10, 12, 8);
    this.directionalLight.castShadow = true;
    this.directionalLight.receiveShadow = true;
    this.directionalLight.shadow.mapSize.width = 512; // default
    this.directionalLight.shadow.mapSize.height = 512; // default
    this.directionalLight.shadow.camera.near = 0.5; // default
    this.directionalLight.shadow.camera.far = 500;
  }
  render() {
    this.stats.begin();
    requestAnimationFrame(this.render.bind(this));
    this.renderer.render(this.scene, this.camera);
    this.stats.end();
  }
  init() {
    this.initStats();
    this.initScene();
    this.initCamera();
    this.initRenderer();
    this.initControls();
    this.initLights();
  }}


class Island {
  constructor(scenesss, params) {
    this.params = {
      x: 0,
      y: 0,
      z: 0,
      herbs: 2,
      ...params };


    // Create group and add to scene
    this.island = new THREE.Group();
    scenesss.add(this.island);

    // Position according to params
    this.island.position.x = this.params.x;
    this.island.position.y = this.params.y;
    this.island.position.z = this.params.z;

    // TEXTURES
    this.cloudMaterial = new THREE.MeshPhongMaterial({ color: 0xdef9ff, transparent: true, opacity: 0.8, flatShading: true });
    this.greenMaterial = new THREE.MeshPhongMaterial({ color: 0x379351, flatShading: true });
    this.earthMaterial = new THREE.MeshPhongMaterial({ color: 0x664e31, flatShading: true });
    this.stoneMaterial = new THREE.MeshLambertMaterial({ color: 0x9eaeac });
  }
  drawGround() {
    this.ground = new THREE.Group();
    const geoGround = new THREE.CylinderGeometry(7, 2, 9, 12, 5);
    jitter(geoGround, 0.6);
    geoGround.translate(0, -0.5, 0);
    const earth = new THREE.Mesh(geoGround, this.earthMaterial);

    const geoGreen = new THREE.CylinderGeometry(7.4, 5.5, 3.7, 30, 2);
    jitter(geoGreen, 0.2);
    geoGreen.translate(0, 3.1, 0);
    const green = new THREE.Mesh(geoGreen, this.greenMaterial);

    const geoGroundParticule = new THREE.TetrahedronGeometry(randomize(0.5, 1.5), randomize(2, 3));
    jitter(geoGroundParticule, 0.2);
    //geoGroundParticule.translate(-5, randomize(-4, -1, true), randomize(-2, 2, true));
    const particule = new THREE.Mesh(geoGroundParticule, this.earthMaterial);
    particule.scale.set(randomize(1, 1.5, true), randomize(1, 1.8, true), randomize(1, 1.5, true));
    particule.position.set(-5, randomize(-4, -1, true), randomize(-2, 2, true));
    this.ground.add(particule);

    this.ground.add(earth);
    this.ground.add(green);
    this.ground.position.y = -5.6;
    shadowSupport(this.ground);
    this.island.add(this.ground);
  }
  drawCloud() {
    this.clouds = new THREE.Group();

    const geoCloud = new THREE.SphereGeometry(2, 6, 6);
    jitter(geoCloud, 0.2);
    const cloud =.........完整代码请登录后点击上方下载按钮下载查看