Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

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

Editor: Cleaned up menubar.

上级 bec5849d
隐藏空白更改
内联 并排
Showing with 80 addition and 120 deletion
editor/index.html
浏览文件 @ 209e1737
...@@ -14,6 +14,40 @@ ...@@ -14,6 +14,40 @@
border: 0px; border: 0px;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
} }
.menubar {
background-color: #eee;
padding: 0px;
margin: 0px;
}
.menubar .menu {
float: left;
width: 50px;
cursor: pointer;
}
.menubar .menu .options {
background-color: #fff;
display: none;
}
.menubar .menu:hover .options {
display: block;
}
.menubar .menu .options .option {
color: #666;
background-color: transparent;
padding: 5px 10px;
margin: 0px !important;
}
.menubar .menu .options .option:hover {
background-color: #eee;
}
</style> </style>
</head> </head>
<body> <body>
......
editor/js/UI.js
浏览文件 @ 209e1737
...@@ -4,6 +4,14 @@ UI.Element = function () {}; ...@@ -4,6 +4,14 @@ UI.Element = function () {};
UI.Element.prototype = { UI.Element.prototype = {
setClass: function ( name ) {
this.dom.className = name;
return this;
},
// styles // styles
setStyle: function ( style, array ) { setStyle: function ( style, array ) {
......
editor/js/ui/Menubar.Add.js
浏览文件 @ 209e1737
Menubar.Add = function ( signals ) { Menubar.Add = function ( signals ) {
var container = new UI.Panel(); var container = new UI.Panel();
container.setFloat( 'left' ); container.setClass( 'menu' );
container.setWidth( '50px' );
container.setCursor( 'pointer' );
container.onMouseOver( function () { options.setDisplay( '' ) } );
container.onMouseOut( function () { options.setDisplay( 'none' ) } );
container.onClick( function () { options.setDisplay( 'none' ) } );
var title = new UI.Panel(); var title = new UI.Panel();
title.setTextContent( 'Add' ).setColor( '#666' ); title.setTextContent( 'Add' ).setColor( '#666' );
title.setMargin( '0px' ); title.setMargin( '0px' );
title.setPadding( '8px' ) title.setPadding( '8px' );
container.add( title ); container.add( title );
// //
var options = new UI.Panel(); var options = new UI.Panel();
options.setClass( 'options' );
options.setWidth( '140px' ); options.setWidth( '140px' );
options.setBackgroundColor( '#ddd' );
options.setPadding( '0px' );
options.setBorderTop( 'solid 1px #ccc' );
options.setStyle( 'box-shadow', [ '0 3px 6px rgba(0,0,0,0.1), 3px 3px 6px rgba(0,0,0,0.2)' ] );
options.setDisplay( 'none' );
container.add( options ); container.add( options );
// add sphere // add sphere
var option = new UI.Panel(); var option = new UI.Panel();
option.setTextContent( 'Sphere' ).setColor( '#666' ).setPadding( '6px 12px' ); option.setClass( 'option' );
option.setTextContent( 'Sphere' );
option.onClick( function () { option.onClick( function () {
var radius = 75; var radius = 75;
...@@ -44,12 +36,11 @@ Menubar.Add = function ( signals ) { ...@@ -44,12 +36,11 @@ Menubar.Add = function ( signals ) {
} ); } );
options.add( option ); options.add( option );
addHoverStyle( option );
// add cube // add cube
var option = new UI.Panel(); var option = new UI.Panel();
option.setTextContent( 'Cube' ).setColor( '#666' ).setPadding( '6px 12px' ); option.setClass( 'option' );
option.setTextContent( 'Cube' );
option.onClick( function () { option.onClick( function () {
var width = 100; var width = 100;
...@@ -70,12 +61,11 @@ Menubar.Add = function ( signals ) { ...@@ -70,12 +61,11 @@ Menubar.Add = function ( signals ) {
} ); } );
options.add( option ); options.add( option );
addHoverStyle( option );
// add plane // add plane
var option = new UI.Panel(); var option = new UI.Panel();
option.setTextContent( 'Plane' ).setColor( '#666' ).setPadding( '6px 12px' ); option.setClass( 'option' );
option.setTextContent( 'Plane' );
option.onClick( function () { option.onClick( function () {
var width = 200; var width = 200;
...@@ -95,18 +85,15 @@ Menubar.Add = function ( signals ) { ...@@ -95,18 +85,15 @@ Menubar.Add = function ( signals ) {
} ); } );
options.add( option ); options.add( option );
addHoverStyle( option );
// divider // divider
var option = new UI.Panel(); options.add( new UI.HorizontalRule() );
option.setBackgroundColor( '#ccc' ).setPadding( '1px 12px' );
options.add( option );
// add directional light // add directional light
var option = new UI.Panel(); var option = new UI.Panel();
option.setTextContent( 'Directional light' ).setColor( '#666' ).setPadding( '6px 12px' ); option.setClass( 'option' );
option.setTextContent( 'Directional light' );
option.onClick( function () { option.onClick( function () {
var color = 0xffffff; var color = 0xffffff;
...@@ -125,12 +112,11 @@ Menubar.Add = function ( signals ) { ...@@ -125,12 +112,11 @@ Menubar.Add = function ( signals ) {
} ); } );
options.add( option ); options.add( option );
addHoverStyle( option );
// add point light // add point light
var option = new UI.Panel(); var option = new UI.Panel();
option.setTextContent( 'Point light' ).setColor( '#666' ).setPadding( '6px 12px' ); option.setClass( 'option' );
option.setTextContent( 'Point light' );
option.onClick( function () { option.onClick( function () {
var color = 0xffffff; var color = 0xffffff;
...@@ -145,22 +131,12 @@ Menubar.Add = function ( signals ) { ...@@ -145,22 +131,12 @@ Menubar.Add = function ( signals ) {
} ); } );
options.add( option ); options.add( option );
addHoverStyle( option );
// add spot light // add spot light
// add hemisphere light // add hemisphere light
// add ambient light // add ambient light
//
function addHoverStyle( element ) {
element.onMouseOver( function () { element.setBackgroundColor( '#356' ).setColor( '#eee' ); } );
element.onMouseOut( function () { element.setBackgroundColor( 'transparent' ).setColor( '#666' ) } );
}
function createDummyMaterial() { function createDummyMaterial() {
......
editor/js/ui/Menubar.Edit.js
浏览文件 @ 209e1737
Menubar.Edit = function ( signals ) { Menubar.Edit = function ( signals ) {
var container = new UI.Panel(); var container = new UI.Panel();
container.setFloat( 'left' ); container.setClass( 'menu' );
container.setWidth( '50px' );
container.setCursor( 'pointer' );
container.onMouseOver( function () { options.setDisplay( '' ) } );
container.onMouseOut( function () { options.setDisplay( 'none' ) } );
container.onClick( function () { options.setDisplay( 'none' ) } );
var title = new UI.Panel(); var title = new UI.Panel();
title.setTextContent( 'Edit' ).setColor( '#666' ); title.setTextContent( 'Edit' ).setColor( '#666' );
title.setMargin( '0px' ); title.setMargin( '0px' );
title.setPadding( '8px' ) title.setPadding( '8px' );
container.add( title ); container.add( title );
// //
var options = new UI.Panel(); var options = new UI.Panel();
options.setClass( 'options' );
options.setWidth( '140px' ); options.setWidth( '140px' );
options.setBackgroundColor( '#ddd' );
options.setPadding( '0px' );
options.setBorderTop( 'solid 1px #ccc' );
options.setStyle( 'box-shadow', [ '0 3px 6px rgba(0,0,0,0.1), 3px 3px 6px rgba(0,0,0,0.2)' ] );
options.setDisplay( 'none' );
container.add( options ); container.add( options );
// delete // delete
var option = new UI.Panel(); var option = new UI.Panel();
option.setTextContent( 'Delete' ).setColor( '#666' ).setPadding( '6px 12px' ); option.setClass( 'option' );
option.setTextContent( 'Delete' );
option.onClick( function () { signals.removeSelectedObject.dispatch(); } ); option.onClick( function () { signals.removeSelectedObject.dispatch(); } );
options.add( option ); options.add( option );
addHoverStyle( option );
// //
function addHoverStyle( element ) {
element.onMouseOver( function () { element.setBackgroundColor( '#356' ).setColor( '#eee' ); } );
element.onMouseOut( function () { element.setBackgroundColor( 'transparent' ).setColor( '#666' ) } );
}
return container; return container;
} }
editor/js/ui/Menubar.File.js
浏览文件 @ 209e1737
Menubar.File = function ( signals ) { Menubar.File = function ( signals ) {
var container = new UI.Panel(); var container = new UI.Panel();
container.setFloat( 'left' ); container.setClass( 'menu' );
container.setWidth( '50px' );
container.setCursor( 'pointer' );
container.onMouseOver( function () { options.setDisplay( '' ) } );
container.onMouseOut( function () { options.setDisplay( 'none' ) } );
container.onClick( function () { options.setDisplay( 'none' ) } );
var title = new UI.Panel(); var title = new UI.Panel();
title.setTextContent( 'File' ).setColor( '#666' ); title.setTextContent( 'File' ).setColor( '#666' );
title.setMargin( '0px' ); title.setMargin( '0px' );
title.setPadding( '8px' ) title.setPadding( '8px' );
container.add( title ); container.add( title );
// //
var options = new UI.Panel(); var options = new UI.Panel();
options.setClass( 'options' );
options.setWidth( '140px' ); options.setWidth( '140px' );
options.setBackgroundColor( '#ddd' );
options.setPadding( '0px' );
options.setBorderTop( 'solid 1px #ccc' );
options.setStyle( 'box-shadow', [ '0 3px 6px rgba(0,0,0,0.1), 3px 3px 6px rgba(0,0,0,0.2)' ] );
options.setDisplay( 'none' );
container.add( options ); container.add( options );
// open // open
var option = new UI.Panel(); var option = new UI.Panel();
option.setTextContent( 'Open' ).setColor( '#666' ).setPadding( '6px 12px' ); option.setClass( 'option' );
option.setTextContent( 'Open' );
option.onClick( function () { alert( 'Open' ) } ); option.onClick( function () { alert( 'Open' ) } );
options.add( option ); options.add( option );
addHoverStyle( option );
// reset scene // reset scene
var option = new UI.Panel(); var option = new UI.Panel();
option.setTextContent( 'Reset' ).setColor( '#666' ).setPadding( '6px 12px' ); option.setClass( 'option' );
option.setTextContent( 'Reset' );
option.onClick( function () { signals.resetScene.dispatch(); } ); option.onClick( function () { signals.resetScene.dispatch(); } );
options.add( option ); options.add( option );
addHoverStyle( option );
// export geometry // export geometry
var option = new UI.Panel(); var option = new UI.Panel();
option.setTextContent( 'Export Geometry' ).setColor( '#666' ).setPadding( '6px 12px' ); option.setClass( 'option' );
option.setTextContent( 'Export Geometry' );
option.onClick( function () { signals.exportGeometry.dispatch(); } ); option.onClick( function () { signals.exportGeometry.dispatch(); } );
options.add( option ); options.add( option );
addHoverStyle( option );
// export scene // export scene
var option = new UI.Panel(); var option = new UI.Panel();
option.setTextContent( 'Export Scene' ).setColor( '#666' ).setPadding( '6px 12px' ); option.setClass( 'option' );
option.setTextContent( 'Export Scene' );
option.onClick( function () { signals.exportScene.dispatch(); } ); option.onClick( function () { signals.exportScene.dispatch(); } );
options.add( option ); options.add( option );
addHoverStyle( option );
// export OBJ // export OBJ
var option = new UI.Panel(); var option = new UI.Panel();
option.setTextContent( 'Export OBJ' ).setColor( '#666' ).setPadding( '6px 12px' ); option.setClass( 'option' );
option.setTextContent( 'Export OBJ' );
option.onClick( function () { alert( 'Export OBJ' ) } ); option.onClick( function () { alert( 'Export OBJ' ) } );
options.add( option ); options.add( option );
addHoverStyle( option );
// //
function addHoverStyle( element ) {
element.onMouseOver( function () { element.setBackgroundColor( '#356' ).setColor( '#eee' ); } );
element.onMouseOut( function () { element.setBackgroundColor( 'transparent' ).setColor( '#666' ) } );
}
return container; return container;
} }
editor/js/ui/Menubar.Help.js
浏览文件 @ 209e1737
Menubar.Help = function ( signals ) { Menubar.Help = function ( signals ) {
var container = new UI.Panel(); var container = new UI.Panel();
container.setFloat( 'left' ); container.setClass( 'menu' );
container.setWidth( '50px' );
container.setCursor( 'pointer' );
container.onMouseOver( function () { options.setDisplay( '' ) } );
container.onMouseOut( function () { options.setDisplay( 'none' ) } );
container.onClick( function () { options.setDisplay( 'none' ) } );
var title = new UI.Panel(); var title = new UI.Panel();
title.setTextContent( 'Help' ).setColor( '#666' ); title.setTextContent( 'Help' ).setColor( '#666' );
title.setMargin( '0px' ); title.setMargin( '0px' );
title.setPadding( '8px' ) title.setPadding( '8px' );
container.add( title ); container.add( title );
// //
var options = new UI.Panel(); var options = new UI.Panel();
options.setClass( 'options' );
options.setWidth( '140px' ); options.setWidth( '140px' );
options.setBackgroundColor( '#ddd' );
options.setPadding( '0px' );
options.setBorderTop( 'solid 1px #ccc' );
options.setStyle( 'box-shadow', [ '0 3px 7px rgba(0,0,0,0.05), 3px 3px 7px rgba(0,0,0,0.1)' ] );
options.setDisplay( 'none' );
container.add( options ); container.add( options );
// about // about
var option = new UI.Panel(); var option = new UI.Panel();
option.setTextContent( 'About' ).setColor( '#666' ).setPadding( '6px 12px' ); option.setClass( 'option' );
option.setTextContent( 'About' );
option.onClick( function () { alert( 'About' ) } ); option.onClick( function () { alert( 'About' ) } );
options.add( option ); options.add( option );
addHoverStyle( option );
// //
function addHoverStyle( element ) {
element.onMouseOver( function () { element.setBackgroundColor( '#356' ).setColor( '#eee' ); } );
element.onMouseOut( function () { element.setBackgroundColor( 'transparent' ).setColor( '#666' ) } );
}
return container; return container;
} }
editor/js/ui/Menubar.js
浏览文件 @ 209e1737
var Menubar = function ( signals ) { var Menubar = function ( signals ) {
var container = new UI.Panel( 'absolute' ); var container = new UI.Panel( 'absolute' );
container.setBackgroundColor( '#eee' ); container.setClass( 'menubar' );
container.setPadding( '0px' ).setMargin( '0px' );
container.add( new Menubar.File( signals ) ); container.add( new Menubar.File( signals ) );
container.add( new Menubar.Edit( signals ) ); container.add( new Menubar.Edit( signals ) );
......
editor/js/ui/Sidebar.js
浏览文件 @ 209e1737
...@@ -3,7 +3,6 @@ var Sidebar = function ( signals ) { ...@@ -3,7 +3,6 @@ var Sidebar = function ( signals ) {
var container = new UI.Panel( 'absolute' ); var container = new UI.Panel( 'absolute' );
container.setWidth( '300px' ).setHeight( '100%' ); container.setWidth( '300px' ).setHeight( '100%' );
container.setBackgroundColor( '#eee' ); container.setBackgroundColor( '#eee' );
container.setBorderLeft( 'solid 1px #ccc' );
container.setOverflow( 'auto' ); container.setOverflow( 'auto' );
container.add( new Sidebar.Scene( signals ) ); container.add( new Sidebar.Scene( signals ) );
......
editor/js/ui/Viewport.js
浏览文件 @ 209e1737
...@@ -2,7 +2,6 @@ var Viewport = function ( signals ) { ...@@ -2,7 +2,6 @@ var Viewport = function ( signals ) {
var container = new UI.Panel( 'absolute' ); var container = new UI.Panel( 'absolute' );
container.setBackgroundColor( '#aaa' ); container.setBackgroundColor( '#aaa' );
container.setBorderTop( 'solid 1px #ccc' );
// settings // settings
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或