Editor.js 9.1 KB
Newer Older
M
Mr.doob 已提交
1 2 3 4
/**
 * @author mrdoob / http://mrdoob.com/
 */

5 6
var Editor = function () {

M
Mr.doob 已提交
7
	this.DEFAULT_CAMERA = new THREE.PerspectiveCamera( 50, 1, 0.1, 10000 );
M
Mr.doob 已提交
8 9 10 11
	this.DEFAULT_CAMERA.name = 'Camera';
	this.DEFAULT_CAMERA.position.set( 20, 10, 20 );
	this.DEFAULT_CAMERA.lookAt( new THREE.Vector3() );

M
Mr.doob 已提交
12 13
	var Signal = signals.Signal;

14 15
	this.signals = {

16 17
		// script

M
Mr.doob 已提交
18
		editScript: new Signal(),
19

M
Mr.doob 已提交
20 21
		// player

M
Mr.doob 已提交
22 23
		startPlayer: new Signal(),
		stopPlayer: new Signal(),
M
Mr.doob 已提交
24

M
Mr.doob 已提交
25 26 27 28 29 30 31
		// vr

		enterVR: new Signal(),

		enteredVR: new Signal(),
		exitedVR: new Signal(),

32 33
		// actions

M
Mr.doob 已提交
34
		showModal: new Signal(),
35

36 37
		// notifications

M
Mr.doob 已提交
38
		editorCleared: new Signal(),
39

M
Mr.doob 已提交
40 41
		savingStarted: new Signal(),
		savingFinished: new Signal(),
M
Mr.doob 已提交
42

M
Mr.doob 已提交
43
		themeChanged: new Signal(),
44

M
Mr.doob 已提交
45 46 47 48
		transformModeChanged: new Signal(),
		snapChanged: new Signal(),
		spaceChanged: new Signal(),
		rendererChanged: new Signal(),
M
Mr.doob 已提交
49

M
Mr.doob 已提交
50
		sceneGraphChanged: new Signal(),
51

M
Mr.doob 已提交
52
		cameraChanged: new Signal(),
53

M
Mr.doob 已提交
54
		geometryChanged: new Signal(),
M
Mr.doob 已提交
55

M
Mr.doob 已提交
56 57
		objectSelected: new Signal(),
		objectFocused: new Signal(),
58

M
Mr.doob 已提交
59 60 61
		objectAdded: new Signal(),
		objectChanged: new Signal(),
		objectRemoved: new Signal(),
M
Mr.doob 已提交
62

M
Mr.doob 已提交
63 64
		helperAdded: new Signal(),
		helperRemoved: new Signal(),
M
Mr.doob 已提交
65

M
Mr.doob 已提交
66
		materialChanged: new Signal(),
M
Mr.doob 已提交
67

M
Mr.doob 已提交
68 69 70
		scriptAdded: new Signal(),
		scriptChanged: new Signal(),
		scriptRemoved: new Signal(),
M
Mr.doob 已提交
71

M
Mr.doob 已提交
72 73
		fogChanged: new Signal(),

M
Mr.doob 已提交
74
		windowResize: new Signal(),
C
Chris Jubb 已提交
75

M
Mr.doob 已提交
76 77 78 79
		showGridChanged: new Signal(),
		refreshSidebarObject3D: new Signal(),
		historyChanged: new Signal(),
		refreshScriptEditor: new Signal()
80 81

	};
M
Mr.doob 已提交
82

M
Mr.doob 已提交
83
	this.config = new Config( 'threejs-editor' );
84
	this.history = new History( this );
85
	this.storage = new Storage();
86 87
	this.loader = new Loader( this );

M
Mr.doob 已提交
88
	this.camera = this.DEFAULT_CAMERA.clone();
89

90
	this.scene = new THREE.Scene();
91
	this.scene.name = 'Scene';
M
Mr.doob 已提交
92

93
	this.sceneHelpers = new THREE.Scene();
94 95 96 97 98

	this.object = {};
	this.geometries = {};
	this.materials = {};
	this.textures = {};
M
Mr.doob 已提交
99
	this.scripts = {};
100

101 102 103
	this.selected = null;
	this.helpers = {};

104 105 106 107
};

