javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


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

<head>
  <title>three.js webgl - FBX loader</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <style>
    body {
      font-family: Monospace;
      background-color: #000;
      color: #fff;
      margin: 0px;
      overflow: hidden;
    }

    #info {
      color: #fff;
      position: absolute;
      top: 10px;
      width: 100%;
      text-align: center;
      z-index: 100;
      display: block;
    }

    #info a,
    .button {
      color: #f00;
      font-weight: bold;
      text-decoration: underline;
      cursor: pointer
    }
  </style>
</head>

<body>
  <div id="info">
    <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - FBXLoader test
  </div>

  <script src="../build/three.js"></script>

  <script src="js/controls/OrbitControls.js"></script>

  <script src="js/curves/NURBSCurve.js"></script>
  <script src="js/curves/NURBSUtils.js"></script>
  <script src="js/loaders/FBXLoader.js"></script>

  <script src="js/Detector.js"></script>
  <script src="js/libs/stats.min.js"></script>
  <script src="js/libs/inflate.min.js"></script>

  <script>

    var container, stats, controls;
    var camera, scene, renderer, light;

    var clock = new THREE.Clock();

    var mixers = [];

    init();

    function init() {

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

      camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);

      scene = new THREE.Scene();

      // grid
      var gridHelper = new THREE.GridHelper(28, 28, 0x303030, 0x303030);
      gridHelper.position.set(0, - 0.04, 0);
      scene.add(gridHelper);

      // stats
      stats = new Stats();
      container.appendChild(stats.dom);

      // model
      var manager = new THREE.LoadingManager();
      manager.onProgress = function (item, loaded, total) {

        // console.log( item, loaded, total );

      };

      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);

      };

      var loader = new THREE.FBXLoader(manager);
      // loader.load('models/fbx/ASCIIandBinary/defeat.bin.fbx', function (object) {
      // loader.load('models/fbx/ASCIIandBinary/defeat.fbx', function (object) {
      // loader.load('models/fbx/ASCIIandBinary/defeat_30fps.fbx', function (object) {
      loader.load('models/fbx/ASCIIandBinary/nao_ball.bin.fbx', function (object) {
      // loader.load('models/fbx/ASCIIandBinary/nao_ball.fbx', function (object) {

        if (object.animations[0]) {
          object.mixer = new THREE.AnimationMixer(object);
          mixers.push(object.mixer);

          var action = object.mixer.clipAction(object.animations[0]);
          action.play();
        }

        console.log(object);
        object.scale.multiplyScalar(0.1);
        scene.add(object);


      }, onProgress, onError);

      renderer = new THREE.WebGLRenderer();
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setClearColor(0xffffff, 1.0)
      container.appendChild(renderer.domElement);

      // controls, camera
      controls = new THREE.OrbitControls(camera, renderer.domElement);
      controls.target.set(0, 12, 0);
      camera.position.set(2, 18, 28);
      controls.update();

      window.addEventListener('resize', onWindowResize, false);

      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();

    }

    function onWindowResize() {

      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();

      renderer.setSize(window.innerWidth, window.innerHeight);

    }

    //

    function animate() {

      requestAnimationFrame(animate);

      if (mixers.length > 0) {

        for (var i = 0; i < mixers.length; i++) {

          mixers[i].update(clock.getDelta());

        }

      }

      stats.update();

      render();

    }

    function render() {

      renderer.render(scene, camera);

    }

  </script>

</body>

</html>