index.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js gui</title>
  5. <style>
  6. body {
  7. font-family: Arial, sans-serif;
  8. font-size: 14px;
  9. margin: 0;
  10. overflow: hidden;
  11. }
  12. hr {
  13. border: 0px;
  14. border-top: 1px solid #ccc;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <script type="text/javascript" src="../build/Three.js"></script>
  20. <script type="text/javascript" src="js/libs/signals.min.js"></script>
  21. <script type="text/javascript" src="js/UI.js"></script>
  22. <script type="text/javascript" src="js/ui/Viewport.js"></script>
  23. <script type="text/javascript" src="js/ui/Panel.js"></script>
  24. <script>
  25. var events = {
  26. windowResize: new signals.Signal()
  27. };
  28. //
  29. var viewport = new Viewport( events );
  30. viewport.setWidth( '-webkit-calc(100% - 300px)' );
  31. viewport.setWidth( '-moz-calc(100% - 300px)' );
  32. viewport.setWidth( 'calc(100% - 300px)' );
  33. viewport.setHeight( '100%' );
  34. document.body.appendChild( viewport.dom );
  35. var panel = new Panel( events );
  36. panel.setX( '-webkit-calc(100% - 300px)' );
  37. panel.setX( '-moz-calc(100% - 300px)' );
  38. panel.setX( 'calc(100% - 300px)' );
  39. document.body.appendChild( panel.dom );
  40. //
  41. var onWindowResize = function ( event ) {
  42. events.windowResize.dispatch();
  43. };
  44. onWindowResize();
  45. window.addEventListener( 'resize', onWindowResize, false );
  46. </script>
  47. </body>
  48. </html>
粤ICP备19079148号