| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>three.js gui</title>
- <style>
- body {
- font-family: Arial, sans-serif;
- font-size: 14px;
- margin: 0;
- overflow: hidden;
- }
- hr {
- border: 0px;
- border-top: 1px solid #ccc;
- }
- </style>
- </head>
- <body>
- <script type="text/javascript" src="../build/Three.js"></script>
- <script type="text/javascript" src="js/libs/signals.min.js"></script>
- <script type="text/javascript" src="js/UI.js"></script>
- <script type="text/javascript" src="js/ui/Viewport.js"></script>
- <script type="text/javascript" src="js/ui/Panel.js"></script>
- <script>
- var events = {
- windowResize: new signals.Signal()
- };
- //
- var viewport = new Viewport( events );
- viewport.setWidth( '-webkit-calc(100% - 300px)' );
- viewport.setWidth( '-moz-calc(100% - 300px)' );
- viewport.setWidth( 'calc(100% - 300px)' );
- viewport.setHeight( '100%' );
- document.body.appendChild( viewport.dom );
- var panel = new Panel( events );
- panel.setX( '-webkit-calc(100% - 300px)' );
- panel.setX( '-moz-calc(100% - 300px)' );
- panel.setX( 'calc(100% - 300px)' );
- document.body.appendChild( panel.dom );
- //
- var onWindowResize = function ( event ) {
- events.windowResize.dispatch();
- };
- onWindowResize();
- window.addEventListener( 'resize', onWindowResize, false );
- </script>
- </body>
- </html>
|