提交 f909a1b9 编写于 作者: M Mr.doob

Editor: Reworking step by step @arodic new editor structure.

上级 d3a88f21
......@@ -16,7 +16,6 @@ var Editor = function () {
transformModeChanged: new SIGNALS.Signal(),
snapChanged: new SIGNALS.Signal(),
rendererChanged: new SIGNALS.Signal(),
sceneAdded: new SIGNALS.Signal(),
sceneChanged: new SIGNALS.Signal(),
objectAdded: new SIGNALS.Signal(),
objectSelected: new SIGNALS.Signal(),
......@@ -31,23 +30,58 @@ var Editor = function () {
};
this.scene = new THREE.Scene();
this.sceneHelpers = new THREE.Scene();
this.object = {};
this.geometries = {};
this.materials = {};
this.textures = {};
this.selected = null;
this.helpers = {};
};
Editor.prototype = {
setScene: function ( scene ) {
this.scene.name = scene.name;
this.scene.userData = JSON.parse( JSON.stringify( scene.userData ) );
while ( scene.children.length > 0 ) {
this.addObject( scene.children[ 0 ] );
}
this.signals.sceneChanged.dispatch( this.scene );
},
//
addObject: function ( object, parent ) {
addObject: function ( object ) {
this.scene.add( object );
this.addHelper( object );
this.signals.objectAdded.dispatch( object );
this.signals.sceneChanged.dispatch();
},
removeObject: function ( object ) {
if ( object === this.scene ) return;
var name = object.name ? '"' + object.name + '"': "selected object";
if ( confirm( 'Delete ' + name + '?' ) === false ) return;
this.scene.remove( object );
this.removeHelper( object );
this.signals.sceneChanged.dispatch();
},
......@@ -55,31 +89,99 @@ Editor.prototype = {
},
removeGeometry: function ( geometry ) {
},
addMaterial: function ( material ) {
},
removeMaterial: function ( material ) {
},
addTexture: function ( texture ) {
},
removeTexture: function ( texture ) {
},
//
addHelper: function ( object ) {
if ( object instanceof THREE.PointLight ) {
this.helpers[ object.id ] = new THREE.PointLightHelper( object, 10 );
this.sceneHelpers.add( this.helpers[ object.id ] );
this.helpers[ object.id ].lightSphere.id = object.id;
} else if ( object instanceof THREE.DirectionalLight ) {
this.helpers[ object.id ] = new THREE.DirectionalLightHelper( object, 10 );
this.sceneHelpers.add( this.helpers[ object.id ] );
this.helpers[ object.id ].lightSphere.id = object.id;
} else if ( object instanceof THREE.SpotLight ) {
this.helpers[ object.id ] = new THREE.SpotLightHelper( object, 10 );
this.sceneHelpers.add( this.helpers[ object.id ] );
// this.helpers[ object.id ].lightSphere.id = object.id;
} else if ( object instanceof THREE.HemisphereLight ) {
this.helpers[ object.id ] = new THREE.HemisphereLightHelper( object, 10 );
this.sceneHelpers.add( this.helpers[ object.id ] );
this.helpers[ object.id ].lightSphere.id = object.id;
}
this.signals.sceneChanged.dispatch();
},
removeHelper: function ( object ) {
if ( this.helpers[ object.id ] !== undefined ) {
this.helpers[ object.id ].parent.remove( this.helpers[ object.id ] );
delete this.helpers[ object.id ];
}
},
//
select: function ( object ) {
this.selected = object;
this.signals.objectSelected.dispatch( object );
},
deselect: function ( object ) {
selectById: function ( id ) {
var scope = this;
this.scene.traverse( function ( node ) {
if ( node.id === id ) {
scope.select( node );
}
} );
},
deselect: function () {
this.selected = null;
},
......@@ -87,13 +189,28 @@ Editor.prototype = {
cloneObject: function ( object ) {
this.addObject( object.clone() );
},
flattenObject: function ( object ) {
},
var name = object.name ? '"' + object.name + '"': "selected object";
if ( confirm( 'Flatten ' + name + '?' ) === false ) return;
delete object.__webglInit; // TODO: Remove hack (WebGLRenderer refactoring)
var geometry = object.geometry.clone();
geometry.applyMatrix( object.matrix );
object.setGeometry( geometry );
object.position.set( 0, 0, 0 );
object.rotation.set( 0, 0, 0 );
object.scale.set( 1, 1, 1 );
deleteObject: function ( object ) {
signals.objectChanged.dispatch( object );
}
......
......@@ -28,13 +28,13 @@ var Loader = function ( editor ) {
var timeout;
signals.sceneChanged.add( function ( scene ) {
signals.sceneChanged.add( function () {
clearTimeout( timeout );
timeout = setTimeout( function () {
scope.saveLocalStorage( scene );
scope.saveLocalStorage( editor.scene );
}, 3000 );
......@@ -44,18 +44,10 @@ var Loader = function ( editor ) {
if ( localStorage.threejsEditor !== undefined ) {
try {
var loader = new THREE.ObjectLoader();
var scene = loader.parse( JSON.parse( localStorage.threejsEditor ) );
signals.sceneAdded.dispatch( scene );
} catch ( e ) {
console.warn( "Unable to load object from localStorage." );
var loader = new THREE.ObjectLoader();
var scene = loader.parse( JSON.parse( localStorage.threejsEditor ) );
}
editor.setScene( scene );
}
......@@ -64,6 +56,7 @@ var Loader = function ( editor ) {
this.saveLocalStorage = function ( scene ) {
localStorage.threejsEditor = JSON.stringify( sceneExporter.parse( scene ) );
console.log( 'Saved state to Local Storage' );
}
......@@ -103,7 +96,7 @@ var Loader = function ( editor ) {
var mesh = new THREE.Mesh( geometry, material );
mesh.name = filename;
signals.objectAdded.dispatch( mesh );
editor.addObject( mesh );
} else if ( data.metadata.type === 'object' ) {
......@@ -112,11 +105,11 @@ var Loader = function ( editor ) {
if ( result instanceof THREE.Scene ) {
signals.sceneAdded.dispatch( result );
editor.setScene( result );
} else {
signals.objectAdded.dispatch( result );
editor.addObject( result );
}
......@@ -127,13 +120,7 @@ var Loader = function ( editor ) {
var loader = new THREE.SceneLoader();
loader.parse( data, function ( result ) {
var scene = result.scene;
while ( scene.children.length > 0 ) {
signals.objectAdded.dispatch( scene.children[ 0 ] );
}
editor.setScene( result.scene );
}, '' );
......@@ -166,7 +153,7 @@ var Loader = function ( editor ) {
var mesh = new THREE.Mesh( geometry, material );
mesh.name = filename;
signals.objectAdded.dispatch( mesh );
editor.addObject( mesh );
} );
......@@ -190,7 +177,7 @@ var Loader = function ( editor ) {
collada.scene.name = filename;
signals.objectAdded.dispatch( collada.scene );
editor.addObject( collada.scene );
} );
......@@ -266,7 +253,7 @@ var Loader = function ( editor ) {
var object = new THREE.OBJLoader().parse( contents );
object.name = filename;
signals.objectAdded.dispatch( object );
editor.addObject( object );
}, false );
reader.readAsText( file );
......@@ -291,7 +278,7 @@ var Loader = function ( editor ) {
var mesh = new THREE.Mesh( geometry, material );
mesh.name = filename;
signals.objectAdded.dispatch( mesh );
editor.addObject( mesh );
}, false );
reader.readAsText( file );
......@@ -314,7 +301,7 @@ var Loader = function ( editor ) {
var mesh = new THREE.Mesh( geometry, material );
mesh.name = filename;
signals.objectAdded.dispatch( mesh );
editor.addObject( mesh );
}, false );
......@@ -343,7 +330,7 @@ var Loader = function ( editor ) {
var mesh = new THREE.Mesh( geometry, material );
signals.objectAdded.dispatch( mesh );
editor.addObject( mesh );
}, false );
reader.readAsBinaryString( file );
......@@ -367,7 +354,7 @@ var Loader = function ( editor ) {
var mesh = new THREE.Mesh( geometry, material );
mesh.name = filename;
signals.objectAdded.dispatch( mesh );
editor.addObject( mesh );
}, false );
reader.readAsText( file );
......@@ -383,7 +370,7 @@ var Loader = function ( editor ) {
var result = new THREE.VRMLLoader().parse( contents );
signals.sceneAdded.dispatch( result );
editor.setScene( result );
}, false );
reader.readAsText( file );
......
Menubar.Add = function ( signals ) {
Menubar.Add = function ( editor ) {
var container = new UI.Panel();
container.setClass( 'menu' );
......@@ -41,7 +41,7 @@ Menubar.Add = function ( signals ) {
mesh.rotation.x = - Math.PI/2;
signals.objectAdded.dispatch( mesh );
editor.addObject( mesh );
} );
options.add( option );
......@@ -65,8 +65,7 @@ Menubar.Add = function ( signals ) {
var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
mesh.name = 'Cube ' + ( ++ meshCount );
signals.objectAdded.dispatch( mesh );
editor.addObject( mesh );
} );
options.add( option );
......@@ -89,7 +88,7 @@ Menubar.Add = function ( signals ) {
var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
mesh.name = 'Cylinder ' + ( ++ meshCount );
signals.objectAdded.dispatch( mesh );
editor.addObject( mesh );
} );
options.add( option );
......@@ -109,7 +108,7 @@ Menubar.Add = function ( signals ) {
var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
mesh.name = 'Sphere ' + ( ++ meshCount );
signals.objectAdded.dispatch( mesh );
editor.addObject( mesh );
} );
options.add( option );
......@@ -128,7 +127,7 @@ Menubar.Add = function ( signals ) {
var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
mesh.name = 'Icosahedron ' + ( ++ meshCount );
signals.objectAdded.dispatch( mesh );
editor.addObject( mesh );
} );
options.add( option );
......@@ -150,7 +149,7 @@ Menubar.Add = function ( signals ) {
var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
mesh.name = 'Torus ' + ( ++ meshCount );
signals.objectAdded.dispatch( mesh );
editor.addObject( mesh );
} );
options.add( option );
......@@ -174,7 +173,7 @@ Menubar.Add = function ( signals ) {
var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
mesh.name = 'TorusKnot ' + ( ++ meshCount );
signals.objectAdded.dispatch( mesh );
editor.addObject( mesh );
} );
options.add( option );
......@@ -197,7 +196,7 @@ Menubar.Add = function ( signals ) {
var light = new THREE.PointLight( color, intensity, distance );
light.name = 'PointLight ' + ( ++ lightCount );
signals.objectAdded.dispatch( light );
editor.addObject( light );
} );
options.add( option );
......@@ -221,7 +220,7 @@ Menubar.Add = function ( signals ) {
light.position.set( 0, 1, 0 ).multiplyScalar( 200 );
signals.objectAdded.dispatch( light );
editor.addObject( light );
} );
options.add( option );
......@@ -242,7 +241,7 @@ Menubar.Add = function ( signals ) {
light.position.set( 1, 1, 1 ).multiplyScalar( 200 );
signals.objectAdded.dispatch( light );
editor.addObject( light );
} );
options.add( option );
......@@ -263,7 +262,7 @@ Menubar.Add = function ( signals ) {
light.position.set( 1, 1, 1 ).multiplyScalar( 200 );
signals.objectAdded.dispatch( light );
editor.addObject( light );
} );
options.add( option );
......@@ -280,7 +279,7 @@ Menubar.Add = function ( signals ) {
var light = new THREE.AmbientLight( color );
light.name = 'AmbientLight ' + ( ++ lightCount );
signals.objectAdded.dispatch( light );
editor.addObject( light );
} );
options.add( option );
......@@ -291,7 +290,7 @@ Menubar.Add = function ( signals ) {
return new THREE.MeshPhongMaterial();
};
}
return container;
......
Menubar.Edit = function ( signals ) {
Menubar.Edit = function ( editor ) {
var container = new UI.Panel();
container.setClass( 'menu' );
......@@ -24,7 +24,7 @@ Menubar.Edit = function ( signals ) {
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Clone' );
option.onClick( function () { signals.cloneSelectedObject.dispatch(); } );
option.onClick( function () { editor.cloneObject( editor.selected ); } );
options.add( option );
// flatten
......@@ -32,7 +32,7 @@ Menubar.Edit = function ( signals ) {
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Flatten' );
option.onClick( function () { signals.flattenSelectedObject.dispatch(); } );
option.onClick( function () { editor.flattenObject( editor.selected ); } );
options.add( option );
// delete
......@@ -40,7 +40,7 @@ Menubar.Edit = function ( signals ) {
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Delete' );
option.onClick( function () { signals.removeSelectedObject.dispatch(); } );
option.onClick( function () { editor.removeObject( editor.selected ); } );
options.add( option );
//
......
Menubar.File = function ( signals ) {
Menubar.File = function ( editor ) {
var container = new UI.Panel();
container.setClass( 'menu' );
......@@ -180,20 +180,6 @@ Menubar.File = function ( signals ) {
};
// signals
signals.objectSelected.add( function ( object ) {
selectedObject = object;
} );
signals.sceneChanged.add( function ( object ) {
scene = object;
} );
return container;
}
Menubar.Help = function ( signals ) {
Menubar.Help = function ( editor ) {
var container = new UI.Panel();
container.setClass( 'menu' );
......
var Menubar = function ( editor ) {
var signals = editor.signals;
var container = new UI.Panel();
container.setPosition( 'absolute' );
container.setClass( 'menubar' );
container.add( new Menubar.File( signals ) );
container.add( new Menubar.Edit( signals ) );
container.add( new Menubar.Add( signals ) );
container.add( new Menubar.Help( signals ) );
container.add( new Menubar.File( editor ) );
container.add( new Menubar.Edit( editor ) );
container.add( new Menubar.Add( editor ) );
container.add( new Menubar.Help( editor ) );
return container;
......
Sidebar.Animation = function ( signals ) {
Sidebar.Animation = function ( editor ) {
var signals = editor.signals;
var options = {};
var possibleAnimations = {};
......
Sidebar.Geometry = function ( signals ) {
Sidebar.Geometry = function ( editor ) {
var signals = editor.signals;
var geometryClasses = {
......
Sidebar.Material = function ( signals ) {
Sidebar.Material = function ( editor ) {
var signals = editor.signals;
var materialClasses = {
......
Sidebar.Object3D = function ( signals ) {
Sidebar.Object3D = function ( editor ) {
var signals = editor.signals;
var container = new UI.Panel();
container.setBorderTop( '1px solid #ccc' );
......@@ -215,8 +217,6 @@ Sidebar.Object3D = function ( signals ) {
var selected = null;
var scene = null;
function updateScaleX() {
if ( objectScaleLock.getValue() === true ) {
......@@ -285,7 +285,7 @@ Sidebar.Object3D = function ( signals ) {
parent.add( selected );
signals.sceneChanged.dispatch( scene );
signals.sceneChanged.dispatch();
}
......@@ -441,9 +441,9 @@ Sidebar.Object3D = function ( signals ) {
// events
signals.sceneChanged.add( function ( object ) {
signals.sceneChanged.add( function () {
scene = object;
var scene = editor.scene;
var options = {};
......@@ -461,7 +461,7 @@ Sidebar.Object3D = function ( signals ) {
}
} )( object.children );
} )( scene.children );
objectParent.setOptions( options );
......
Sidebar.Renderer = function ( signals ) {
Sidebar.Renderer = function ( editor ) {
var signals = editor.signals;
var rendererClasses = {
......
Sidebar.Scene = function ( signals ) {
Sidebar.Scene = function ( editor ) {
var signals = editor.signals;
var selected = null;
......@@ -79,8 +81,6 @@ Sidebar.Scene = function ( signals ) {
//
var scene = null;
function getObjectType( object ) {
var objects = {
......@@ -108,17 +108,7 @@ Sidebar.Scene = function ( signals ) {
function updateOutliner() {
var id = parseInt( outliner.getValue() );
scene.traverse( function ( node ) {
if ( node.id === id ) {
signals.objectSelected.dispatch( node );
return;
}
} );
editor.selectById( id );
}
......@@ -158,9 +148,9 @@ Sidebar.Scene = function ( signals ) {
var selected;
signals.sceneChanged.add( function ( object ) {
signals.sceneChanged.add( function () {
scene = object;
var scene = editor.scene;
var options = {};
......
var Sidebar = function ( editor ) {
var signals = editor.signals;
var container = new UI.Panel();
container.setPosition( 'absolute' );
container.setClass( 'sidebar' );
container.add( new Sidebar.Renderer( signals ) );
container.add( new Sidebar.Scene( signals ) );
container.add( new Sidebar.Object3D( signals ) );
container.add( new Sidebar.Geometry( signals ) );
container.add( new Sidebar.Material( signals ) );
container.add( new Sidebar.Animation( signals ) );
container.add( new Sidebar.Renderer( editor ) );
container.add( new Sidebar.Scene( editor ) );
container.add( new Sidebar.Object3D( editor ) );
container.add( new Sidebar.Geometry( editor ) );
container.add( new Sidebar.Material( editor ) );
container.add( new Sidebar.Animation( editor ) );
return container;
......
......@@ -14,6 +14,9 @@ var Viewport = function ( editor ) {
info.setColor( '#ffffff' );
container.add( info );
var scene = editor.scene;
var sceneHelpers = editor.sceneHelpers;
var clearColor = 0xAAAAAA;
var objects = [];
......@@ -22,15 +25,11 @@ var Viewport = function ( editor ) {
var helpersToObjects = {};
var objectsToHelpers = {};
var sceneHelpers = new THREE.Scene();
var grid = new THREE.GridHelper( 500, 25 );
sceneHelpers.add( grid );
//
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 50, container.dom.offsetWidth / container.dom.offsetHeight, 1, 5000 );
camera.position.set( 500, 250, 500 );
camera.lookAt( scene.position );
......@@ -176,6 +175,13 @@ var Viewport = function ( editor ) {
// signals
signals.sceneChanged.add( function () {
updateInfo();
render();
} );
signals.transformModeChanged.add( function ( mode ) {
transformControls.setMode( mode );
......@@ -211,90 +217,9 @@ var Viewport = function ( editor ) {
} );
signals.sceneAdded.add( function ( object ) {
scene.userData = JSON.parse( JSON.stringify( object.userData ) );
while ( object.children.length > 0 ) {
signals.objectAdded.dispatch( object.children[ 0 ] );
}
} );
signals.objectAdded.add( function ( object ) {
// handle children
object.traverse( function ( object ) {
// create helpers for invisible object types (lights, cameras, targets)
if ( object instanceof THREE.PointLight ) {
var helper = new THREE.PointLightHelper( object, 10 );
sceneHelpers.add( helper );
objectsToHelpers[ object.id ] = helper;
helpersToObjects[ helper.lightSphere.id ] = object;
objects.push( helper.lightSphere );
} else if ( object instanceof THREE.DirectionalLight ) {
var helper = new THREE.DirectionalLightHelper( object, 10 );
sceneHelpers.add( helper );
objectsToHelpers[ object.id ] = helper;
helpersToObjects[ helper.lightSphere.id ] = object;
objects.push( helper.lightSphere );
} else if ( object instanceof THREE.SpotLight ) {
var helper = new THREE.SpotLightHelper( object, 10 );
sceneHelpers.add( helper );
objectsToHelpers[ object.id ] = helper;
helpersToObjects[ helper.lightSphere.id ] = object;
objects.push( helper.lightSphere );
} else if ( object instanceof THREE.HemisphereLight ) {
var helper = new THREE.HemisphereLightHelper( object, 10 );
sceneHelpers.add( helper );
objectsToHelpers[ object.id ] = helper;
helpersToObjects[ helper.lightSphere.id ] = object;
objects.push( helper.lightSphere );
} else {
// add to picking list
objects.push( object );
}
} );
scene.add( object );
// TODO: Add support for hierarchies with lights
if ( object instanceof THREE.Light ) {
updateMaterials( scene );
}
updateInfo();
signals.sceneChanged.dispatch( scene );
signals.objectSelected.dispatch( object );
objects.push( object );
} );
......@@ -332,7 +257,6 @@ var Viewport = function ( editor ) {
selectionBox.update( object );
transformControls.update();
updateInfo();
}
......@@ -348,96 +272,6 @@ var Viewport = function ( editor ) {
} );
signals.flattenSelectedObject.add( function () {
var name = selected.name ? '"' + selected.name + '"': "selected object";
if ( confirm( 'Flatten ' + name + '?' ) === false ) return;
delete selected.__webglInit; // TODO: Remove hack (WebGLRenderer refactoring)
var geometry = selected.geometry.clone();
geometry.applyMatrix( selected.matrix );
selected.setGeometry( geometry );
selected.position.set( 0, 0, 0 );
selected.rotation.set( 0, 0, 0 );
selected.scale.set( 1, 1, 1 );
signals.objectChanged.dispatch( selected );
} );
signals.cloneSelectedObject.add( function () {
if ( selected === camera ) return;
var object = selected.clone();
signals.objectAdded.dispatch( object );
} );
signals.removeSelectedObject.add( function () {
if ( selected.parent === undefined ) return;
var name = selected.name ? '"' + selected.name + '"': "selected object";
if ( confirm( 'Delete ' + name + '?' ) === false ) return;
var parent = selected.parent;
if ( selected instanceof THREE.PointLight ||
selected instanceof THREE.DirectionalLight ||
selected instanceof THREE.SpotLight ||
selected instanceof THREE.HemisphereLight ) {
var helper = objectsToHelpers[ selected.id ];
objects.splice( objects.indexOf( helper.lightSphere ), 1 );
helper.parent.remove( helper );
selected.parent.remove( selected );
delete objectsToHelpers[ selected.id ];
delete helpersToObjects[ helper.id ];
if ( selected instanceof THREE.DirectionalLight ||
selected instanceof THREE.SpotLight ) {
selected.target.parent.remove( selected.target );
}
updateMaterials( scene );
} else {
selected.traverse( function ( object ) {
var index = objects.indexOf( object );
if ( index !== -1 ) {
objects.splice( index, 1 )
}
} );
selected.parent.remove( selected );
updateInfo();
}
signals.sceneChanged.dispatch( scene );
signals.objectSelected.dispatch( parent );
} );
signals.materialChanged.add( function ( material ) {
render();
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册