webgl_loader_sea3d_hierarchy.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - sea3d / hierarchy</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. font-family: Monospace;
  10. background-color: #000;
  11. margin: 0px;
  12. overflow: hidden;
  13. }
  14. #info {
  15. color: #fff;
  16. position: absolute;
  17. top: 10px;
  18. width: 100%;
  19. text-align: center;
  20. z-index: 100;
  21. display:block;
  22. }
  23. a { color: white }
  24. </style>
  25. </head>
  26. <body>
  27. <div id="info">
  28. <a href="http://threejs.org" target="_blank">Three.JS</a> - Exported by <a href="https://github.com/sunag/sea3d" style="color:#FFFFFF" target="_blank">SEA3D Exporter</a> and edited by <a href="https://github.com/sunag/sea3d" style="color:#FFFFFF" target="_blank">SEA3D Studio</a>. Asset by <a href="http://vhalldez.cgsociety.org/" style="color:#FFFFFF" target="_blank">Valdez Araujo</a>
  29. <br/>
  30. <br/>High geometry compression with <a href="https://github.com/amd/rest3d/tree/master/server/o3dgc" style="color:#FFFFFF" target="_blank">Open3DGC</a> and LZMA<br>
  31. </div>
  32. <script src="../build/three.js"></script>
  33. <script src="js/controls/OrbitControls.js"></script>
  34. <script src="js/postprocessing/EffectComposer.js"></script>
  35. <script src="js/postprocessing/RenderPass.js"></script>
  36. <script src="js/postprocessing/ShaderPass.js"></script>
  37. <script src="js/postprocessing/MaskPass.js"></script>
  38. <script src="js/shaders/CopyShader.js"></script>
  39. <script src="js/shaders/ColorCorrectionShader.js"></script>
  40. <script src="js/shaders/VignetteShader.js"></script>
  41. <script src="js/loaders/sea3d/SEA3D.js"></script>
  42. <script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
  43. <script src="js/loaders/sea3d/SEA3DLoader.js"></script>
  44. <script src="js/libs/o3dgc.js"></script>
  45. <script src="js/loaders/sea3d/SEA3DGC.js"></script>
  46. <script src="js/Detector.js"></script>
  47. <script src="js/libs/stats.min.js"></script>
  48. <script>
  49. if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  50. console.log("Visit https://github.com/sunag/sea3d to all codes and builds under development.");
  51. var container, stats;
  52. var camera, scene, renderer, composer, controls;
  53. var loader;
  54. // Initialize Three.JS
  55. init();
  56. //
  57. // SEA3D Loader
  58. //
  59. loader = new THREE.SEA3D( {
  60. autoPlay : false, // Auto play animations
  61. container : scene // Container to add models
  62. } );
  63. loader.onComplete = function( e ) {
  64. // play all animations
  65. for(var i = 0; i < loader.meshes.length; i++) {
  66. if (loader.meshes[i].animator)
  67. loader.meshes[i].animator.play( "root" );
  68. }
  69. // Get the first camera from SEA3D Studio
  70. // use loader.get... to get others objects
  71. var cam = loader.cameras[0];
  72. camera.position.copy( cam.position );
  73. camera.rotation.copy( cam.rotation );
  74. controls = new THREE.OrbitControls( camera );
  75. animate();
  76. };
  77. // Open3DGC - Export by SEA3D Studio
  78. loader.load( './models/sea3d/robot.o3dgc.tjs.sea' );
  79. //
  80. function init() {
  81. scene = new THREE.Scene();
  82. container = document.createElement( 'div' );
  83. document.body.appendChild( container );
  84. camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
  85. renderer = new THREE.WebGLRenderer();
  86. renderer.setPixelRatio( window.devicePixelRatio );
  87. renderer.setSize( window.innerWidth, window.innerHeight );
  88. renderer.setClearColor( 0x333333, 1 );
  89. renderer.shadowMap.enabled = true;
  90. renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  91. container.appendChild( renderer.domElement );
  92. stats = new Stats();
  93. container.appendChild( stats.dom );
  94. // post-processing
  95. composer = new THREE.EffectComposer( renderer );
  96. var renderPass = new THREE.RenderPass( scene, camera );
  97. composer.addPass( renderPass );
  98. var vh = 1.4, vl = 1.2;
  99. var colorCorrectionPass = new THREE.ShaderPass( THREE.ColorCorrectionShader );
  100. colorCorrectionPass.uniforms[ "powRGB" ].value = new THREE.Vector3( vh, vh, vh );
  101. colorCorrectionPass.uniforms[ "mulRGB" ].value = new THREE.Vector3( vl, vl, vl );
  102. composer.addPass( colorCorrectionPass );
  103. var vignettePass = new THREE.ShaderPass( THREE.VignetteShader );
  104. vignettePass.uniforms[ "darkness" ].value = 1.0;
  105. composer.addPass( vignettePass );
  106. var copyPass = new THREE.ShaderPass( THREE.CopyShader );
  107. copyPass.renderToScreen = true;
  108. composer.addPass( copyPass );
  109. // events
  110. window.addEventListener( 'resize', onWindowResize, false );
  111. }
  112. function onWindowResize() {
  113. camera.aspect = window.innerWidth / window.innerHeight;
  114. camera.updateProjectionMatrix();
  115. composer.setSize( window.innerWidth, window.innerHeight );
  116. renderer.setSize( window.innerWidth, window.innerHeight );
  117. }
  118. //
  119. var clock = new THREE.Clock();
  120. function animate() {
  121. var delta = clock.getDelta();
  122. requestAnimationFrame( animate );
  123. // Update SEA3D Animations
  124. THREE.SEA3D.AnimationHandler.update( delta );
  125. render( delta );
  126. stats.update();
  127. }
  128. function render( dlt ) {
  129. //renderer.render( scene, camera );
  130. composer.render( dlt );
  131. }
  132. </script>
  133. </body>
  134. </html>