webgl_loader_collada.html 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - collada</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:#777;
  10. padding:0;
  11. margin:0;
  12. font-weight: bold;
  13. overflow:hidden;
  14. }
  15. #info {
  16. position: absolute;
  17. top: 0px;
  18. width: 100%;
  19. color: #ffffff;
  20. padding: 5px;
  21. font-family:Monospace;
  22. font-size:13px;
  23. text-align:center;
  24. }
  25. a {
  26. color: #ffffff;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div id="container"></div>
  32. <div id="info">
  33. <a href="https://threejs.org" target="_blank">three.js</a> -
  34. monster by <a href="http://www.3drt.com/downloads.htm" target="_blank">3drt</a>
  35. </div>
  36. <script src="../build/three.js"></script>
  37. <script src="js/loaders/ColladaLoader.js"></script>
  38. <script src="js/controls/OrbitControls.js"></script>
  39. <script src="js/Detector.js"></script>
  40. <script src="js/libs/stats.min.js"></script>
  41. <script>
  42. if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  43. var container, stats;
  44. var camera, scene, renderer, controls;
  45. init();
  46. animate();
  47. function init() {
  48. container = document.getElementById( 'container' );
  49. camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
  50. camera.position.set( 7, 5, 7 );
  51. scene = new THREE.Scene();
  52. // collada
  53. var loader = new THREE.ColladaLoader();
  54. loader.options.convertUpAxis = true;
  55. loader.load( './models/collada/monster/monster.dae', function ( collada ) {
  56. var object = collada.scene;
  57. object.scale.set( 0.0025, 0.0025, 0.0025 );
  58. object.position.set( - 2, 0.2, 0 );
  59. scene.add( object );
  60. } );
  61. //
  62. var gridHelper = new THREE.GridHelper( 10, 20 );
  63. scene.add( gridHelper );
  64. //
  65. var ambientLight = new THREE.AmbientLight( 0xcccccc );
  66. scene.add( ambientLight );
  67. var directionalLight = new THREE.DirectionalLight( 0xffffff );
  68. directionalLight.position.set( 0, 1, -1 ).normalize();
  69. scene.add( directionalLight );
  70. //
  71. renderer = new THREE.WebGLRenderer();
  72. renderer.setPixelRatio( window.devicePixelRatio );
  73. renderer.setSize( window.innerWidth, window.innerHeight );
  74. container.appendChild( renderer.domElement );
  75. //
  76. controls = new THREE.OrbitControls( camera, renderer.domElement );
  77. //
  78. stats = new Stats();
  79. container.appendChild( stats.dom );
  80. //
  81. window.addEventListener( 'resize', onWindowResize, false );
  82. }
  83. function onWindowResize() {
  84. camera.aspect = window.innerWidth / window.innerHeight;
  85. camera.updateProjectionMatrix();
  86. renderer.setSize( window.innerWidth, window.innerHeight );
  87. }
  88. function animate() {
  89. requestAnimationFrame( animate );
  90. render();
  91. stats.update();
  92. }
  93. function render() {
  94. renderer.render( scene, camera );
  95. }
  96. </script>
  97. </body>
  98. </html>