[28897] | 1 | <!DOCTYPE html>
|
---|
| 2 | <html lang="en">
|
---|
| 3 | <head>
|
---|
| 4 | <title>three.js editor</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 | </head>
|
---|
| 8 | <body>
|
---|
| 9 | <link href="css/types.css" rel="stylesheet" />
|
---|
| 10 | <link id="theme" href="css/light.css" rel="stylesheet" />
|
---|
| 11 |
|
---|
| 12 | <script src="../build/three.min.js"></script>
|
---|
| 13 | <script src="../examples/js/libs/system.min.js"></script>
|
---|
| 14 |
|
---|
| 15 | <script src="../examples/js/controls/EditorControls.js"></script>
|
---|
| 16 | <script src="../examples/js/controls/TransformControls.js"></script>
|
---|
| 17 | <script src="../examples/js/loaders/BabylonLoader.js"></script>
|
---|
| 18 | <script src="../examples/js/loaders/ColladaLoader.js"></script>
|
---|
| 19 | <script src="../examples/js/loaders/OBJLoader.js"></script>
|
---|
| 20 | <script src="../examples/js/loaders/PLYLoader.js"></script>
|
---|
| 21 | <script src="../examples/js/loaders/STLLoader.js"></script>
|
---|
| 22 | <script src="../examples/js/loaders/UTF8Loader.js"></script>
|
---|
| 23 | <script src="../examples/js/loaders/VRMLLoader.js"></script>
|
---|
| 24 | <script src="../examples/js/loaders/VTKLoader.js"></script>
|
---|
| 25 | <script src="../examples/js/loaders/ctm/lzma.js"></script>
|
---|
| 26 | <script src="../examples/js/loaders/ctm/ctm.js"></script>
|
---|
| 27 | <script src="../examples/js/loaders/ctm/CTMLoader.js"></script>
|
---|
| 28 | <script src="../examples/js/exporters/SceneExporter.js"></script>
|
---|
| 29 | <script src="../examples/js/exporters/OBJExporter.js"></script>
|
---|
| 30 | <script src="../examples/js/renderers/SoftwareRenderer.js"></script>
|
---|
| 31 | <script src="../examples/js/renderers/SVGRenderer.js"></script>
|
---|
| 32 |
|
---|
| 33 | <!-- WIP -->
|
---|
| 34 |
|
---|
| 35 | <script src="../examples/js/BufferGeometryUtils.js"></script>
|
---|
| 36 |
|
---|
| 37 | <script src="../examples/js/exporters/BufferGeometryExporter.js"></script>
|
---|
| 38 | <script src="../examples/js/exporters/GeometryExporter.js"></script>
|
---|
| 39 | <script src="../examples/js/exporters/MaterialExporter.js"></script>
|
---|
| 40 | <script src="../examples/js/exporters/ObjectExporter.js"></script>
|
---|
| 41 | <script src="../examples/js/renderers/WebGLRenderer3.js"></script>
|
---|
| 42 |
|
---|
| 43 | <script src="js/libs/signals.min.js"></script>
|
---|
| 44 | <script src="js/libs/ui.js"></script>
|
---|
| 45 | <script src="js/libs/ui.three.js"></script>
|
---|
| 46 |
|
---|
| 47 | <script src="js/Storage.js"></script>
|
---|
| 48 |
|
---|
| 49 | <script src="js/Editor.js"></script>
|
---|
| 50 | <script src="js/Config.js"></script>
|
---|
| 51 | <script src="js/Loader.js"></script>
|
---|
| 52 | <script src="js/Menubar.js"></script>
|
---|
| 53 | <script src="js/Menubar.File.js"></script>
|
---|
| 54 | <script src="js/Menubar.Edit.js"></script>
|
---|
| 55 | <script src="js/Menubar.Add.js"></script>
|
---|
| 56 | <script src="js/Menubar.View.js"></script>
|
---|
| 57 | <script src="js/Menubar.Help.js"></script>
|
---|
| 58 | <script src="js/Sidebar.js"></script>
|
---|
| 59 | <script src="js/Sidebar.Renderer.js"></script>
|
---|
| 60 | <script src="js/Sidebar.Scene.js"></script>
|
---|
| 61 | <script src="js/Sidebar.Object3D.js"></script>
|
---|
| 62 | <script src="js/Sidebar.Geometry.js"></script>
|
---|
| 63 | <script src="js/Sidebar.Animation.js"></script>
|
---|
| 64 | <script src="js/Sidebar.Geometry.CircleGeometry.js"></script>
|
---|
| 65 | <script src="js/Sidebar.Geometry.CubeGeometry.js"></script>
|
---|
| 66 | <script src="js/Sidebar.Geometry.CylinderGeometry.js"></script>
|
---|
| 67 | <script src="js/Sidebar.Geometry.IcosahedronGeometry.js"></script>
|
---|
| 68 | <script src="js/Sidebar.Geometry.PlaneGeometry.js"></script>
|
---|
| 69 | <script src="js/Sidebar.Geometry.SphereGeometry.js"></script>
|
---|
| 70 | <script src="js/Sidebar.Geometry.TorusGeometry.js"></script>
|
---|
| 71 | <script src="js/Sidebar.Geometry.TorusKnotGeometry.js"></script>
|
---|
| 72 | <script src="js/Sidebar.Material.js"></script>
|
---|
| 73 | <script src="js/Toolbar.js"></script>
|
---|
| 74 | <script src="js/Viewport.js"></script>
|
---|
| 75 |
|
---|
| 76 | <script>
|
---|
| 77 |
|
---|
| 78 | window.URL = window.URL || window.webkitURL;
|
---|
| 79 | window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
|
---|
| 80 |
|
---|
| 81 | var editor = new Editor();
|
---|
| 82 |
|
---|
| 83 | var viewport = new Viewport( editor ).setId( 'viewport' );
|
---|
| 84 | document.body.appendChild( viewport.dom );
|
---|
| 85 |
|
---|
| 86 | var toolbar = new Toolbar( editor ).setId( 'toolbar' )
|
---|
| 87 | document.body.appendChild( toolbar.dom );
|
---|
| 88 |
|
---|
| 89 | var menubar = new Menubar( editor ).setId( 'menubar' );
|
---|
| 90 | document.body.appendChild( menubar.dom );
|
---|
| 91 |
|
---|
| 92 | var sidebar = new Sidebar( editor ).setId( 'sidebar' );
|
---|
| 93 | document.body.appendChild( sidebar.dom );
|
---|
| 94 |
|
---|
| 95 | //
|
---|
| 96 |
|
---|
| 97 | editor.setTheme( editor.config.getKey( 'theme' ) );
|
---|
| 98 |
|
---|
| 99 | editor.storage.init( function () {
|
---|
| 100 |
|
---|
| 101 | editor.storage.get( function ( state ) {
|
---|
| 102 |
|
---|
| 103 | if ( state !== undefined ) {
|
---|
| 104 |
|
---|
| 105 | var loader = new THREE.ObjectLoader();
|
---|
| 106 | var scene = loader.parse( state );
|
---|
| 107 |
|
---|
| 108 | editor.setScene( scene );
|
---|
| 109 |
|
---|
| 110 | }
|
---|
| 111 |
|
---|
| 112 | var selected = editor.config.getKey( 'selected' );
|
---|
| 113 |
|
---|
| 114 | if ( selected !== undefined ) {
|
---|
| 115 |
|
---|
| 116 | editor.selectByUuid( selected );
|
---|
| 117 |
|
---|
| 118 | }
|
---|
| 119 |
|
---|
| 120 | } );
|
---|
| 121 |
|
---|
| 122 | //
|
---|
| 123 |
|
---|
| 124 | var timeout;
|
---|
| 125 | var exporter = new THREE.ObjectExporter();
|
---|
| 126 |
|
---|
| 127 | var saveState = function ( scene ) {
|
---|
| 128 |
|
---|
| 129 | clearTimeout( timeout );
|
---|
| 130 |
|
---|
| 131 | timeout = setTimeout( function () {
|
---|
| 132 |
|
---|
| 133 | editor.storage.set( exporter.parse( editor.scene ) );
|
---|
| 134 |
|
---|
| 135 | }, 1000 );
|
---|
| 136 |
|
---|
| 137 | };
|
---|
| 138 |
|
---|
| 139 | var signals = editor.signals;
|
---|
| 140 |
|
---|
| 141 | signals.objectAdded.add( saveState );
|
---|
| 142 | signals.objectChanged.add( saveState );
|
---|
| 143 | signals.objectRemoved.add( saveState );
|
---|
| 144 | signals.materialChanged.add( saveState );
|
---|
| 145 | signals.sceneGraphChanged.add( saveState );
|
---|
| 146 |
|
---|
| 147 | } );
|
---|
| 148 |
|
---|
| 149 | //
|
---|
| 150 |
|
---|
| 151 | document.addEventListener( 'dragover', function ( event ) {
|
---|
| 152 |
|
---|
| 153 | event.preventDefault();
|
---|
| 154 | event.dataTransfer.dropEffect = 'copy';
|
---|
| 155 |
|
---|
| 156 | }, false );
|
---|
| 157 |
|
---|
| 158 | document.addEventListener( 'drop', function ( event ) {
|
---|
| 159 |
|
---|
| 160 | event.preventDefault();
|
---|
| 161 | editor.loader.loadFile( event.dataTransfer.files[ 0 ] );
|
---|
| 162 |
|
---|
| 163 | }, false );
|
---|
| 164 |
|
---|
| 165 | document.addEventListener( 'keydown', function ( event ) {
|
---|
| 166 |
|
---|
| 167 | switch ( event.keyCode ) {
|
---|
| 168 |
|
---|
| 169 | case 8: // prevent browser back
|
---|
| 170 | event.preventDefault();
|
---|
| 171 | break;
|
---|
| 172 | case 46: // delete
|
---|
| 173 | editor.removeObject( editor.selected );
|
---|
| 174 | editor.deselect();
|
---|
| 175 | break;
|
---|
| 176 |
|
---|
| 177 | }
|
---|
| 178 |
|
---|
| 179 | }, false );
|
---|
| 180 |
|
---|
| 181 | var onWindowResize = function ( event ) {
|
---|
| 182 |
|
---|
| 183 | editor.signals.windowResize.dispatch();
|
---|
| 184 |
|
---|
| 185 | };
|
---|
| 186 |
|
---|
| 187 | window.addEventListener( 'resize', onWindowResize, false );
|
---|
| 188 |
|
---|
| 189 | onWindowResize();
|
---|
| 190 |
|
---|
| 191 | </script>
|
---|
| 192 | </body>
|
---|
| 193 | </html>
|
---|