webgl_loader_sea3d_hierarchy.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  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. <link type="text/css" rel="stylesheet" href="main.css">
  8. </head>
  9. <body>
  10. <div id="info">
  11. <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Exported by <a href="https://github.com/sunag/sea3d" target="_blank" rel="noopener">SEA3D Exporter</a> and edited by <a href="https://github.com/sunag/sea3d" target="_blank" rel="noopener">SEA3D Studio</a>.<br/>Asset by <a href="http://vhalldez.cgsociety.org/" target="_blank" rel="noopener">Valdez Araujo</a>.
  12. Geometry compression lossless with LZMA.
  13. </div>
  14. <script type="module">
  15. import {
  16. Vector3,
  17. Color,
  18. Clock,
  19. PerspectiveCamera,
  20. PCFSoftShadowMap,
  21. Scene,
  22. WebGLRenderer
  23. } from "../build/three.module.js";
  24. import { OrbitControls } from './jsm/controls/OrbitControls.js';
  25. import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
  26. import { RenderPass } from './jsm/postprocessing/RenderPass.js';
  27. import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
  28. import { MaskPass } from './jsm/postprocessing/MaskPass.js';
  29. import { CopyShader } from './jsm/shaders/CopyShader.js';
  30. import { ColorCorrectionShader } from './jsm/shaders/ColorCorrectionShader.js';
  31. import { VignetteShader } from './jsm/shaders/VignetteShader.js';
  32. import { SEA3D } from './jsm/loaders/sea3d/SEA3DLoader.js';
  33. import './jsm/loaders/sea3d/SEA3DLZMA.js'; // sea3d lzma extension
  34. import Stats from './jsm/libs/stats.module.js';
  35. console.log( "Visit https://github.com/sunag/sea3d to all codes and builds under development." );
  36. var container, stats;
  37. var camera, scene, renderer, composer;
  38. var loader;
  39. // Initialize Three.JS
  40. init();
  41. //
  42. // SEA3D Loader
  43. //
  44. loader = new SEA3D( {
  45. autoPlay: false, // Auto play animations
  46. container: scene // Container to add models
  47. } );
  48. loader.onComplete = function () {
  49. // play all animations
  50. for ( var i = 0; i < loader.meshes.length; i ++ ) {
  51. if ( loader.meshes[ i ].animator )
  52. loader.meshes[ i ].animator.play( "root" );
  53. }
  54. // Get the first camera from SEA3D Studio
  55. // use loader.get... to get others objects
  56. var cam = loader.cameras[ 0 ];
  57. camera.position.copy( cam.position );
  58. camera.rotation.copy( cam.rotation );
  59. new OrbitControls( camera, renderer.domElement );
  60. animate();
  61. };
  62. // Open3DGC - Export by SEA3D Studio
  63. loader.load( './models/sea3d/robot.tjs.sea' );
  64. //
  65. function init() {
  66. scene = new Scene();
  67. scene.background = new Color( 0x333333 );
  68. container = document.createElement( 'div' );
  69. document.body.appendChild( container );
  70. camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
  71. renderer = new WebGLRenderer();
  72. renderer.setPixelRatio( window.devicePixelRatio );
  73. renderer.setSize( window.innerWidth, window.innerHeight );
  74. renderer.shadowMap.enabled = true;
  75. renderer.shadowMap.type = PCFSoftShadowMap;
  76. container.appendChild( renderer.domElement );
  77. stats = new Stats();
  78. container.appendChild( stats.dom );
  79. // post-processing
  80. composer = new EffectComposer( renderer );
  81. var renderPass = new RenderPass( scene, camera );
  82. composer.addPass( renderPass );
  83. var vh = 1.4, vl = 1.2;
  84. var colorCorrectionPass = new ShaderPass( ColorCorrectionShader );
  85. colorCorrectionPass.uniforms[ "powRGB" ].value = new Vector3( vh, vh, vh );
  86. colorCorrectionPass.uniforms[ "mulRGB" ].value = new Vector3( vl, vl, vl );
  87. composer.addPass( colorCorrectionPass );
  88. var vignettePass = new ShaderPass( VignetteShader );
  89. vignettePass.uniforms[ "darkness" ].value = 1.0;
  90. composer.addPass( vignettePass );
  91. var copyPass = new ShaderPass( CopyShader );
  92. composer.addPass( copyPass );
  93. // events
  94. window.addEventListener( 'resize', onWindowResize, false );
  95. }
  96. function onWindowResize() {
  97. camera.aspect = window.innerWidth / window.innerHeight;
  98. camera.updateProjectionMatrix();
  99. composer.setSize( window.innerWidth, window.innerHeight );
  100. renderer.setSize( window.innerWidth, window.innerHeight );
  101. }
  102. //
  103. var clock = new Clock();
  104. function animate() {
  105. var delta = clock.getDelta();
  106. requestAnimationFrame( animate );
  107. // Update SEA3D Animations
  108. SEA3D.AnimationHandler.update( delta );
  109. render( delta );
  110. stats.update();
  111. }
  112. function render( dlt ) {
  113. //renderer.render( scene, camera );
  114. composer.render( dlt );
  115. }
  116. </script>
  117. </body>
  118. </html>