Editor.prototype = {

108 109 110 111 112 113 114 115
	setTheme: function ( value ) {

		document.getElementById( 'theme' ).href = value;

		this.signals.themeChanged.dispatch( value );

	},

116 117
	//

118 119
	setScene: function ( scene ) {

M
Mr.doob 已提交
120
		this.scene.uuid = scene.uuid;
121
		this.scene.name = scene.name;
M
Mr.doob 已提交
122 123 124

		if ( scene.fog !== null ) this.scene.fog = scene.fog.clone();

125 126
		this.scene.userData = JSON.parse( JSON.stringify( scene.userData ) );

127 128 129 130
		// avoid render per object

		this.signals.sceneGraphChanged.active = false;

131 132 133 134 135 136
		while ( scene.children.length > 0 ) {

			this.addObject( scene.children[ 0 ] );

		}

137 138 139
		this.signals.sceneGraphChanged.active = true;
		this.signals.sceneGraphChanged.dispatch();

140 141 142 143
	},

	//

144 145
	addObject: function ( object ) {

146 147 148 149
		var scope = this;

		object.traverse( function ( child ) {

150 151 152
			if ( child.geometry !== undefined ) scope.addGeometry( child.geometry );
			if ( child.material !== undefined ) scope.addMaterial( child.material );

153 154 155 156
			scope.addHelper( child );

		} );

157 158 159
		this.scene.add( object );

		this.signals.objectAdded.dispatch( object );
160
		this.signals.sceneGraphChanged.dispatch();
161 162 163

	},

164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187
	moveObject: function ( object, parent, before ) {

		if ( parent === undefined ) {

			parent = this.scene;

		}

		parent.add( object );

		// sort children array

		if ( before !== undefined ) {

			var index = parent.children.indexOf( before );
			parent.children.splice( index, 0, object );
			parent.children.pop();

		}

		this.signals.sceneGraphChanged.dispatch();

	},

188
	nameObject: function ( object, name ) {
189 190 191 192 193 194

		object.name = name;
		this.signals.sceneGraphChanged.dispatch();

	},

195 196
	removeObject: function ( object ) {

197
		if ( object.parent === null ) return; // avoid deleting the camera or scene
198

199 200 201 202 203 204 205 206
		var scope = this;

		object.traverse( function ( child ) {

			scope.removeHelper( child );

		} );

207
		object.parent.remove( object );
M
Mr.doob 已提交
208 209

		this.signals.objectRemoved.dispatch( object );
210
		this.signals.sceneGraphChanged.dispatch();
211 212 213

	},

214
	addGeometry: function ( geometry ) {
215

216
		this.geometries[ geometry.uuid ] = geometry;
217 218 219

	},

220 221 222 223 224 225 226
	setGeometryName: function ( geometry, name ) {

		geometry.name = name;
		this.signals.sceneGraphChanged.dispatch();

	},

227 228
	addMaterial: function ( material ) {

229
		this.materials[ material.uuid ] = material;
230 231 232

	},

233 234 235 236 237 238 239
	setMaterialName: function ( material, name ) {

		material.name = name;
		this.signals.sceneGraphChanged.dispatch();

	},

240 241
	addTexture: function ( texture ) {

242
		this.textures[ texture.uuid ] = texture;
243 244 245

	},

246 247
	//

M
Mr.doob 已提交
248
	addHelper: function () {
249

250
		var geometry = new THREE.SphereBufferGeometry( 2, 4, 2 );
M
Mr.doob 已提交
251
		var material = new THREE.MeshBasicMaterial( { color: 0xff0000, visible: false } );
252

M
Mr.doob 已提交
253
		return function ( object ) {
M
Mr.doob 已提交
254

M
Mr.doob 已提交
255
			var helper;
256

M
Mr.doob 已提交
257
			if ( object instanceof THREE.Camera ) {
258

259
				helper = new THREE.CameraHelper( object, 1 );
260 261

			} else if ( object instanceof THREE.PointLight ) {
262

263
				helper = new THREE.PointLightHelper( object, 1 );
264

M
Mr.doob 已提交
265
			} else if ( object instanceof THREE.DirectionalLight ) {
266

267
				helper = new THREE.DirectionalLightHelper( object, 1 );
M
Mr.doob 已提交
268

M
Mr.doob 已提交
269
			} else if ( object instanceof THREE.SpotLight ) {
270

271
				helper = new THREE.SpotLightHelper( object, 1 );
M
Mr.doob 已提交
272

M
Mr.doob 已提交
273
			} else if ( object instanceof THREE.HemisphereLight ) {
M
Mr.doob 已提交
274

275
				helper = new THREE.HemisphereLightHelper( object, 1 );
M
Mr.doob 已提交
276

M
Mr.doob 已提交
277 278 279 280
			} else if ( object instanceof THREE.SkinnedMesh ) {

				helper = new THREE.SkeletonHelper( object );

M
Mr.doob 已提交
281
			} else {
M
Mr.doob 已提交
282

M
Mr.doob 已提交
283 284
				// no helper for this object type
				return;
M
Mr.doob 已提交
285

M
Mr.doob 已提交
286
			}
M
Mr.doob 已提交
287

M
Mr.doob 已提交
288 289 290 291
			var picker = new THREE.Mesh( geometry, material );
			picker.name = 'picker';
			picker.userData.object = object;
			helper.add( picker );
M
Mr.doob 已提交
292

M
Mr.doob 已提交
293 294
			this.sceneHelpers.add( helper );
			this.helpers[ object.id ] = helper;
M
Mr.doob 已提交
295

M
Mr.doob 已提交
296
			this.signals.helperAdded.dispatch( helper );
M
Mr.doob 已提交
297 298 299 300

		};

	}(),
301 302 303

	removeHelper: function ( object ) {

304 305
		if ( this.helpers[ object.id ] !== undefined ) {

306 307 308
			var helper = this.helpers[ object.id ];
			helper.parent.remove( helper );

309 310
			delete this.helpers[ object.id ];

M
Mr.doob 已提交
311 312
			this.signals.helperRemoved.dispatch( helper );

313 314
		}

315 316 317 318
	},

	//

319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350
	addScript: function ( object, script ) {

		if ( this.scripts[ object.uuid ] === undefined ) {

			this.scripts[ object.uuid ] = [];

		}

		this.scripts[ object.uuid ].push( script );

		this.signals.scriptAdded.dispatch( script );

	},

	removeScript: function ( object, script ) {

		if ( this.scripts[ object.uuid ] === undefined ) return;

		var index = this.scripts[ object.uuid ].indexOf( script );

		if ( index !== - 1 ) {

			this.scripts[ object.uuid ].splice( index, 1 );

		}

		this.signals.scriptRemoved.dispatch( script );

	},

	//

351 352
	select: function ( object ) {

353
		if ( this.selected === object ) return;
354

355
		var uuid = null;
356

357
		if ( object !== null ) {
358

359
			uuid = object.uuid;
360 361 362

		}

363 364 365
		this.selected = object;

		this.config.setKey( 'selected', uuid );
366 367
		this.signals.objectSelected.dispatch( object );

368 369
	},

370 371
	selectById: function ( id ) {

372 373 374 375 376 377 378
		if ( id === this.camera.id ) {

			this.select( this.camera );
			return;

		}

379
		this.select( this.scene.getObjectById( id, true ) );
380

M
Mr.doob 已提交
381 382 383 384 385 386 387 388 389 390 391 392 393 394 395
	},

	selectByUuid: function ( uuid ) {

		var scope = this;

		this.scene.traverse( function ( child ) {

			if ( child.uuid === uuid ) {

				scope.select( child );

			}

		} );
396 397 398 399 400

	},

	deselect: function () {

M
Mr.doob 已提交
401
		this.select( null );
402

403 404 405 406 407 408 409 410 411 412 413 414
	},

	focus: function ( object ) {

		this.signals.objectFocused.dispatch( object );

	},

	focusById: function ( id ) {

		this.focus( this.scene.getObjectById( id, true ) );

M
Mr.doob 已提交
415 416
	},

M
Mr.doob 已提交
417 418
	clear: function () {

419
		this.history.clear();
420
		this.storage.clear();
421

M
Mr.doob 已提交
422
		this.camera.copy( this.DEFAULT_CAMERA );
M
Mr.doob 已提交
423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438

		var objects = this.scene.children;

		while ( objects.length > 0 ) {

			this.removeObject( objects[ 0 ] );

		}

		this.geometries = {};
		this.materials = {};
		this.textures = {};
		this.scripts = {};

		this.deselect();

439 440
		this.signals.editorCleared.dispatch();

M
Mr.doob 已提交
441 442
	},

M
Mr.doob 已提交
443 444 445 446 447 448 449 450 451 452
	//

	fromJSON: function ( json ) {

		var loader = new THREE.ObjectLoader();

		// backwards

		if ( json.scene === undefined ) {

453
			this.setScene( loader.parse( json ) );
M
Mr.doob 已提交
454 455 456 457 458 459
			return;

		}

		var camera = loader.parse( json.camera );

M
Mr.doob 已提交
460
		this.camera.copy( camera );
M
Mr.doob 已提交
461 462 463
		this.camera.aspect = this.DEFAULT_CAMERA.aspect;
		this.camera.updateProjectionMatrix();

M
Mr.doob 已提交
464 465
		this.history.fromJSON( json.history );
		this.scripts = json.scripts;
M
Mr.doob 已提交
466

M
Mr.doob 已提交
467 468 469 470 471 472
		this.setScene( loader.parse( json.scene ) );

	},

	toJSON: function () {

M
Mr.doob 已提交
473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491
		// scripts clean up

		var scene = this.scene;
		var scripts = this.scripts;

		for ( var key in scripts ) {

			var script = scripts[ key ];

			if ( script.length === 0 || scene.getObjectByProperty( 'uuid', key ) === undefined ) {

				delete scripts[ key ];

			}

		}

		//

M
Mr.doob 已提交
492 493
		return {

M
Mr.doob 已提交
494
			metadata: {},
M
Mr.doob 已提交
495
			project: {
T
thmasn 已提交
496 497
				gammaInput: this.config.getKey( 'project/renderer/gammaInput' ),
				gammaOutput: this.config.getKey( 'project/renderer/gammaOutput' ),
M
Mr.doob 已提交
498 499
				shadows: this.config.getKey( 'project/renderer/shadows' ),
				editable: this.config.getKey( 'project/editable' ),
M
Mr.doob 已提交
500 501
				vr: this.config.getKey( 'project/vr' )
			},
M
Mr.doob 已提交
502 503
			camera: this.camera.toJSON(),
			scene: this.scene.toJSON(),
504 505
			scripts: this.scripts,
			history: this.history.toJSON()
M
Mr.doob 已提交
506 507 508

		};

509 510 511 512 513 514 515 516
	},

	objectByUuid: function ( uuid ) {

		return this.scene.getObjectByProperty( 'uuid', uuid, true );

	},

517
	execute: function ( cmd, optionalName ) {
518

519
		this.history.execute( cmd, optionalName );
520 521 522 523 524 525 526 527 528 529 530 531 532

	},

	undo: function () {

		this.history.undo();

	},

	redo: function () {

		this.history.redo();

533 534
	}

M
Mr.doob 已提交
535
};