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>
|
---|