webgl_loader_sea3d.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - sea3d</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/>
  12. Asset by <a href="http://vhalldez.cgsociety.org/" target="_blank" rel="noopener">Valdez Araujo</a>.
  13. Geometry Compression with <a href="https://github.com/google/draco" target="_blank" rel="noopener">Google Draco</a> and content with LZMA using <a href="http://sunag.github.io/sea3d/IO/index.html" style="color:#FFFFFF" target="_blank">SEA3D I.O.</a> Tools<br>
  14. </div>
  15. <script src="js/libs/draco/draco_decoder.js"></script>
  16. <script type="module">
  17. import * as THREE from '../build/three.module.js';
  18. import { OrbitControls } from './jsm/controls/OrbitControls.js';
  19. import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
  20. import { RenderPass } from './jsm/postprocessing/RenderPass.js';
  21. import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
  22. import { CopyShader } from './jsm/shaders/CopyShader.js';
  23. import { ColorCorrectionShader } from './jsm/shaders/ColorCorrectionShader.js';
  24. import { VignetteShader } from './jsm/shaders/VignetteShader.js';
  25. import { SEA3D } from './jsm/loaders/sea3d/SEA3DLoader.js';
  26. import './jsm/loaders/sea3d/SEA3DLZMA.js'; // sea3d lzma extension
  27. import './jsm/loaders/sea3d/SEA3DDraco.js'; // sea3d draco extension
  28. import Stats from './jsm/libs/stats.module.js';
  29. console.log( "Visit https://github.com/sunag/sea3d to all codes and builds under development." );
  30. var container, stats;
  31. var camera, scene, renderer, composer;
  32. var loader;
  33. // Initialize Three.JS
  34. init();
  35. //
  36. // SEA3D Loader
  37. //
  38. loader = new SEA3D( {
  39. autoPlay: true, // Auto play animations
  40. container: scene, // Container to add models
  41. progressive: true // Progressive download
  42. } );
  43. loader.onComplete = function () {
  44. // Get camera from SEA3D Studio
  45. // use loader.get... to get others objects
  46. //var cam = loader.getCamera( "Camera007" );
  47. //camera.position.copy( cam.position );
  48. //camera.rotation.copy( cam.rotation );
  49. console.log( "SEA3D asset loaded!" );
  50. };
  51. loader.load( './models/sea3d/mascot.draco.tjs.sea' );
  52. //
  53. function init() {
  54. scene = new THREE.Scene();
  55. scene.background = new THREE.Color( 0x333333 );
  56. container = document.createElement( 'div' );
  57. document.body.appendChild( container );
  58. camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
  59. camera.position.set( 1000, 1000, 1000 );
  60. camera.lookAt( 0, 0, 0 );
  61. renderer = new THREE.WebGLRenderer();
  62. renderer.setPixelRatio( window.devicePixelRatio );
  63. renderer.setSize( window.innerWidth, window.innerHeight );
  64. container.appendChild( renderer.domElement );
  65. var controls = new OrbitControls( camera, renderer.domElement );
  66. stats = new Stats();
  67. container.appendChild( stats.dom );
  68. // post-processing
  69. composer = new EffectComposer( renderer );
  70. var renderPass = new RenderPass( scene, camera );
  71. var copyPass = new ShaderPass( CopyShader );
  72. composer.addPass( renderPass );
  73. var vh = 1.4, vl = 1.2;
  74. var colorCorrectionPass = new ShaderPass( ColorCorrectionShader );
  75. colorCorrectionPass.uniforms[ "powRGB" ].value = new THREE.Vector3( vh, vh, vh );
  76. colorCorrectionPass.uniforms[ "mulRGB" ].value = new THREE.Vector3( vl, vl, vl );
  77. composer.addPass( colorCorrectionPass );
  78. var vignettePass = new ShaderPass( VignetteShader );
  79. vignettePass.uniforms[ "darkness" ].value = 1.0;
  80. composer.addPass( vignettePass );
  81. composer.addPass( copyPass );
  82. // events
  83. window.addEventListener( 'resize', onWindowResize, false );
  84. }
  85. function onWindowResize() {
  86. camera.aspect = window.innerWidth / window.innerHeight;
  87. camera.updateProjectionMatrix();
  88. composer.setSize( window.innerWidth, window.innerHeight );
  89. renderer.setSize( window.innerWidth, window.innerHeight );
  90. }
  91. //
  92. var clock = new THREE.Clock();
  93. function animate() {
  94. var delta = clock.getDelta();
  95. requestAnimationFrame( animate );
  96. // Update SEA3D Animations
  97. SEA3D.AnimationHandler.update( delta );
  98. render( delta );
  99. stats.update();
  100. }
  101. function render( dlt ) {
  102. //renderer.render( scene, camera );
  103. composer.render( dlt );
  104. }
  105. animate();
  106. </script>
  107. </body>
  108. </html>