source: other-projects/playing-in-the-street/summer-2013/trunk/Playing-in-the-Street-WPF/Content/Web/mrdoob-three.js-4862f5f/editor/index.html@ 28897

Last change on this file since 28897 was 28897, checked in by davidb, 10 years ago

GUI front-end to server base plus web page content
File size: 5.8 KB
Line 
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>
Note: See TracBrowser for help on using the repository browser.