2
0

webgl_loader_scene.html 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - io - scene loader</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. background:#000;
  10. color:#fff;
  11. padding:0;
  12. margin:0;
  13. overflow:hidden;
  14. font-family:georgia;
  15. text-align:center;
  16. }
  17. #info {
  18. position: absolute;
  19. top: 0px; width: 100%;
  20. padding: 5px;
  21. font-family: Monospace;
  22. font-size: 13px;
  23. text-align: center;
  24. z-index:100;
  25. }
  26. #progress {
  27. color:red;
  28. top:7em;
  29. width: 100%;
  30. font-size:3em;
  31. font-variant:small-caps;
  32. font-weight:bold;
  33. position:absolute;
  34. z-index:100;
  35. text-align: center;
  36. text-shadow: #000 0px 0px 10px;
  37. display:none;
  38. }
  39. .shadow {
  40. -moz-box-shadow: 0px 0px 5px #000;
  41. -webkit-box-shadow: 0px 0px 5px #000;
  42. box-shadow: 0px 0px 5px #000;
  43. }
  44. #progressbar {
  45. text-align: center;
  46. background: white;
  47. width: 250px;
  48. height: 10px;
  49. }
  50. #bar {
  51. background:#d00;
  52. width:50px;
  53. height:10px;
  54. }
  55. .enabled {
  56. color: lime!important;
  57. cursor:pointer;
  58. }
  59. .enabled:hover {
  60. text-shadow: #0f0 0px 0px 5px !important;
  61. }
  62. .disabled {
  63. background:gray;
  64. cursor:default;
  65. }
  66. a { color:red }
  67. canvas { pointer-events:none; z-index:10; }
  68. </style>
  69. </head>
  70. <body>
  71. <div id="info">
  72. <a href="http://threejs.org">three.js</a> - scene loader test
  73. </div>
  74. <div id="progress">
  75. <span id="message">Loading ...</span>
  76. <center>
  77. <div id="progressbar" class="shadow"><div id="bar" class="shadow"></div></div>
  78. </center>
  79. </div>
  80. <script src="../build/three.js"></script>
  81. <script src="js/MorphAnimMesh.js"></script>
  82. <script src="js/loaders/collada/Animation.js"></script>
  83. <script src="js/loaders/collada/AnimationHandler.js"></script>
  84. <script src="js/loaders/collada/KeyFrameAnimation.js"></script>
  85. <script src="js/loaders/DDSLoader.js"></script>
  86. <script src="js/loaders/ctm/lzma.js"></script>
  87. <script src="js/loaders/ctm/ctm.js"></script>
  88. <script src="js/loaders/ctm/CTMLoader.js"></script>
  89. <script src="js/loaders/deprecated/SceneLoader.js"></script>
  90. <script src="js/loaders/BinaryLoader.js"></script>
  91. <script src="js/loaders/OBJLoader.js"></script>
  92. <script src="js/loaders/VTKLoader.js"></script>
  93. <script src="js/loaders/STLLoader.js"></script>
  94. <script src="js/loaders/ColladaLoader.js"></script>
  95. <script src="js/loaders/UTF8Loader.js"></script>
  96. <script src="js/loaders/MTLLoader.js"></script>
  97. <script src="js/Detector.js"></script>
  98. <script src="js/libs/stats.min.js"></script>
  99. <script>
  100. if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  101. var SCREEN_WIDTH = window.innerWidth;
  102. var SCREEN_HEIGHT = window.innerHeight;
  103. var container,stats;
  104. var camera, scene, loaded;
  105. var renderer;
  106. var mouseX = 0, mouseY = 0;
  107. var mixers = [];
  108. var windowHalfX = window.innerWidth / 2;
  109. var windowHalfY = window.innerHeight / 2;
  110. var rotatingObjects = [];
  111. var clock = new THREE.Clock();
  112. document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  113. THREE.DefaultLoadingManager.onProgress = function ( item, loaded, total ) {
  114. console.log( item, loaded, total );
  115. };
  116. init();
  117. animate();
  118. function $( id ) {
  119. return document.getElementById( id );
  120. }
  121. function init() {
  122. container = document.createElement( 'div' );
  123. document.body.appendChild( container );
  124. var loadScene = createLoadScene();
  125. camera = loadScene.camera;
  126. scene = loadScene.scene;
  127. renderer = new THREE.WebGLRenderer( { antialias: true } );
  128. renderer.setPixelRatio( window.devicePixelRatio );
  129. renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
  130. renderer.domElement.style.position = "relative";
  131. container.appendChild( renderer.domElement );
  132. renderer.gammaInput = true;
  133. renderer.gammaOutput = true;
  134. stats = new Stats();
  135. container.appendChild( stats.dom );
  136. var callbackProgress = function( progress, result ) {
  137. var bar = 250,
  138. total = progress.totalModels + progress.totalTextures,
  139. loaded = progress.loadedModels + progress.loadedTextures;
  140. if ( total )
  141. bar = Math.floor( bar * loaded / total );
  142. $( "bar" ).style.width = bar + "px";
  143. };
  144. var callbackFinished = function ( result ) {
  145. loaded = result;
  146. $( "message" ).style.display = "none";
  147. $( "progressbar" ).style.display = "none";
  148. result.scene.traverse( function ( object ) {
  149. if ( object.userData.rotating === true ) {
  150. rotatingObjects.push( object );
  151. }
  152. if ( object instanceof THREE.Mesh ) {
  153. if( object.geometry && object.geometry.animations && object.geometry.animations.length > 0 ) {
  154. var mixer = new THREE.AnimationMixer( object );
  155. mixer.clipAction( object.geometry.animations[0] ).play();
  156. mixers.push( mixer );
  157. }
  158. }
  159. } );
  160. //
  161. $( "progress" ).style.display = "none";
  162. camera = loaded.currentCamera;
  163. camera.aspect = window.innerWidth / window.innerHeight;
  164. camera.updateProjectionMatrix();
  165. scene = loaded.scene;
  166. };
  167. $( "progress" ).style.display = "block";
  168. THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
  169. var loader = new THREE.SceneLoader();
  170. loader.addGeometryHandler( "binary", THREE.BinaryLoader );
  171. loader.addGeometryHandler( "ctm", THREE.CTMLoader );
  172. loader.addGeometryHandler( "vtk", THREE.VTKLoader );
  173. loader.addGeometryHandler( "stl", THREE.STLLoader );
  174. loader.addHierarchyHandler( "obj", THREE.OBJLoader );
  175. loader.addHierarchyHandler( "dae", THREE.ColladaLoader );
  176. loader.addHierarchyHandler( "utf8", THREE.UTF8Loader );
  177. loader.callbackProgress = callbackProgress;
  178. loader.load( "scenes/test_scene.js", callbackFinished );
  179. //
  180. window.addEventListener( 'resize', onWindowResize, false );
  181. }
  182. function onWindowResize() {
  183. windowHalfX = window.innerWidth / 2;
  184. windowHalfY = window.innerHeight / 2;
  185. camera.aspect = window.innerWidth / window.innerHeight;
  186. camera.updateProjectionMatrix();
  187. renderer.setSize( window.innerWidth, window.innerHeight );
  188. }
  189. function onDocumentMouseMove( event ) {
  190. mouseX = ( event.clientX - windowHalfX );
  191. mouseY = ( event.clientY - windowHalfY );
  192. }
  193. function createLoadScene() {
  194. var result = {
  195. scene: new THREE.Scene(),
  196. camera: new THREE.PerspectiveCamera( 65, window.innerWidth / window.innerHeight, 1, 1000 )
  197. };
  198. result.camera.position.z = 100;
  199. result.scene.add( result.camera );
  200. var object, geometry, material, light, count = 500, range = 200;
  201. material = new THREE.MeshLambertMaterial( { color:0xffffff } );
  202. geometry = new THREE.BoxGeometry( 5, 5, 5 );
  203. for( var i = 0; i < count; i++ ) {
  204. object = new THREE.Mesh( geometry, material );
  205. object.position.x = ( Math.random() - 0.5 ) * range;
  206. object.position.y = ( Math.random() - 0.5 ) * range;
  207. object.position.z = ( Math.random() - 0.5 ) * range;
  208. object.rotation.x = Math.random() * 6;
  209. object.rotation.y = Math.random() * 6;
  210. object.rotation.z = Math.random() * 6;
  211. object.matrixAutoUpdate = false;
  212. object.updateMatrix();
  213. result.scene.add( object );
  214. }
  215. result.scene.matrixAutoUpdate = false;
  216. light = new THREE.PointLight( 0xffffff );
  217. result.scene.add( light );
  218. light = new THREE.DirectionalLight( 0x111111 );
  219. light.position.x = 1;
  220. result.scene.add( light );
  221. return result;
  222. }
  223. //
  224. function animate() {
  225. requestAnimationFrame( animate );
  226. render();
  227. stats.update();
  228. }
  229. function render() {
  230. var delta = clock.getDelta();
  231. camera.position.x += ( mouseX - camera.position.x ) * .001;
  232. camera.position.y += ( - mouseY - camera.position.y ) * .001;
  233. camera.lookAt( scene.position );
  234. // update skinning
  235. THREE.AnimationHandler.update( delta * 0.75 );
  236. for ( var i = 0; i < rotatingObjects.length; i ++ ) {
  237. var object = rotatingObjects[ i ];
  238. if ( object.userData.rotateX ) object.rotation.x += 1 * delta;
  239. if ( object.userData.rotateY ) object.rotation.y += 0.5 * delta;
  240. }
  241. for ( var i = 0; i < mixers.length; i ++ ) {
  242. mixers[ i ].update( delta );
  243. }
  244. renderer.render( scene, camera );
  245. }
  246. </script>
  247. </body>
  248. </html>