scene_test.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4. <title>three.js - scene loader test</title>
  5. <meta charset="utf-8">
  6. <style type="text/css">
  7. body {
  8. background:#fff;
  9. padding:0;
  10. margin:0;
  11. overflow:hidden;
  12. font-family:georgia;
  13. text-align:center;
  14. }
  15. #info {
  16. position: absolute;
  17. top: 0px; width: 100%;
  18. color: #000;
  19. padding: 5px;
  20. font-family: Monospace;
  21. font-size: 13px;
  22. text-align: center;
  23. }
  24. a { color:skyblue }
  25. canvas { pointer-events:none; z-index:10; }
  26. #log { position:absolute; top:0; display:block; text-align:left; z-index:1000; pointer-events:none; }
  27. </style>
  28. </head>
  29. <body>
  30. <div id="info">
  31. <a href="http://github.com/mrdoob/three.js">three.js</a> - scene loader test
  32. </div>
  33. <pre id="log"></pre>
  34. <script type="text/javascript" src="../build/ThreeExtras.js"></script>
  35. <script type="text/javascript" src="js/Stats.js"></script>
  36. <script type="text/javascript">
  37. var SCREEN_WIDTH = window.innerWidth;
  38. var SCREEN_HEIGHT = window.innerHeight;
  39. var container,stats;
  40. var camera, scene;
  41. var renderer;
  42. var mesh, zmesh, geometry;
  43. var mouseX = 0, mouseY = 0;
  44. var windowHalfX = window.innerWidth / 2;
  45. var windowHalfY = window.innerHeight / 2;
  46. document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  47. init();
  48. function init() {
  49. container = document.createElement( 'div' );
  50. document.body.appendChild( container );
  51. renderer = new THREE.WebGLRenderer();
  52. renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
  53. renderer.domElement.style.position = "relative";
  54. container.appendChild( renderer.domElement );
  55. var callback = function( result ) {
  56. scene = result.scene;
  57. camera = result.currentCamera;
  58. camera.aspect = window.innerWidth / window.innerHeight;
  59. camera.updateProjectionMatrix();
  60. renderer.setClearColor( result.bgColor.hex, result.bgAlpha );
  61. setInterval( loop, 1000/60 );
  62. }
  63. var callback_async = function( result ) {
  64. var mat_veyron = result.geometries[ "veyron" ].materials;
  65. mat_veyron[ 0 ][ 0 ] = result.materials[ "interior" ];
  66. mat_veyron[ 1 ][ 0 ] = result.materials[ "chrome" ];
  67. mat_veyron[ 2 ][ 0 ] = result.materials[ "darkerchrome" ];
  68. mat_veyron[ 3 ][ 0 ] = result.materials[ "glass" ];
  69. mat_veyron[ 4 ][ 0 ] = result.materials[ "chrome" ];
  70. mat_veyron[ 5 ][ 0 ] = result.materials[ "chrome" ];
  71. }
  72. SceneUtils.loadScene( "scenes/test_scene.js", callback, callback_async );
  73. stats = new Stats();
  74. stats.domElement.style.position = 'absolute';
  75. stats.domElement.style.top = '0px';
  76. stats.domElement.style.zIndex = 100;
  77. container.appendChild( stats.domElement );
  78. }
  79. function onDocumentMouseMove(event) {
  80. mouseX = ( event.clientX - windowHalfX );
  81. mouseY = ( event.clientY - windowHalfY );
  82. }
  83. function loop() {
  84. camera.position.x += ( mouseX - camera.position.x ) * .001;
  85. camera.position.y += ( - mouseY - camera.position.y ) * .001;
  86. renderer.render( scene, camera );
  87. stats.update();
  88. }
  89. function log( text ) {
  90. var e = document.getElementById("log");
  91. e.innerHTML = text + "<br/>" + e.innerHTML;
  92. }
  93. </script>
  94. </body>
  95. </html>
粤ICP备19079148号