Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

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

More UI.js and Editor refactoring.

上级 a02261b6
隐藏空白更改
内联 并排
Showing with 131 addition and 120 deletion
editor/js/UI.js
浏览文件 @ 055ec76c
......@@ -104,7 +104,7 @@ UI.Panel.prototype.add = function () {
// Text
UI.Text = function () {
UI.Text = function ( text ) {
UI.Element.call( this );
......@@ -115,6 +115,7 @@ UI.Text = function () {
dom.style.verticalAlign = 'top';
this.dom = dom;
this.setValue( text );
return this;
......@@ -124,7 +125,11 @@ UI.Text.prototype = Object.create( UI.Element.prototype );
UI.Text.prototype.setValue = function ( value ) {
this.dom.textContent = value;
if ( value !== undefined ) {
this.dom.textContent = value;
}
return this;
......@@ -445,7 +450,7 @@ UI.FancySelect.prototype.onChange = function ( callback ) {
// Checkbox
UI.Checkbox = function () {
UI.Checkbox = function ( boolean ) {
UI.Element.call( this );
......@@ -456,6 +461,7 @@ UI.Checkbox = function () {
dom.type = 'checkbox';
this.dom = dom;
this.setValue( boolean );
this.onChangeCallback = null;
......@@ -479,7 +485,11 @@ UI.Checkbox.prototype.getValue = function () {
UI.Checkbox.prototype.setValue = function ( value ) {
this.dom.checked = value;
if ( value !== undefined ) {
this.dom.checked = value;
}
return this;
......@@ -566,7 +576,7 @@ UI.Color.prototype.onChange = function ( callback ) {
// Number
UI.Number = function () {
UI.Number = function ( number ) {
UI.Element.call( this );
......@@ -585,6 +595,7 @@ UI.Number = function () {
dom.value = '0.00';
this.dom = dom;
this.setValue( number );
this.min = - Infinity;
this.max = Infinity;
......@@ -688,7 +699,11 @@ UI.Number.prototype.getValue = function () {
UI.Number.prototype.setValue = function ( value ) {
this.dom.value = value.toFixed( this.precision );
if ( value !== undefined ) {
this.dom.value = value.toFixed( this.precision );
}
return this;
......
editor/js/UI.three.js
浏览文件 @ 055ec76c
......@@ -12,8 +12,6 @@ UI.Texture = function ( position ) {
this.dom = document.createElement( 'input' );
this.dom.type = 'file';
this.dom.style.position = position || 'relative';
this.dom.style.marginTop = '-2px';
this.dom.style.marginLeft = '-2px';
this.onChangeCallback = null;
......@@ -112,8 +110,6 @@ UI.CubeTexture = function ( position ) {
this.dom = document.createElement( 'input' );
this.dom.type = 'file';
this.dom.style.position = position || 'relative';
this.dom.style.marginTop = '-2px';
this.dom.style.marginLeft = '-2px';
this.onChangeCallback = null;
......@@ -168,4 +164,4 @@ UI.CubeTexture.prototype.onChange = function ( callback ) {
return this;
};
\ No newline at end of file
};
editor/js/ui/Sidebar.Geometry.js
浏览文件 @ 055ec76c
......@@ -29,15 +29,15 @@ Sidebar.Geometry = function ( signals ) {
container.setDisplay( 'none' );
container.setPadding( '10px' );
container.add( new UI.Text().setValue( 'GEOMETRY' ).setColor( '#666' ) );
container.add( new UI.Text( 'GEOMETRY' ).setColor( '#666' ) );
container.add( new UI.Break(), new UI.Break() );
// name
var geometryNameRow = new UI.Panel();
var geometryName = new UI.Input().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
var geometryName = new UI.Input().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
geometryNameRow.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
geometryNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ).setColor( '#666' ) );
geometryNameRow.add( geometryName );
container.add( geometryNameRow );
......@@ -45,9 +45,9 @@ Sidebar.Geometry = function ( signals ) {
// class
var geometryClassRow = new UI.Panel();
var geometryClass = new UI.Text().setPosition( 'absolute' ).setLeft( '100px' ).setColor( '#444' ).setFontSize( '12px' );
var geometryClass = new UI.Text().setColor( '#444' ).setFontSize( '12px' );
geometryClassRow.add( new UI.Text().setValue( 'Class' ).setColor( '#666' ) );
geometryClassRow.add( new UI.Text( 'Class' ).setWidth( '90px' ).setColor( '#666' ) );
geometryClassRow.add( geometryClass );
container.add( geometryClassRow );
......@@ -55,9 +55,9 @@ Sidebar.Geometry = function ( signals ) {
// vertices
var geometryVerticesRow = new UI.Panel();
var geometryVertices = new UI.Text().setPosition( 'absolute' ).setLeft( '100px' ).setColor( '#444' ).setFontSize( '12px' );
var geometryVertices = new UI.Text().setColor( '#444' ).setFontSize( '12px' );
geometryVerticesRow.add( new UI.Text().setValue( 'Vertices' ).setColor( '#666' ) );
geometryVerticesRow.add( new UI.Text( 'Vertices' ).setWidth( '90px' ).setColor( '#666' ) );
geometryVerticesRow.add( geometryVertices );
container.add( geometryVerticesRow );
......@@ -65,9 +65,9 @@ Sidebar.Geometry = function ( signals ) {
// faces
var geometryFacesRow = new UI.Panel();
var geometryFaces = new UI.Text().setPosition( 'absolute' ).setLeft( '100px' ).setColor( '#444' ).setFontSize( '12px' );
var geometryFaces = new UI.Text().setColor( '#444' ).setFontSize( '12px' );
geometryFacesRow.add( new UI.Text().setValue( 'Faces' ).setColor( '#666' ) );
geometryFacesRow.add( new UI.Text( 'Faces' ).setWidth( '90px' ).setColor( '#666' ) );
geometryFacesRow.add( geometryFaces );
container.add( geometryFacesRow );
......
editor/js/ui/Sidebar.Material.js
浏览文件 @ 055ec76c
......@@ -28,9 +28,9 @@ Sidebar.Material = function ( signals ) {
// name
var materialNameRow = new UI.Panel();
var materialName = new UI.Input().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
var materialName = new UI.Input().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
materialNameRow.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
materialNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ).setColor( '#666' ) );
materialNameRow.add( materialName );
container.add( materialNameRow );
......@@ -38,7 +38,7 @@ Sidebar.Material = function ( signals ) {
// class
var materialClassRow = new UI.Panel();
var materialClass = new UI.Select().setPosition( 'absolute' ).setOptions( {
var materialClass = new UI.Select().setOptions( {
'LineBasicMaterial': 'LineBasicMaterial',
'LineDashedMaterial': 'LineDashedMaterial',
......@@ -49,9 +49,9 @@ Sidebar.Material = function ( signals ) {
'MeshNormalMaterial': 'MeshNormalMaterial',
'MeshPhongMaterial': 'MeshPhongMaterial'
} ).setLeft( '100px' ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
} ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
materialClassRow.add( new UI.Text().setValue( 'Class' ).setColor( '#666' ) );
materialClassRow.add( new UI.Text( 'Class' ).setWidth( '90px' ).setColor( '#666' ) );
materialClassRow.add( materialClass );
container.add( materialClassRow );
......@@ -59,9 +59,9 @@ Sidebar.Material = function ( signals ) {
// color
var materialColorRow = new UI.Panel();
var materialColor = new UI.Color().setPosition( 'absolute' ).setLeft( '100px' ).onChange( update );
var materialColor = new UI.Color().onChange( update );
materialColorRow.add( new UI.Text().setValue( 'Color' ).setColor( '#666' ) );
materialColorRow.add( new UI.Text( 'Color' ).setWidth( '90px' ).setColor( '#666' ) );
materialColorRow.add( materialColor );
container.add( materialColorRow );
......@@ -69,9 +69,9 @@ Sidebar.Material = function ( signals ) {
// ambient
var materialAmbientRow = new UI.Panel();
var materialAmbient = new UI.Color().setPosition( 'absolute' ).setLeft( '100px' ).onChange( update );
var materialAmbient = new UI.Color().onChange( update );
materialAmbientRow.add( new UI.Text().setValue( 'Ambient' ).setColor( '#666' ) );
materialAmbientRow.add( new UI.Text( 'Ambient' ).setWidth( '90px' ).setColor( '#666' ) );
materialAmbientRow.add( materialAmbient );
container.add( materialAmbientRow );
......@@ -79,9 +79,9 @@ Sidebar.Material = function ( signals ) {
// emissive
var materialEmissiveRow = new UI.Panel();
var materialEmissive = new UI.Color().setPosition( 'absolute' ).setLeft( '100px' ).onChange( update );
var materialEmissive = new UI.Color().onChange( update );
materialEmissiveRow.add( new UI.Text().setValue( 'Emissive' ).setColor( '#666' ) );
materialEmissiveRow.add( new UI.Text( 'Emissive' ).setWidth( '90px' ).setColor( '#666' ) );
materialEmissiveRow.add( materialEmissive );
container.add( materialEmissiveRow );
......@@ -89,9 +89,9 @@ Sidebar.Material = function ( signals ) {
// specular
var materialSpecularRow = new UI.Panel();
var materialSpecular = new UI.Color().setPosition( 'absolute' ).setLeft( '100px' ).onChange( update );
var materialSpecular = new UI.Color().onChange( update );
materialSpecularRow.add( new UI.Text().setValue( 'Specular' ).setColor( '#666' ) );
materialSpecularRow.add( new UI.Text( 'Specular' ).setWidth( '90px' ).setColor( '#666' ) );
materialSpecularRow.add( materialSpecular );
container.add( materialSpecularRow );
......@@ -99,9 +99,9 @@ Sidebar.Material = function ( signals ) {
// shininess
var materialShininessRow = new UI.Panel();
var materialShininess = new UI.Number().setPosition( 'absolute' ).setValue( 30 ).setLeft( '100px' ).onChange( update );
var materialShininess = new UI.Number( 30 ).onChange( update );
materialShininessRow.add( new UI.Text().setValue( 'Shininess' ).setColor( '#666' ) );
materialShininessRow.add( new UI.Text( 'Shininess' ).setWidth( '90px' ).setColor( '#666' ) );
materialShininessRow.add( materialShininess );
container.add( materialShininessRow );
......@@ -109,10 +109,10 @@ Sidebar.Material = function ( signals ) {
// map
var materialMapRow = new UI.Panel();
var materialMapEnabled = new UI.Checkbox().setPosition( 'absolute' ).setValue( false ).setLeft( '100px' ).onChange( update );
var materialMap = new UI.Texture().setPosition( 'absolute' ).setLeft( '130px' ).setColor( '#444' ).onChange( update );
var materialMapEnabled = new UI.Checkbox( false ).onChange( update );
var materialMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
materialMapRow.add( new UI.Text().setValue( 'Map' ).setColor( '#666' ) );
materialMapRow.add( new UI.Text( 'Map' ).setWidth( '90px' ).setColor( '#666' ) );
materialMapRow.add( materialMapEnabled );
materialMapRow.add( materialMap );
......@@ -121,10 +121,10 @@ Sidebar.Material = function ( signals ) {
// light map
var materialLightMapRow = new UI.Panel();
var materialLightMapEnabled = new UI.Checkbox().setPosition( 'absolute' ).setValue( false ).setLeft( '100px' ).onChange( update );
var materialLightMap = new UI.Texture().setPosition( 'absolute' ).setLeft( '130px' ).setColor( '#444' ).onChange( update );
var materialLightMapEnabled = new UI.Checkbox( false ).onChange( update );
var materialLightMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
materialLightMapRow.add( new UI.Text().setValue( 'Light Map' ).setColor( '#666' ) );
materialLightMapRow.add( new UI.Text( 'Light Map' ).setWidth( '90px' ).setColor( '#666' ) );
materialLightMapRow.add( materialLightMapEnabled );
materialLightMapRow.add( materialLightMap );
......@@ -133,11 +133,11 @@ Sidebar.Material = function ( signals ) {
// bump map
var materialBumpMapRow = new UI.Panel();
var materialBumpMapEnabled = new UI.Checkbox().setPosition( 'absolute' ).setValue( false ).setLeft( '100px' ).onChange( update );
var materialBumpMap = new UI.Texture().setPosition( 'absolute' ).setLeft( '170px' ).setColor( '#444' ).onChange( update );
var materialBumpScale = new UI.Number().setPosition( 'absolute' ).setValue( 1 ).setLeft( '130px' ).setWidth( '30px' ).onChange( update );
var materialBumpMapEnabled = new UI.Checkbox( false ).onChange( update );
var materialBumpMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
var materialBumpScale = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
materialBumpMapRow.add( new UI.Text().setValue( 'Bump Map' ).setColor( '#666' ) );
materialBumpMapRow.add( new UI.Text( 'Bump Map' ).setWidth( '90px' ).setColor( '#666' ) );
materialBumpMapRow.add( materialBumpMapEnabled );
materialBumpMapRow.add( materialBumpScale );
materialBumpMapRow.add( materialBumpMap );
......@@ -147,10 +147,10 @@ Sidebar.Material = function ( signals ) {
// normal map
var materialNormalMapRow = new UI.Panel();
var materialNormalMapEnabled = new UI.Checkbox().setPosition( 'absolute' ).setValue( false ).setLeft( '100px' ).onChange( update );
var materialNormalMap = new UI.Texture().setPosition( 'absolute' ).setLeft( '130px' ).setColor( '#444' ).onChange( update );
var materialNormalMapEnabled = new UI.Checkbox( false ).onChange( update );
var materialNormalMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
materialNormalMapRow.add( new UI.Text().setValue( 'Normal Map' ).setColor( '#666' ) );
materialNormalMapRow.add( new UI.Text( 'Normal Map' ).setWidth( '90px' ).setColor( '#666' ) );
materialNormalMapRow.add( materialNormalMapEnabled );
materialNormalMapRow.add( materialNormalMap );
......@@ -159,10 +159,10 @@ Sidebar.Material = function ( signals ) {
// specular map
var materialSpecularMapRow = new UI.Panel();
var materialSpecularMapEnabled = new UI.Checkbox().setPosition( 'absolute' ).setValue( false ).setLeft( '100px' ).onChange( update );
var materialSpecularMap = new UI.Texture().setPosition( 'absolute' ).setLeft( '130px' ).setColor( '#444' ).onChange( update );
var materialSpecularMapEnabled = new UI.Checkbox( false ).onChange( update );
var materialSpecularMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
materialSpecularMapRow.add( new UI.Text().setValue( 'Specular Map' ).setColor( '#666' ) );
materialSpecularMapRow.add( new UI.Text( 'Specular Map' ).setWidth( '90px' ).setColor( '#666' ) );
materialSpecularMapRow.add( materialSpecularMapEnabled );
materialSpecularMapRow.add( materialSpecularMap );
......@@ -171,12 +171,12 @@ Sidebar.Material = function ( signals ) {
// env map
var materialEnvMapRow = new UI.Panel();
var materialEnvMapEnabled = new UI.Checkbox().setPosition( 'absolute' ).setValue( false ).setLeft( '100px' ).onChange( update );
var materialEnvMap = new UI.CubeTexture().setPosition( 'absolute' ).setLeft( '170px' ).setColor( '#444' ).onChange( update );
var materialReflectivity = new UI.Number().setPosition( 'absolute' ).setValue( 1 ).setLeft( '130px' ).setWidth( '30px' ).onChange( update );
var materialEnvMapEnabled = new UI.Checkbox( false ).onChange( update );
var materialEnvMap = new UI.CubeTexture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
var materialReflectivity = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
materialEnvMapRow.add( new UI.Text().setValue( 'Env Map' ).setColor( '#666' ) );
materialEnvMapRow.add( new UI.Text( 'Env Map' ).setWidth( '90px' ).setColor( '#666' ) );
materialEnvMapRow.add( materialEnvMapEnabled );
materialEnvMapRow.add( materialReflectivity );
materialEnvMapRow.add( materialEnvMap );
......@@ -186,9 +186,9 @@ Sidebar.Material = function ( signals ) {
// opacity
var materialOpacityRow = new UI.Panel();
var materialOpacity = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
var materialOpacity = new UI.Number().setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
materialOpacityRow.add( new UI.Text().setValue( 'Opacity' ).setColor( '#666' ) );
materialOpacityRow.add( new UI.Text( 'Opacity' ).setWidth( '90px' ).setColor( '#666' ) );
materialOpacityRow.add( materialOpacity );
container.add( materialOpacityRow );
......@@ -196,9 +196,9 @@ Sidebar.Material = function ( signals ) {
// transparent
var materialTransparentRow = new UI.Panel();
var materialTransparent = new UI.Checkbox().setPosition( 'absolute' ).setValue( false ).setLeft( '100px' ).onChange( update );
var materialTransparent = new UI.Checkbox().setLeft( '100px' ).onChange( update );
materialTransparentRow.add( new UI.Text().setValue( 'Transparent' ).setColor( '#666' ) );
materialTransparentRow.add( new UI.Text( 'Transparent' ).setWidth( '90px' ).setColor( '#666' ) );
materialTransparentRow.add( materialTransparent );
container.add( materialTransparentRow );
......@@ -206,10 +206,10 @@ Sidebar.Material = function ( signals ) {
// wireframe
var materialWireframeRow = new UI.Panel();
var materialWireframe = new UI.Checkbox().setPosition( 'absolute' ).setValue( false ).setLeft( '100px' ).onChange( update );
var materialWireframeLinewidth = new UI.Number().setPosition( 'absolute' ).setValue( 1 ).setLeft( '120px' ).setRange( 0, 100 ).onChange( update );
var materialWireframe = new UI.Checkbox( false ).onChange( update );
var materialWireframeLinewidth = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, 100 ).onChange( update );
materialWireframeRow.add( new UI.Text().setValue( 'Wireframe' ).setColor( '#666' ) );
materialWireframeRow.add( new UI.Text( 'Wireframe' ).setWidth( '90px' ).setColor( '#666' ) );
materialWireframeRow.add( materialWireframe );
materialWireframeRow.add( materialWireframeLinewidth );
......
editor/js/ui/Sidebar.Object3D.js
浏览文件 @ 055ec76c
......@@ -25,9 +25,9 @@ Sidebar.Object3D = function ( signals ) {
// name
var objectNameRow = new UI.Panel();
var objectName = new UI.Input().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
var objectName = new UI.Input().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
objectNameRow.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
objectNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ).setColor( '#666' ) );
objectNameRow.add( objectName );
container.add( objectNameRow );
......@@ -35,11 +35,11 @@ Sidebar.Object3D = function ( signals ) {
// position
var objectPositionRow = new UI.Panel();
var objectPositionX = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '50px' ).onChange( update );
var objectPositionY = new UI.Number().setPosition( 'absolute' ).setLeft( '160px' ).setWidth( '50px' ).onChange( update );
var objectPositionZ = new UI.Number().setPosition( 'absolute' ).setLeft( '220px' ).setWidth( '50px' ).onChange( update );
var objectPositionX = new UI.Number().setWidth( '50px' ).onChange( update );
var objectPositionY = new UI.Number().setWidth( '50px' ).onChange( update );
var objectPositionZ = new UI.Number().setWidth( '50px' ).onChange( update );
objectPositionRow.add( new UI.Text().setValue( 'Position' ).setColor( '#666' ) );
objectPositionRow.add( new UI.Text( 'Position' ).setWidth( '90px' ).setColor( '#666' ) );
objectPositionRow.add( objectPositionX, objectPositionY, objectPositionZ );
container.add( objectPositionRow );
......@@ -47,11 +47,11 @@ Sidebar.Object3D = function ( signals ) {
// rotation
var objectRotationRow = new UI.Panel();
var objectRotationX = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '50px' ).onChange( update );
var objectRotationY = new UI.Number().setPosition( 'absolute' ).setLeft( '160px' ).setWidth( '50px' ).onChange( update );
var objectRotationZ = new UI.Number().setPosition( 'absolute' ).setLeft( '220px' ).setWidth( '50px' ).onChange( update );
var objectRotationX = new UI.Number().setWidth( '50px' ).onChange( update );
var objectRotationY = new UI.Number().setWidth( '50px' ).onChange( update );
var objectRotationZ = new UI.Number().setWidth( '50px' ).onChange( update );
objectRotationRow.add( new UI.Text().setValue( 'Rotation' ).setColor( '#666' ) );
objectRotationRow.add( new UI.Text( 'Rotation' ).setWidth( '90px' ).setColor( '#666' ) );
objectRotationRow.add( objectRotationX, objectRotationY, objectRotationZ );
container.add( objectRotationRow );
......@@ -60,11 +60,11 @@ Sidebar.Object3D = function ( signals ) {
var objectScaleRow = new UI.Panel();
var objectScaleLock = new UI.Checkbox().setPosition( 'absolute' ).setLeft( '75px' ).onChange( updateScaleLock );
var objectScaleX = new UI.Number().setPosition( 'absolute' ).setValue( 1 ).setLeft( '100px' ).setWidth( '50px' ).onChange( updateScaleX );
var objectScaleY = new UI.Number().setPosition( 'absolute' ).setValue( 1 ).setLeft( '160px' ).setWidth( '50px' ).onChange( updateScaleY );
var objectScaleZ = new UI.Number().setPosition( 'absolute' ).setValue( 1 ).setLeft( '220px' ).setWidth( '50px' ).onChange( updateScaleZ );
var objectScaleX = new UI.Number( 1 ).setWidth( '50px' ).onChange( updateScaleX );
var objectScaleY = new UI.Number( 1 ).setWidth( '50px' ).onChange( updateScaleY );
var objectScaleZ = new UI.Number( 1 ).setWidth( '50px' ).onChange( updateScaleZ );
objectScaleRow.add( new UI.Text().setValue( 'Scale' ).setColor( '#666' ) );
objectScaleRow.add( new UI.Text( 'Scale' ).setWidth( '90px' ).setColor( '#666' ) );
objectScaleRow.add( objectScaleLock );
objectScaleRow.add( objectScaleX, objectScaleY, objectScaleZ );
......@@ -73,9 +73,9 @@ Sidebar.Object3D = function ( signals ) {
// fov
var objectFovRow = new UI.Panel();
var objectFov = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).onChange( update );
var objectFov = new UI.Number().onChange( update );
objectFovRow.add( new UI.Text().setValue( 'Fov' ).setColor( '#666' ) );
objectFovRow.add( new UI.Text( 'Fov' ).setWidth( '90px' ).setColor( '#666' ) );
objectFovRow.add( objectFov );
container.add( objectFovRow );
......@@ -83,9 +83,9 @@ Sidebar.Object3D = function ( signals ) {
// near
var objectNearRow = new UI.Panel();
var objectNear = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).onChange( update );
var objectNear = new UI.Number().onChange( update );
objectNearRow.add( new UI.Text().setValue( 'Near' ).setColor( '#666' ) );
objectNearRow.add( new UI.Text( 'Near' ).setWidth( '90px' ).setColor( '#666' ) );
objectNearRow.add( objectNear );
container.add( objectNearRow );
......@@ -93,9 +93,9 @@ Sidebar.Object3D = function ( signals ) {
// far
var objectFarRow = new UI.Panel();
var objectFar = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).onChange( update );
var objectFar = new UI.Number().onChange( update );
objectFarRow.add( new UI.Text().setValue( 'Far' ).setColor( '#666' ) );
objectFarRow.add( new UI.Text( 'Far' ).setWidth( '90px' ).setColor( '#666' ) );
objectFarRow.add( objectFar );
container.add( objectFarRow );
......@@ -103,9 +103,9 @@ Sidebar.Object3D = function ( signals ) {
// intensity
var objectIntensityRow = new UI.Panel();
var objectIntensity = new UI.Number().setPosition( 'absolute' ).setRange( 0, Infinity ).setLeft( '100px' ).onChange( update );
var objectIntensity = new UI.Number().setRange( 0, Infinity ).onChange( update );
objectIntensityRow.add( new UI.Text().setValue( 'Intensity' ).setColor( '#666' ) );
objectIntensityRow.add( new UI.Text( 'Intensity' ).setWidth( '90px' ).setColor( '#666' ) );
objectIntensityRow.add( objectIntensity );
container.add( objectIntensityRow );
......@@ -113,9 +113,9 @@ Sidebar.Object3D = function ( signals ) {
// color
var objectColorRow = new UI.Panel();
var objectColor = new UI.Color().setPosition( 'absolute' ).setLeft( '100px' ).onChange( update );
var objectColor = new UI.Color().onChange( update );
objectColorRow.add( new UI.Text().setValue( 'Color' ).setColor( '#666' ) );
objectColorRow.add( new UI.Text( 'Color' ).setWidth( '90px' ).setColor( '#666' ) );
objectColorRow.add( objectColor );
container.add( objectColorRow );
......@@ -123,9 +123,9 @@ Sidebar.Object3D = function ( signals ) {
// ground color
var objectGroundColorRow = new UI.Panel();
var objectGroundColor = new UI.Color().setPosition( 'absolute' ).setLeft( '100px' ).onChange( update );
var objectGroundColor = new UI.Color().onChange( update );
objectGroundColorRow.add( new UI.Text().setValue( 'Ground color' ).setColor( '#666' ) );
objectGroundColorRow.add( new UI.Text( 'Ground color' ).setWidth( '90px' ).setColor( '#666' ) );
objectGroundColorRow.add( objectGroundColor );
container.add( objectGroundColorRow );
......@@ -133,9 +133,9 @@ Sidebar.Object3D = function ( signals ) {
// distance
var objectDistanceRow = new UI.Panel();
var objectDistance = new UI.Number().setPosition( 'absolute' ).setRange( 0, Infinity ).setLeft( '100px' ).onChange( update );
var objectDistance = new UI.Number().setRange( 0, Infinity ).onChange( update );
objectDistanceRow.add( new UI.Text().setValue( 'Distance' ).setColor( '#666' ) );
objectDistanceRow.add( new UI.Text( 'Distance' ).setWidth( '90px' ).setColor( '#666' ) );
objectDistanceRow.add( objectDistance );
container.add( objectDistanceRow );
......@@ -143,9 +143,9 @@ Sidebar.Object3D = function ( signals ) {
// angle
var objectAngleRow = new UI.Panel();
var objectAngle = new UI.Number().setPosition( 'absolute' ).setPrecision( 3 ).setRange( 0, Math.PI * 2 ).setLeft( '100px' ).onChange( update );
var objectAngle = new UI.Number().setPrecision( 3 ).setRange( 0, Math.PI * 2 ).onChange( update );
objectAngleRow.add( new UI.Text().setValue( 'Angle' ).setColor( '#666' ) );
objectAngleRow.add( new UI.Text( 'Angle' ).setWidth( '90px' ).setColor( '#666' ) );
objectAngleRow.add( objectAngle );
container.add( objectAngleRow );
......@@ -153,9 +153,9 @@ Sidebar.Object3D = function ( signals ) {
// exponent
var objectExponentRow = new UI.Panel();
var objectExponent = new UI.Number().setPosition( 'absolute' ).setRange( 0, Infinity ).setLeft( '100px' ).onChange( update );
var objectExponent = new UI.Number().setRange( 0, Infinity ).onChange( update );
objectExponentRow.add( new UI.Text().setValue( 'Exponent' ).setColor( '#666' ) );
objectExponentRow.add( new UI.Text( 'Exponent' ).setWidth( '90px' ).setColor( '#666' ) );
objectExponentRow.add( objectExponent );
container.add( objectExponentRow );
......@@ -163,9 +163,9 @@ Sidebar.Object3D = function ( signals ) {
// visible
var objectVisibleRow = new UI.Panel();
var objectVisible = new UI.Checkbox().setPosition( 'absolute' ).setLeft( '100px' ).onChange( update );
var objectVisible = new UI.Checkbox().onChange( update );
objectVisibleRow.add( new UI.Text().setValue( 'Visible' ).setColor( '#666' ) );
objectVisibleRow.add( new UI.Text( 'Visible' ).setWidth( '90px' ).setColor( '#666' ) );
objectVisibleRow.add( objectVisible );
container.add( objectVisibleRow );
......@@ -173,9 +173,9 @@ Sidebar.Object3D = function ( signals ) {
// user data
var objectUserDataRow = new UI.Panel();
objectUserDataRow.add( new UI.Text().setValue( 'User data' ).setWidth( '100px' ).setColor( '#666' ) );
var objectUserData = new UI.TextArea().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
objectUserDataRow.add( new UI.Text( 'User data' ).setWidth( '90px' ).setColor( '#666' ) );
objectUserDataRow.add( objectUserData );
container.add( objectUserDataRow );
......
editor/js/ui/Sidebar.Renderer.js
浏览文件 @ 055ec76c
......@@ -13,22 +13,22 @@ Sidebar.Renderer = function ( signals ) {
container.setPadding( '10px' );
container.setBorderTop( '1px solid #ccc' );
container.add( new UI.Text().setValue( 'RENDERER' ).setColor( '#666' ) );
container.add( new UI.Text( 'RENDERER' ).setColor( '#666' ) );
container.add( new UI.Break(), new UI.Break() );
// class
var rendererClassRow = new UI.Panel();
var rendererClass = new UI.Select().setPosition( 'absolute' ).setOptions( {
var rendererClass = new UI.Select().setOptions( {
'WebGLRenderer': 'WebGLRenderer',
'CanvasRenderer': 'CanvasRenderer',
'SoftwareRenderer': 'SoftwareRenderer',
'SVGRenderer': 'SVGRenderer',
} ).setLeft( '100px' ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( updateRenderer );
} ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( updateRenderer );
rendererClassRow.add( new UI.Text().setValue( 'Class' ).setColor( '#666' ) );
rendererClassRow.add( new UI.Text( 'Class' ).setWidth( '90px' ).setColor( '#666' ) );
rendererClassRow.add( rendererClass );
container.add( rendererClassRow );
......@@ -36,9 +36,9 @@ Sidebar.Renderer = function ( signals ) {
// clear color
var clearColorRow = new UI.Panel();
var clearColor = new UI.Color().setPosition( 'absolute' ).setLeft( '100px' ).setValue( '#aaaaaa' ).onChange( updateClearColor );
var clearColor = new UI.Color().setValue( '#aaaaaa' ).onChange( updateClearColor );
clearColorRow.add( new UI.Text().setValue( 'Clear color' ).setColor( '#666' ) );
clearColorRow.add( new UI.Text( 'Clear color' ).setWidth( '90px' ).setColor( '#666' ) );
clearColorRow.add( clearColor );
container.add( clearColorRow );
......@@ -48,10 +48,10 @@ Sidebar.Renderer = function ( signals ) {
function updateRenderer() {
var renderer = new rendererClasses[ rendererClass.getValue() ]( {
antialias: true,
alpha: false,
clearColor: clearColor.getHexValue(),
clearAlpha: 1
antialias: true,
alpha: false,
clearColor: clearColor.getHexValue(),
clearAlpha: 1
} );
signals.rendererChanged.dispatch( renderer );
......
editor/js/ui/Sidebar.Scene.js
浏览文件 @ 055ec76c
......@@ -19,7 +19,7 @@ Sidebar.Scene = function ( signals ) {
container.setPadding( '10px' );
container.setBorderTop( '1px solid #ccc' );
container.add( new UI.Text().setValue( 'SCENE' ).setColor( '#666' ) );
container.add( new UI.Text( 'SCENE' ).setColor( '#666' ) );
container.add( new UI.Break(), new UI.Break() );
var outliner = new UI.FancySelect().setWidth( '100%' ).setHeight('140px').setColor( '#444' ).setFontSize( '12px' ).onChange( updateOutliner );
......@@ -29,15 +29,15 @@ Sidebar.Scene = function ( signals ) {
// fog
var fogTypeRow = new UI.Panel();
var fogType = new UI.Select().setPosition( 'absolute' ).setOptions( {
var fogType = new UI.Select().setOptions( {
'None': 'None',
'Fog': 'Linear',
'FogExp2': 'Exponential'
} ).setLeft( '100px' ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( updateFogType );
} ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( updateFogType );
fogTypeRow.add( new UI.Text().setValue( 'Fog' ).setColor( '#666' ) );
fogTypeRow.add( new UI.Text( 'Fog' ).setWidth( '90px' ).setColor( '#666' ) );
fogTypeRow.add( fogType );
container.add( fogTypeRow );
......@@ -47,9 +47,9 @@ Sidebar.Scene = function ( signals ) {
var fogColorRow = new UI.Panel();
fogColorRow.setDisplay( 'none' );
var fogColor = new UI.Color().setPosition( 'absolute' ).setLeft( '100px' ).setValue( '#aaaaaa' ).onChange( updateFogColor );
var fogColor = new UI.Color().setValue( '#aaaaaa' ).onChange( updateFogColor );
fogColorRow.add( new UI.Text().setValue( 'Fog color' ).setColor( '#666' ) );
fogColorRow.add( new UI.Text( 'Fog color' ).setWidth( '90px' ).setColor( '#666' ) );
fogColorRow.add( fogColor );
container.add( fogColorRow );
......@@ -59,9 +59,9 @@ Sidebar.Scene = function ( signals ) {
var fogNearRow = new UI.Panel();
fogNearRow.setDisplay( 'none' );
var fogNear = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '60px' ).setRange( 0, Infinity ).setValue( 1 ).onChange( updateFogParameters );
var fogNear = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, Infinity ).onChange( updateFogParameters );
fogNearRow.add( new UI.Text().setValue( 'Fog near' ).setColor( '#666' ) );
fogNearRow.add( new UI.Text( 'Fog near' ).setWidth( '90px' ).setColor( '#666' ) );
fogNearRow.add( fogNear );
container.add( fogNearRow );
......@@ -71,9 +71,9 @@ Sidebar.Scene = function ( signals ) {
// fog far
var fogFar = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '60px' ).setRange( 0, Infinity ).setValue( 5000 ).onChange( updateFogParameters );
var fogFar = new UI.Number( 5000 ).setWidth( '60px' ).setRange( 0, Infinity ).onChange( updateFogParameters );
fogFarRow.add( new UI.Text().setValue( 'Fog far' ).setColor( '#666' ) );
fogFarRow.add( new UI.Text( 'Fog far' ).setWidth( '90px' ).setColor( '#666' ) );
fogFarRow.add( fogFar );
container.add( fogFarRow );
......@@ -83,9 +83,9 @@ Sidebar.Scene = function ( signals ) {
var fogDensityRow = new UI.Panel();
fogDensityRow.setDisplay( 'none' );
var fogDensity = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '60px' ).setRange( 0, 0.1 ).setPrecision( 5 ).setValue( 0.00025 ).onChange( updateFogParameters );
var fogDensity = new UI.Number( 0.00025 ).setWidth( '60px' ).setRange( 0, 0.1 ).setPrecision( 5 ).onChange( updateFogParameters );
fogDensityRow.add( new UI.Text().setValue( 'Fog density' ).setColor( '#666' ) );
fogDensityRow.add( new UI.Text( 'Fog density' ).setWidth( '90px' ).setColor( '#666' ) );
fogDensityRow.add( fogDensity );
container.add( fogDensityRow );
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或