Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 43eecce6 编写于 作者: M Mr.doob
浏览文件
操作

Editor: Reverted to previous code style for Menubar.

上级 31e4492a
隐藏空白更改
内联 并排
Showing with 410 addition and 308 deletion
editor/css/dark.css
浏览文件 @ 43eecce6
......@@ -132,9 +132,11 @@ input.Number {
cursor: pointer;
}
#menubar .Panel {
color: #888;
}
#menubar .menu .title {
color: #888;
margin: 0px;
padding: 8px;
}
#menubar .menu .options {
display: none;
......
editor/css/light.css
浏览文件 @ 43eecce6
......@@ -106,9 +106,11 @@ input.Number {
cursor: pointer;
}
#menubar .Panel {
color: #888;
}
#menubar .menu .title {
color: #888;
margin: 0px;
padding: 8px;
}
#menubar .menu .options {
display: none;
......
editor/index.html
浏览文件 @ 43eecce6
......@@ -44,7 +44,6 @@
<script src="js/libs/signals.min.js"></script>
<script src="js/libs/ui.js"></script>
<script src="js/libs/ui.editor.js"></script>
<script src="js/libs/ui.three.js"></script>
<script src="js/Storage.js"></script>
......
editor/js/Menubar.Add.js
浏览文件 @ 43eecce6
Menubar.Add = function ( editor ) {
var container = new UI.Panel();
container.setClass( 'menu' );
var title = new UI.Panel();
title.setClass( 'title' );
title.setTextContent( 'Add' );
container.add( title );
var options = new UI.Panel();
options.setClass( 'options' );
container.add( options );
//
var meshCount = 0;
var lightCount = 0;
// event handlers
// Group
function onGroupOptionClick () {
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Group' );
option.onClick( function () {
var mesh = new THREE.Group();
mesh.name = 'Group ' + ( ++ meshCount );
......@@ -13,9 +30,19 @@ Menubar.Add = function ( editor ) {
editor.addObject( mesh );
editor.select( mesh );
}
} );
options.add( option );
function onPlaneOptionClick () {
//
options.add( new UI.HorizontalRule() );
// Plane
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Plane' );
option.onClick( function () {
var width = 200;
var height = 200;
......@@ -31,9 +58,15 @@ Menubar.Add = function ( editor ) {
editor.addObject( mesh );
editor.select( mesh );
};
} );
options.add( option );
// Box
function onBoxOptionClick () {
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Box' );
option.onClick( function () {
var width = 100;
var height = 100;
......@@ -50,9 +83,15 @@ Menubar.Add = function ( editor ) {
editor.addObject( mesh );
editor.select( mesh );
}
function onCircleOptionClick () {
} );
options.add( option );
// Circle
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Circle' );
option.onClick( function () {
var radius = 20;
var segments = 8;
......@@ -64,9 +103,15 @@ Menubar.Add = function ( editor ) {
editor.addObject( mesh );
editor.select( mesh );
}
} );
options.add( option );
function onCylinderOptionClick () {
// Cylinder
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Cylinder' );
option.onClick( function () {
var radiusTop = 20;
var radiusBottom = 20;
......@@ -82,9 +127,15 @@ Menubar.Add = function ( editor ) {
editor.addObject( mesh );
editor.select( mesh );
}
} );
options.add( option );
// Sphere
function onSphereOptionClick () {
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Sphere' );
option.onClick( function () {
var radius = 75;
var widthSegments = 32;
......@@ -97,23 +148,35 @@ Menubar.Add = function ( editor ) {
editor.addObject( mesh );
editor.select( mesh );
}
} );
options.add( option );
function onIcosahedronOptionClick () {
// Icosahedron
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Icosahedron' );
option.onClick( function () {
var radius = 75;
var detail = 2;
var geometry = new THREE.IcosahedronGeometry ( radius, detail );
var geometry = new THREE.IcosahedronGeometry( radius, detail );
var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
mesh.name = 'Icosahedron ' + ( ++ meshCount );
editor.addObject( mesh );
editor.select( mesh );
}
} );
options.add( option );
// Torus
function onTorusOptionClick () {
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Torus' );
option.onClick( function () {
var radius = 100;
var tube = 40;
......@@ -128,9 +191,15 @@ Menubar.Add = function ( editor ) {
editor.addObject( mesh );
editor.select( mesh );
}
} );
options.add( option );
function onTorusKnotOptionClick () {
// TorusKnot
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'TorusKnot' );
option.onClick( function () {
var radius = 100;
var tube = 40;
......@@ -147,9 +216,19 @@ Menubar.Add = function ( editor ) {
editor.addObject( mesh );
editor.select( mesh );
}
} );
options.add( option );
//
function onSpriteOptionClick () {
options.add( new UI.HorizontalRule() );
// Sprite
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Sprite' );
option.onClick( function () {
var sprite = new THREE.Sprite( new THREE.SpriteMaterial() );
sprite.name = 'Sprite ' + ( ++ meshCount );
......@@ -157,9 +236,19 @@ Menubar.Add = function ( editor ) {
editor.addObject( sprite );
editor.select( sprite );
}
} );
options.add( option );
//
options.add( new UI.HorizontalRule() );
function onPointLightOptionClick () {
// PointLight
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'PointLight' );
option.onClick( function () {
var color = 0xffffff;
var intensity = 1;
......@@ -171,9 +260,15 @@ Menubar.Add = function ( editor ) {
editor.addObject( light );
editor.select( light );
}
} );
options.add( option );
// SpotLight
function onSpotLightOptionClick () {
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'SpotLight' );
option.onClick( function () {
var color = 0xffffff;
var intensity = 1;
......@@ -190,9 +285,15 @@ Menubar.Add = function ( editor ) {
editor.addObject( light );
editor.select( light );
}
} );
options.add( option );
function onDirectionalLightOptionClick () {
// DirectionalLight
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'DirectionalLight' );
option.onClick( function () {
var color = 0xffffff;
var intensity = 1;
......@@ -206,9 +307,15 @@ Menubar.Add = function ( editor ) {
editor.addObject( light );
editor.select( light );
}
} );
options.add( option );
// HemisphereLight
function onHemisphereLightOptionClick () {
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'HemisphereLight' );
option.onClick( function () {
var skyColor = 0x00aaff;
var groundColor = 0xffaa00;
......@@ -222,9 +329,15 @@ Menubar.Add = function ( editor ) {
editor.addObject( light );
editor.select( light );
}
} );
options.add( option );
function onAmbientLightOptionClick() {
// AmbientLight
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'AmbientLight' );
option.onClick( function() {
var color = 0x222222;
......@@ -234,39 +347,9 @@ Menubar.Add = function ( editor ) {
editor.addObject( light );
editor.select( light );
}
// configure menu contents
var createOption = UI.MenubarHelper.createOption;
var createDivider = UI.MenubarHelper.createDivider;
var menuConfig = [
createOption( 'Group', onGroupOptionClick ),
createDivider(),
createOption( 'Plane', onPlaneOptionClick ),
createOption( 'Box', onBoxOptionClick ),
createOption( 'Circle', onCircleOptionClick ),
createOption( 'Cylinder', onCylinderOptionClick ),
createOption( 'Sphere', onSphereOptionClick ),
createOption( 'Icosahedron', onIcosahedronOptionClick ),
createOption( 'Torus', onTorusOptionClick ),
createOption( 'Torus Knot', onTorusKnotOptionClick ),
createDivider(),
createOption( 'Sprite', onSpriteOptionClick ),
createDivider(),
createOption( 'Point light', onPointLightOptionClick ),
createOption( 'Spot light', onSpotLightOptionClick ),
createOption( 'Directional light', onDirectionalLightOptionClick ),
createOption( 'Hemisphere light', onHemisphereLightOptionClick ),
createOption( 'Ambient light', onAmbientLightOptionClick )
];
var optionsPanel = UI.MenubarHelper.createOptionsPanel( menuConfig );
} );
options.add( option );
return UI.MenubarHelper.createMenuContainer( 'Add', optionsPanel );
return container;
}
editor/js/Menubar.Edit.js
浏览文件 @ 43eecce6
Menubar.Edit = function ( editor ) {
// event handlers
var container = new UI.Panel();
container.setClass( 'menu' );
// function onUndoOptionClick () {
var title = new UI.Panel();
title.setClass( 'title' );
title.setTextContent( 'Edit' );
container.add( title );
// console.log( 'UNDO not implemented yet' );
var options = new UI.Panel();
options.setClass( 'options' );
container.add( options );
// }
// Clone
// function onRedoOptionClick () {
// console.log( 'REDO not implemented yet' );
// }
function onCloneOptionClick () {
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Clone' );
option.onClick( function () {
var object = editor.selected;
......@@ -25,17 +28,33 @@ Menubar.Edit = function ( editor ) {
editor.addObject( object );
editor.select( object );
}
} );
options.add( option );
// Delete
function onDeleteOptionClick () {
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Delete' );
option.onClick( function () {
var parent = editor.selected.parent;
editor.removeObject( editor.selected );
editor.select( parent );
}
} );
options.add( option );
//
options.add( new UI.HorizontalRule() );
// Convert
function onConvertOptionClick () {
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Convert' );
option.onClick( function () {
// convert to BufferGeometry
......@@ -53,9 +72,15 @@ Menubar.Edit = function ( editor ) {
}
}
} );
options.add( option );
function onFlattenOptionClick () {
// Flatten
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Flatten' );
option.onClick( function () {
var object = editor.selected;
......@@ -66,7 +91,6 @@ Menubar.Edit = function ( editor ) {
var geometry = object.geometry.clone();
geometry.applyMatrix( object.matrix );
object.geometry = geometry;
object.position.set( 0, 0, 0 );
......@@ -76,27 +100,9 @@ Menubar.Edit = function ( editor ) {
object.geometry.buffersNeedUpdate = true;
editor.signals.objectChanged.dispatch( object );
}
// configure menu contents
var createOption = UI.MenubarHelper.createOption;
var createDivider = UI.MenubarHelper.createDivider;
var menuConfig = [
// createOption( 'Undo', onUndoOptionClick ),
// createOption( 'Redo', onRedoOptionClick ),
// createDivider(),
createOption( 'Clone', onCloneOptionClick ),
createOption( 'Delete', onDeleteOptionClick ),
createDivider(),
createOption( 'Convert', onConvertOptionClick ),
createOption( 'Flatten', onFlattenOptionClick )
];
} );
options.add( option );
var optionsPanel = UI.MenubarHelper.createOptionsPanel( menuConfig );
return container;
return UI.MenubarHelper.createMenuContainer( 'Edit', optionsPanel );
}
};
\ No newline at end of file
editor/js/Menubar.File.js
浏览文件 @ 43eecce6
Menubar.File = function ( editor ) {
// helpers
function exportGeometry ( exporterClass ) {
var object = editor.selected;
var exporter = new exporterClass();
var output = exporter.parse( object.geometry );
if ( exporter instanceof THREE.BufferGeometryExporter ||
exporter instanceof THREE.GeometryExporter ) {
output = JSON.stringify( output, null, '\t' );
output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
}
var blob = new Blob( [ output ], { type: 'text/plain' } );
var objectURL = URL.createObjectURL( blob );
window.open( objectURL, '_blank' );
window.focus();
};
function exportObject ( exporterClass ) {
var object = editor.selected;
var exporter = new exporterClass();
var container = new UI.Panel();
container.setClass( 'menu' );
var output = JSON.stringify( exporter.parse( object ), null, '\t' );
output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
var title = new UI.Panel();
title.setClass( 'title' );
title.setTextContent( 'File' );
container.add( title );
var blob = new Blob( [ output ], { type: 'text/plain' } );
var objectURL = URL.createObjectURL( blob );
var options = new UI.Panel();
options.setClass( 'options' );
container.add( options );
window.open( objectURL, '_blank' );
window.focus();
// New
}
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'New' );
option.onClick( function () {
function exportScene ( exporterClass ) {
var exporter = new exporterClass();
if ( confirm( 'Are you sure?' ) ) {
var output = exporter.parse( editor.scene );
editor.config.clear();
editor.storage.clear( function () {
if ( exporter instanceof THREE.ObjectExporter ) {
location.href = location.pathname;
output = JSON.stringify( output, null, '\t' );
output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
} );
}
var blob = new Blob( [ output ], { type: 'text/plain' } );
var objectURL = URL.createObjectURL( blob );
window.open( objectURL, '_blank' );
window.focus();
} );
options.add( option );
}
//
// event handlers
options.add( new UI.HorizontalRule() );
function onNewOptionClick () {
// Import
if ( confirm( 'Are you sure?' ) ) {
editor.config.clear();
editor.storage.clear( function () {
location.href = location.pathname;
} );
var fileInput = document.createElement( 'input' );
fileInput.type = 'file';
fileInput.addEventListener( 'change', function ( event ) {
}
editor.loader.loadFile( fileInput.files[ 0 ] );
}
} );
function onImportOptionClick () {
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Import' );
option.onClick( function () {
fileInput.click();
}
} );
options.add( option );
function onFileInputChange ( event ) {
//
editor.loader.loadFile( fileInput.files[ 0 ] );
options.add( new UI.HorizontalRule() );
}
// Export Geometry
function onExportGeometryOptionClick () {
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Export Geometry' );
option.onClick( function () {
var object = editor.selected;
......@@ -121,9 +96,15 @@ Menubar.File = function ( editor ) {
}
}
} );
options.add( option );
// Export Object
function onExportObjectOptionClick () {
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Export Object' );
option.onClick( function () {
if ( editor.selected === null ) {
......@@ -134,63 +115,125 @@ Menubar.File = function ( editor ) {
exportObject( THREE.ObjectExporter );
}
} );
options.add( option );
// Export Scene
function onExportSceneOptionClick () {
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Export Scene' );
option.onClick( function () {
exportScene( THREE.ObjectExporter );
}
} );
options.add( option );
function onExportOBJOptionClick () {
// Export OBJ
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Export OBJ' );
option.onClick( function () {
exportGeometry( THREE.OBJExporter );
}
} );
options.add( option );
// Export STL
function onExportSTLOptionClick () {
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Export STL' );
option.onClick( function () {
exportScene( THREE.STLExporter );
}
} );
options.add( option );
//
options.add( new UI.HorizontalRule() );
function onExportTestOptionClick() {
// Test
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Test' );
option.onClick( function () {
var text = new UI.Text( 'blah' );
editor.showDialog( text );
}
} );
options.add( option );
// create file input element for scene import
var fileInput = document.createElement( 'input' );
fileInput.type = 'file';
fileInput.addEventListener( 'change', onFileInputChange);
//
var exportGeometry = function ( exporterClass ) {
// configure menu contents
var object = editor.selected;
var exporter = new exporterClass();
var createOption = UI.MenubarHelper.createOption;
var createDivider = UI.MenubarHelper.createDivider;
var menuConfig = [
createOption( 'New', onNewOptionClick ),
createDivider(),
createOption( 'Import', onImportOptionClick ),
createDivider(),
createOption( 'Export Geometry', onExportGeometryOptionClick ),
createOption( 'Export Object', onExportObjectOptionClick ),
createOption( 'Export Scene', onExportSceneOptionClick ),
createOption( 'Export OBJ', onExportOBJOptionClick ),
createOption( 'Export STL', onExportSTLOptionClick ),
createDivider(),
createOption( 'Export Test', onExportTestOptionClick )
];
var output = exporter.parse( object.geometry );
if ( exporter instanceof THREE.BufferGeometryExporter ||
exporter instanceof THREE.GeometryExporter ) {
var optionsPanel = UI.MenubarHelper.createOptionsPanel( menuConfig );
output = JSON.stringify( output, null, '\t' );
output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
}
var blob = new Blob( [ output ], { type: 'text/plain' } );
var objectURL = URL.createObjectURL( blob );
window.open( objectURL, '_blank' );
window.focus();
};
var exportObject = function ( exporterClass ) {
var object = editor.selected;
var exporter = new exporterClass();
var output = JSON.stringify( exporter.parse( object ), null, '\t' );
output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
var blob = new Blob( [ output ], { type: 'text/plain' } );
var objectURL = URL.createObjectURL( blob );
window.open( objectURL, '_blank' );
window.focus();
};
var exportScene = function ( exporterClass ) {
var exporter = new exporterClass();
var output = exporter.parse( editor.scene );
if ( exporter instanceof THREE.ObjectExporter ) {
output = JSON.stringify( output, null, '\t' );
output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
}
var blob = new Blob( [ output ], { type: 'text/plain' } );
var objectURL = URL.createObjectURL( blob );
window.open( objectURL, '_blank' );
window.focus();
};
return UI.MenubarHelper.createMenuContainer( 'File', optionsPanel );
return container;
}
};
\ No newline at end of file
editor/js/Menubar.Help.js
浏览文件 @ 43eecce6
Menubar.Help = function ( editor ) {
// event handlers
var container = new UI.Panel();
container.setClass( 'menu' );
function onSourcecodeOptionClick () {
var title = new UI.Panel();
title.setClass( 'title' );
title.setTextContent( 'Help' );
container.add( title );
window.open( 'https://github.com/mrdoob/three.js/tree/master/editor', '_blank' )
var options = new UI.Panel();
options.setClass( 'options' );
container.add( options );
}
// Source code
function onAboutOptionClick () {
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Source code' );
option.onClick( function () {
window.open( 'http://threejs.org', '_blank' );
window.open( 'https://github.com/mrdoob/three.js/tree/master/editor', '_blank' )
}
} );
options.add( option );
// configure menu contents
// About
var createOption = UI.MenubarHelper.createOption;
var createDivider = UI.MenubarHelper.createDivider;
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'About' );
option.onClick( function () {
window.open( 'http://threejs.org', '_blank' );
var menuConfig = [
createOption( 'Source code', onSourcecodeOptionClick ),
createOption( 'About', onAboutOptionClick )
];
} );
options.add( option );
var optionsPanel = UI.MenubarHelper.createOptionsPanel( menuConfig );
return container;
return UI.MenubarHelper.createMenuContainer( 'Help', optionsPanel );
}
};
\ No newline at end of file
editor/js/Menubar.View.js
浏览文件 @ 43eecce6
Menubar.View = function ( editor ) {
var menuConfig,
optionsPanel,
createOption,
createDivider;
function onLightThemeOptionClick () {
var container = new UI.Panel();
container.setClass( 'menu' );
editor.setTheme( 'css/light.css' );
editor.config.setKey( 'theme', 'css/light.css' );
var title = new UI.Panel();
title.setClass( 'title' );
title.setTextContent( 'View' );
container.add( title );
}
var options = new UI.Panel();
options.setClass( 'options' );
container.add( options );
function onDarkThemeOptionClick () {
// Light theme
editor.setTheme( 'css/dark.css' );
editor.config.setKey( 'theme', 'css/dark.css' );
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Light theme' );
option.onClick( function () {
}
editor.setTheme( 'css/light.css' );
editor.config.setKey( 'theme', 'css/light.css' );
} );
options.add( option );
// configure menu contents
// Dark theme
createOption = UI.MenubarHelper.createOption;
createDivider = UI.MenubarHelper.createDivider;
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( 'Dark theme' );
option.onClick( function () {
menuConfig = [
createOption( 'Light theme', onLightThemeOptionClick ),
createOption( 'Dark theme', onDarkThemeOptionClick )
];
editor.setTheme( 'css/dark.css' );
editor.config.setKey( 'theme', 'css/dark.css' );
optionsPanel = UI.MenubarHelper.createOptionsPanel( menuConfig );
} );
options.add( option );
return UI.MenubarHelper.createMenuContainer( 'View', optionsPanel );
return container;
}
};
\ No newline at end of file
editor/js/libs/ui.editor.js 已删除 100644 → 0
浏览文件 @ 31e4492a
UI.MenubarHelper = {
createMenuContainer: function ( name, optionsPanel ) {
var container = new UI.Panel();
var title = new UI.Panel();
title.setTextContent( name );
title.setMargin( '0px' );
title.setPadding( '8px' );
container.setClass( 'menu' );
container.add( title );
container.add( optionsPanel );
return container;
},
createOption: function ( name, callbackHandler ) {
var option = new UI.Panel();
option.setClass( 'option' );
option.setTextContent( name );
option.onClick( callbackHandler );
return option;
},
createOptionsPanel: function ( menuConfig ) {
var options = new UI.Panel();
options.setClass( 'options' );
menuConfig.forEach(function(option) {
options.add(option);
});
return options;
},
createDivider: function () {
return new UI.HorizontalRule();
}
};
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或