webgl_loader_assimp.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - Assimp - Binary</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <style>
  8. body {
  9. color: #000;
  10. font-family: Monospace;
  11. font-size: 13px;
  12. text-align: center;
  13. background-color: #000;
  14. margin: 0px;
  15. overflow: hidden;
  16. }
  17. #info {
  18. color: #fff;
  19. position: absolute;
  20. top: 10px;
  21. width: 100%;
  22. text-align: center;
  23. z-index: 100;
  24. display:block;
  25. }
  26. a { color: skyblue }
  27. .button { background:#999; color:#eee; padding:0.2em 0.5em; cursor:pointer }
  28. .highlight { background:orange; color:#fff; }
  29. span {
  30. display: inline-block;
  31. width: 60px;
  32. float: left;
  33. text-align: center;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <div id="container"></div>
  39. <div id="info">
  40. <a href="http://threejs.org" target="_blank">three.js</a>
  41. <a href="https://github.com/Virtulous" target="_blank">Assimp Binary File format</a>
  42. <div>Assbin loader by <a href="https://virtulo.us" target="_blank">Virtulous</a></div>
  43. <div>Octaminator model from <a href="http://opengameart.org/content/octaminator-engine-ready" target="_blank">Teh_Bucket and raymoohawk</a></div>
  44. </div>
  45. <script src="../build/three.js"></script>
  46. <script src="js/loaders/AssimpLoader.js"></script>
  47. <script src="js/Detector.js"></script>
  48. <script src="js/libs/stats.min.js"></script>
  49. <script src="js/controls/OrbitControls.js"></script>
  50. <script>
  51. if ( !Detector.webgl ) Detector.addGetWebGLMessage();
  52. var container, stats;
  53. var camera, scene, renderer;
  54. var clock = new THREE.Clock();
  55. var animation;
  56. init();
  57. function init() {
  58. container = document.getElementById( 'container' );
  59. camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 10000 );
  60. camera.position.set( 600, 1150, 5 );
  61. camera.up.set( 0, 0, 1 );
  62. camera.lookAt( new THREE.Vector3( -100, 0, 0 ) );
  63. scene = new THREE.Scene();
  64. var light = new THREE.DirectionalLight( 0xffffff, 1.5 );
  65. light.position.set( 0, 4, 4 ).normalize();
  66. scene.add( light );
  67. var ambient = new THREE.AmbientLight( 0x333333, 1.5 );
  68. scene.add( ambient );
  69. renderer = new THREE.WebGLRenderer( {
  70. antialias: true
  71. } );
  72. renderer.setClearColor( 0xfff4e5 );
  73. renderer.setPixelRatio( window.devicePixelRatio );
  74. renderer.setSize( window.innerWidth, window.innerHeight );
  75. renderer.sortObjects = false;
  76. container.appendChild( renderer.domElement );
  77. renderer.setClearColor( new THREE.Color( 0, 0, 0 ), 1 );
  78. var controls = new THREE.OrbitControls( camera, renderer.domElement );
  79. controls.target.set(-100,0,0);
  80. controls.update();
  81. stats = new Stats();
  82. container.appendChild( stats.dom );
  83. var loader = new THREE.AssimpLoader();
  84. loader.load( "./models/assbin/squid.assbin", function( err, object ) {
  85. object.object.rotation.x = Math.PI / 2;
  86. scene.add( object.object );
  87. animation = object.animation;
  88. } );
  89. window.addEventListener( 'resize', onWindowResize, false );
  90. animate();
  91. }
  92. function onWindowResize() {
  93. camera.aspect = window.innerWidth / window.innerHeight;
  94. camera.updateProjectionMatrix();
  95. renderer.setSize( window.innerWidth, window.innerHeight );
  96. }
  97. var now = performance.now();
  98. function animate() {
  99. var delta = performance.now() - now;
  100. now += delta;
  101. requestAnimationFrame( animate, renderer.domElement );
  102. renderer.render( scene, camera );
  103. if ( animation )
  104. animation.setTime( now / 1000 );
  105. stats.update();
  106. }
  107. </script>
  108. </body>
  109. </html>