FBX Position

by Paul West

HTML

<script src="https://security-press.com/fbx/js/jquery.js"></script>
<script src="https://security-press.com/fbx/js/three.js"></script>
<script src="https://security-press.com/fbx/js/inflate.min.js"></script>
<script src="https://security-press.com/fbx/js/FBXLoader.js"></script>
<script src="https://security-press.com/fbx/js/orbitcontrols.js"></script>

CSS

body {
  margin: 0px;
  background-color: #000000;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 15pt;
  z-index: 100;
}

JavaScript

var scene, camera, renderer, mesh, light, container, geometry, controls;
var mixers = [];
var clock = new THREE.Clock();

function init() {
  container = document.createElement('div');
  document.body.appendChild(container);

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.set(0, 30, 130);

  var gridHelper = new THREE.GridHelper(200, 10);
  scene.add(gridHelper);

  var manager = new THREE.LoadingManager();
  manager.crossOrigin = '';
  manager.onProgress = function(item, loaded, total) {
    console.log(item, loaded, total);
  };

  var loader = new THREE.FBXLoader(manager);
  loader.crossOrigin = '';
  loader.load('https://security-press.com/fbx/model/DigestiveAnimation.fbx', function(object) {

    var box3 = new THREE.Box3().setFromObject(object);
    scene.add(new THREE.Box3Helper(box3, 0xFF0000));
    var shift = box3.getCenter();

    object.position.sub(shift);

    scene.add(new THREE.Box3Helper(new THREE.Box3().setFromObject(object)));

    scene.add(object);
  }, onProgress, onError);



  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.appendChild(renderer.domElement);
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  light = new THREE.HemisphereLight(0xffffff, 0x444444, 1.0);
  light.position.set(0, 1, 0);
  scene.add(light);
  light = new THREE.DirectionalLight(0xffffff, 1.0);
  light.position.set(0, 1, 0);
  scene.add(light);

  animate();
}

var onProgress = function(xhr) {
  if (xhr.lengthComputable) {
    var percentComplete = xhr.loaded / xhr.total * 100;
    console.log(Math.round(percentComplete, 2) + '% downloaded');
  }
};
var onError = function(xhr) {
  console.error(xhr);
};

function animate() {
  requestAnimationFrame(animate);
  /*  if ( mixers.length > 0 ) {
      for ( var i = 0; i < mixers.length; i ++ ) {
        mixers[ i ].update( clock.getDelta() );
     ...