three实现三维男人在草坪上行走骨骼动画效果代码-html代码-BFW代码库

three实现三维男人在草坪上行走骨骼动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维男人在草坪上行走骨骼动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  height: 100%;
  margin: 0;
  padding: 0;
  color: #ccc;
  background-color: #404040;
  font-family: Monospace;
  font-size: 13px;
  overflow: hidden;
}
#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#message > div {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
}
.error {
  color: orange;
}
.fade {
  opacity: 1;
  transition: opacity 1s linear;
}
.fade[hidden] {
  display: inherit;
  visibility: hidden;
  opacity: 0 !important;
  transition: visibility 0s 1s, opacity 1s linear;
}
</style>




</head>

<body>
  <div id="container" class="fade" hidden></div>
<div id="message" class="fade">
  <div>Loading &hellip;</div>
</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.84.js"></script>
      <script  >
// constants

const SCENE_URL = '//repo.bfw.wiki/bfwrepo/json/human_scene.json';
const SUPPORTS_WEBGL = function () {
  try {
    var canvas = document.createElement('canvas');
    return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
  } catch (e) {
    return false;
  }
}();

// dom

const elContainer = document.getElementById('container');
const elMsg = document.getElementById('message');
const elMsgContent = elMsg.firstChild;

// globals

var width = elContainer.clientWidth,height = elContainer.clientHeight,aspect = width / height;
var halfX = width / 2,halfY = height / 2;
var mouseX = 0,mouseY = 0;
var renderer = null,gl = null,clock = null,delta = 0;
var cameras = [],camera = null;
var ground = null,human = null,skeleton = null,helper = null,mixer = null;
var center = new THREE.Vector3(0, 1, 0);

// start app

if (!SUPPORTS_WEBGL) {
  elMsgContent.innerHTML = 'WebGL is not supported!';
  elMsgContent.className = 'error';
} else {
  init();
  loadScene(SCENE_URL);
}

// initialize

function init() {
  renderer = new THREE.WebGLRenderer({ antialias: true, stencil: true });
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  renderer.shadowMap.renderReverseSided = false;
  renderer.shadowMap.renderSingleSided = false;
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(width, height);
  renderer.autoClear = false;
  renderer.autoClearColor = false;
  renderer.autoClearDepth = false;
  renderer.autoClearStencil = false;
  elContainer.appendChild(renderer.domElement);
  gl = renderer.context; // need a context ref for stencil testing
  clock = new THREE.Clock();
  window.addEventListener('unload', onWindowUnload, false);
}

// load

function loadScene(url) {
  showMessage('Loading scene ...');
  new THREE.ObjectLoader().load(
  url,
  result => {
    showMessage('Initializing Scene &hellip;');
    scene = result;
    scene.updateMatrixWorld();
    const materials = scene.getObjectByName('SkyBox').material.materials;
    const envMap = new THREE.CubeTexture();
    envMap.images[0] = materials[0].map.image;
    envMap.images[1] = materials[1].map.image;
    envMap.images[2] = materials[4].map.image;
    envMap.images[3] = materials[5].map.image;
    envMap.images[4] = materials[2].map.image;
    envMap.images[5] = materials[3].map.image;
    envMap.needsUpdate = true;
    camera = scene.getObjectByName('MainCamera');
    camera.userData.fov =.........完整代码请登录后点击上方下载按钮下载查看