source: other-projects/playing-in-the-street/summer-2013/trunk/Playing-in-the-Street-WPF/Content/Web/mrdoob-three.js-4862f5f/editor/js/Menubar.Add.js@ 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: 7.5 KB
Line 
1Menubar.Add = function ( editor ) {
2
3 var container = new UI.Panel();
4 container.setClass( 'menu' );
5
6 var title = new UI.Panel();
7 title.setTextContent( 'Add' );
8 title.setMargin( '0px' );
9 title.setPadding( '8px' );
10 container.add( title );
11
12 //
13
14 var options = new UI.Panel();
15 options.setClass( 'options' );
16 container.add( options );
17
18 var meshCount = 0;
19 var lightCount = 0;
20
21 // add plane
22
23 var option = new UI.Panel();
24 option.setClass( 'option' );
25 option.setTextContent( 'Plane' );
26 option.onClick( function () {
27
28 var width = 200;
29 var height = 200;
30
31 var widthSegments = 1;
32 var heightSegments = 1;
33
34 var geometry = new THREE.PlaneGeometry( width, height, widthSegments, heightSegments );
35 var material = new THREE.MeshPhongMaterial();
36 var mesh = new THREE.Mesh( geometry, material );
37 mesh.name = 'Plane ' + ( ++ meshCount );
38
39 mesh.rotation.x = - Math.PI/2;
40
41 editor.addObject( mesh );
42 editor.select( mesh );
43
44 } );
45 options.add( option );
46
47 // add cube
48
49 var option = new UI.Panel();
50 option.setClass( 'option' );
51 option.setTextContent( 'Cube' );
52 option.onClick( function () {
53
54 var width = 100;
55 var height = 100;
56 var depth = 100;
57
58 var widthSegments = 1;
59 var heightSegments = 1;
60 var depthSegments = 1;
61
62 var geometry = new THREE.CubeGeometry( width, height, depth, widthSegments, heightSegments, depthSegments );
63 var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
64 mesh.name = 'Cube ' + ( ++ meshCount );
65
66 editor.addObject( mesh );
67 editor.select( mesh );
68
69 } );
70 options.add( option );
71
72 // add circle
73
74 var option = new UI.Panel();
75 option.setClass( 'option' );
76 option.setTextContent( 'Circle' );
77 option.onClick( function () {
78
79 var radius = 20;
80 var segments = 8;
81
82 var geometry = new THREE.CircleGeometry( radius, segments );
83 var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
84 mesh.name = 'Circle ' + ( ++ meshCount );
85
86 editor.addObject( mesh );
87 editor.select( mesh );
88
89 } );
90 options.add( option );
91
92 // add cylinder
93
94 var option = new UI.Panel();
95 option.setClass( 'option' );
96 option.setTextContent( 'Cylinder' );
97 option.onClick( function () {
98
99 var radiusTop = 20;
100 var radiusBottom = 20;
101 var height = 100;
102 var radiusSegments = 8;
103 var heightSegments = 1;
104 var openEnded = false;
105
106 var geometry = new THREE.CylinderGeometry( radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded );
107 var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
108 mesh.name = 'Cylinder ' + ( ++ meshCount );
109
110 editor.addObject( mesh );
111 editor.select( mesh );
112
113 } );
114 options.add( option );
115
116 // add sphere
117
118 var option = new UI.Panel();
119 option.setClass( 'option' );
120 option.setTextContent( 'Sphere' );
121 option.onClick( function () {
122
123 var radius = 75;
124 var widthSegments = 32;
125 var heightSegments = 16;
126
127 var geometry = new THREE.SphereGeometry( radius, widthSegments, heightSegments );
128 var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
129 mesh.name = 'Sphere ' + ( ++ meshCount );
130
131 editor.addObject( mesh );
132 editor.select( mesh );
133
134 } );
135 options.add( option );
136
137 // add icosahedron
138
139 var option = new UI.Panel();
140 option.setClass( 'option' );
141 option.setTextContent( 'Icosahedron' );
142 option.onClick( function () {
143
144 var radius = 75;
145 var detail = 2;
146
147 var geometry = new THREE.IcosahedronGeometry ( radius, detail );
148 var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
149 mesh.name = 'Icosahedron ' + ( ++ meshCount );
150
151 editor.addObject( mesh );
152 editor.select( mesh );
153
154 } );
155 options.add( option );
156
157 // add torus
158
159 var option = new UI.Panel();
160 option.setClass( 'option' );
161 option.setTextContent( 'Torus' );
162 option.onClick( function () {
163
164 var radius = 100;
165 var tube = 40;
166 var radialSegments = 8;
167 var tubularSegments = 6;
168 var arc = Math.PI * 2;
169
170 var geometry = new THREE.TorusGeometry( radius, tube, radialSegments, tubularSegments, arc );
171 var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
172 mesh.name = 'Torus ' + ( ++ meshCount );
173
174 editor.addObject( mesh );
175 editor.select( mesh );
176
177 } );
178 options.add( option );
179
180 // add torus knot
181
182 var option = new UI.Panel();
183 option.setClass( 'option' );
184 option.setTextContent( 'TorusKnot' );
185 option.onClick( function () {
186
187 var radius = 100;
188 var tube = 40;
189 var radialSegments = 64;
190 var tubularSegments = 8;
191 var p = 2;
192 var q = 3;
193 var heightScale = 1;
194
195 var geometry = new THREE.TorusKnotGeometry( radius, tube, radialSegments, tubularSegments, p, q, heightScale );
196 var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
197 mesh.name = 'TorusKnot ' + ( ++ meshCount );
198
199 editor.addObject( mesh );
200 editor.select( mesh );
201
202 } );
203 options.add( option );
204
205 // divider
206
207 options.add( new UI.HorizontalRule() );
208
209 // add sprite
210
211 var option = new UI.Panel();
212 option.setClass( 'option' );
213 option.setTextContent( 'Sprite' );
214 option.onClick( function () {
215
216 var sprite = new THREE.Sprite( new THREE.SpriteMaterial() );
217 sprite.name = 'Sprite ' + ( ++ meshCount );
218
219 editor.addObject( sprite );
220 editor.select( sprite );
221
222 } );
223 options.add( option );
224
225 // divider
226
227 options.add( new UI.HorizontalRule() );
228
229 // add point light
230
231 var option = new UI.Panel();
232 option.setClass( 'option' );
233 option.setTextContent( 'Point light' );
234 option.onClick( function () {
235
236 var color = 0xffffff;
237 var intensity = 1;
238 var distance = 0;
239
240 var light = new THREE.PointLight( color, intensity, distance );
241 light.name = 'PointLight ' + ( ++ lightCount );
242
243 editor.addObject( light );
244 editor.select( light );
245
246 } );
247 options.add( option );
248
249 // add spot light
250
251 var option = new UI.Panel();
252 option.setClass( 'option' );
253 option.setTextContent( 'Spot light' );
254 option.onClick( function () {
255
256 var color = 0xffffff;
257 var intensity = 1;
258 var distance = 0;
259 var angle = Math.PI * 0.1;
260 var exponent = 10;
261
262 var light = new THREE.SpotLight( color, intensity, distance, angle, exponent );
263 light.name = 'SpotLight ' + ( ++ lightCount );
264 light.target.name = 'SpotLight ' + ( lightCount ) + ' Target';
265
266 light.position.set( 0, 1, 0 ).multiplyScalar( 200 );
267
268 editor.addObject( light );
269 editor.select( light );
270
271 } );
272 options.add( option );
273
274 // add directional light
275
276 var option = new UI.Panel();
277 option.setClass( 'option' );
278 option.setTextContent( 'Directional light' );
279 option.onClick( function () {
280
281 var color = 0xffffff;
282 var intensity = 1;
283
284 var light = new THREE.DirectionalLight( color, intensity );
285 light.name = 'DirectionalLight ' + ( ++ lightCount );
286 light.target.name = 'DirectionalLight ' + ( lightCount ) + ' Target';
287
288 light.position.set( 1, 1, 1 ).multiplyScalar( 200 );
289
290 editor.addObject( light );
291 editor.select( light );
292
293 } );
294 options.add( option );
295
296 // add hemisphere light
297
298 var option = new UI.Panel();
299 option.setClass( 'option' );
300 option.setTextContent( 'Hemisphere light' );
301 option.onClick( function () {
302
303 var skyColor = 0x00aaff;
304 var groundColor = 0xffaa00;
305 var intensity = 1;
306
307 var light = new THREE.HemisphereLight( skyColor, groundColor, intensity );
308 light.name = 'HemisphereLight ' + ( ++ lightCount );
309
310 light.position.set( 1, 1, 1 ).multiplyScalar( 200 );
311
312 editor.addObject( light );
313 editor.select( light );
314
315 } );
316 options.add( option );
317
318 // add ambient light
319
320 var option = new UI.Panel();
321 option.setClass( 'option' );
322 option.setTextContent( 'Ambient light' );
323 option.onClick( function () {
324
325 var color = 0x222222;
326
327 var light = new THREE.AmbientLight( color );
328 light.name = 'AmbientLight ' + ( ++ lightCount );
329
330 editor.addObject( light );
331 editor.select( light );
332
333 } );
334 options.add( option );
335
336 //
337
338 return container;
339
340}
Note: See TracBrowser for help on using the repository browser.