index.html 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js</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: Helvetica, Arial, sans-serif;
  10. font-size: 12px;
  11. background-color: #000;
  12. margin: 0px;
  13. overflow: hidden;
  14. }
  15. #edit {
  16. position: absolute;
  17. bottom: 20px;
  18. right: 20px;
  19. padding: 8px;
  20. color: #555;
  21. background-color: #fff;
  22. opacity: 0.5;
  23. }
  24. #edit:hover {
  25. cursor: pointer;
  26. opacity: 1;
  27. }
  28. </style>
  29. </head>
  30. <body ontouchstart="">
  31. <script src="js/three.min.js"></script>
  32. <script src="js/app.js"></script>
  33. <script src="js/VRControls.js"></script>
  34. <script src="js/VREffect.js"></script>
  35. <script>
  36. var loader = new THREE.XHRLoader();
  37. loader.load( 'app.json', function ( text ) {
  38. var json = JSON.parse( text );
  39. var player = new APP.Player();
  40. player.load( json );
  41. player.setSize( window.innerWidth, window.innerHeight );
  42. player.play();
  43. document.body.appendChild( player.dom );
  44. if ( json.project.editable === true ) {
  45. var button = document.createElement( 'div' );
  46. button.id = 'edit';
  47. button.textContent = 'EDIT';
  48. button.addEventListener( 'click', function ( event ) {
  49. var url = location.href.split( '/' ).slice( 0, - 1 ).join( '/' );
  50. window.open( 'http://threejs.org/editor/#file=https://crossorigin.me/' + url + '/app.json' );
  51. }, false );
  52. document.body.appendChild( button );
  53. }
  54. window.addEventListener( 'resize', function () {
  55. player.setSize( window.innerWidth, window.innerHeight );
  56. } );
  57. } );
  58. </script>
  59. </body>
  60. </html>