Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

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

GUI: More clean up. And added object visibility toggle.

上级 306afd21
隐藏空白更改
内联 并排
Showing with 157 addition and 128 deletion
gui/js/ui/Sidebar.Properties.Geometry.js
浏览文件 @ c3829915
Sidebar.Properties.Geometry = function ( signals ) {
var geometries = {
"ConvexGeometry": THREE.ConvexGeometry,
"CubeGeometry": THREE.CubeGeometry,
"CylinderGeometry": THREE.CylinderGeometry,
"ExtrudeGeometry": THREE.ExtrudeGeometry,
"IcosahedronGeometry": THREE.IcosahedronGeometry,
"LatheGeometry": THREE.LatheGeometry,
"OctahedronGeometry": THREE.OctahedronGeometry,
"ParametricGeometry": THREE.ParametricGeometry,
"PlaneGeometry": THREE.PlaneGeometry,
"PolyhedronGeometry": THREE.PolyhedronGeometry,
"SphereGeometry": THREE.SphereGeometry,
"TetrahedronGeometry": THREE.TetrahedronGeometry,
"TextGeometry": THREE.TextGeometry,
"TorusGeometry": THREE.TorusGeometry,
"TorusKnotGeometry": THREE.TorusKnotGeometry,
"TubeGeometry": THREE.TubeGeometry,
"Geometry": THREE.Geometry
};
var container = new UI.Panel();
container.setDisplay( 'none' );
......@@ -7,24 +29,46 @@ Sidebar.Properties.Geometry = function ( signals ) {
container.add( new UI.Button( 'absolute' ).setRight( '0px' ).setLabel( 'Export' ).onClick( exportGeometry ) );
container.add( new UI.Break(), new UI.Break() );
container.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
// name
var geometryNameRow = new UI.Panel();
var geometryName = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
container.add( geometryName );
container.add( new UI.HorizontalRule() );
container.add( new UI.Text().setValue( 'Class' ).setColor( '#666' ) );
geometryNameRow.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
geometryNameRow.add( geometryName );
container.add( geometryNameRow );
// class
var geometryClassRow = new UI.Panel();
var geometryClass = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
container.add( geometryClass );
container.add( new UI.HorizontalRule() );
container.add( new UI.Text().setValue( 'Vertices' ).setColor( '#666' ) );
var verticesCount = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
container.add( verticesCount );
container.add( new UI.HorizontalRule() );
geometryClassRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Class' ).setColor( '#666' ) );
geometryClassRow.add( geometryClass );
container.add( geometryClassRow );
// vertices
var geometryVerticesRow = new UI.Panel();
var geometryVertices = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
geometryVerticesRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Vertices' ).setColor( '#666' ) );
geometryVerticesRow.add( geometryVertices );
container.add( geometryVerticesRow );
// faces
var geometryFacesRow = new UI.Panel();
var geometryFaces = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
geometryFacesRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Faces' ).setColor( '#666' ) );
geometryFacesRow.add( geometryFaces );
container.add( geometryFacesRow );
container.add( new UI.Text().setValue( 'Faces' ).setColor( '#666' ) );
var facesCount = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
container.add( facesCount );
container.add( new UI.Break(), new UI.Break(), new UI.Break() );
//
......@@ -41,8 +85,8 @@ Sidebar.Properties.Geometry = function ( signals ) {
geometryName.setValue( object.geometry.name );
geometryClass.setValue( getGeometryInstanceName( object.geometry ) );
verticesCount.setValue( object.geometry.vertices.length );
facesCount.setValue( object.geometry.faces.length );
geometryVertices.setValue( object.geometry.vertices.length );
geometryFaces.setValue( object.geometry.faces.length );
} else {
......@@ -56,28 +100,6 @@ Sidebar.Properties.Geometry = function ( signals ) {
function getGeometryInstanceName( geometry ) {
var geometries = {
"ConvexGeometry": THREE.ConvexGeometry,
"CubeGeometry": THREE.CubeGeometry,
"CylinderGeometry": THREE.CylinderGeometry,
"ExtrudeGeometry": THREE.ExtrudeGeometry,
"IcosahedronGeometry": THREE.IcosahedronGeometry,
"LatheGeometry": THREE.LatheGeometry,
"OctahedronGeometry": THREE.OctahedronGeometry,
"ParametricGeometry": THREE.ParametricGeometry,
"PlaneGeometry": THREE.PlaneGeometry,
"PolyhedronGeometry": THREE.PolyhedronGeometry,
"SphereGeometry": THREE.SphereGeometry,
"TetrahedronGeometry": THREE.TetrahedronGeometry,
"TextGeometry": THREE.TextGeometry,
"TorusGeometry": THREE.TorusGeometry,
"TorusKnotGeometry": THREE.TorusKnotGeometry,
"TubeGeometry": THREE.TubeGeometry,
"Geometry": THREE.Geometry
};
for ( var key in geometries ) {
if ( geometry instanceof geometries[ key ] ) return key;
......
gui/js/ui/Sidebar.Properties.Material.js
浏览文件 @ c3829915
......@@ -28,10 +28,8 @@ Sidebar.Properties.Material = function ( signals ) {
var materialNameRow = new UI.Panel();
var materialName = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
materialNameRow.add(
new UI.Text().setValue( 'Name' ).setColor( '#666' ),
materialName
);
materialNameRow.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
materialNameRow.add( materialName );
container.add( materialNameRow );
......@@ -40,11 +38,8 @@ Sidebar.Properties.Material = function ( signals ) {
var materialClassRow = new UI.Panel();
var materialClass = new UI.Select( 'absolute' ).setOptions( [ 'LineBasicMaterial', 'MeshBasicMaterial', 'MeshDepthMaterial', 'MeshFaceMaterial', 'MeshLambertMaterial', 'MeshNormalMaterial', 'MeshPhongMaterial', 'ParticleBasicMaterial', 'ParticleCanvasMaterial', 'ParticleDOMMaterial', 'ShaderMaterial' ] ).setLeft( '90px' ).setWidth( '180px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
materialClassRow.add(
new UI.HorizontalRule(),
new UI.Text().setValue( 'Class' ).setColor( '#666' ),
materialClass
);
materialClassRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Class' ).setColor( '#666' ) );
materialClassRow.add( materialClass );
container.add( materialClassRow );
......@@ -53,11 +48,8 @@ Sidebar.Properties.Material = function ( signals ) {
var materialColorRow = new UI.Panel();
var materialColor = new UI.Color( 'absolute' ).setLeft( '90px' ).onChange( update );
materialColorRow.add(
new UI.HorizontalRule(),
new UI.Text().setValue( 'Color' ).setColor( '#666' ),
materialColor
);
materialColorRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Color' ).setColor( '#666' ) );
materialColorRow.add( materialColor );
container.add( materialColorRow );
......@@ -66,11 +58,8 @@ Sidebar.Properties.Material = function ( signals ) {
var materialAmbientRow = new UI.Panel();
var materialAmbient = new UI.Color( 'absolute' ).setLeft( '90px' ).onChange( update );
materialAmbientRow.add(
new UI.HorizontalRule(),
new UI.Text().setValue( 'Ambient' ).setColor( '#666' ),
materialAmbient
);
materialAmbientRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Ambient' ).setColor( '#666' ) );
materialAmbientRow.add( materialAmbient );
container.add( materialAmbientRow );
......@@ -79,11 +68,8 @@ Sidebar.Properties.Material = function ( signals ) {
var materialSpecularRow = new UI.Panel();
var materialSpecular = new UI.Color( 'absolute' ).setLeft( '90px' ).onChange( update );
materialSpecularRow.add(
new UI.HorizontalRule(),
new UI.Text().setValue( 'Specular' ).setColor( '#666' ),
materialSpecular
);
materialSpecularRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Specular' ).setColor( '#666' ) );
materialSpecularRow.add( materialSpecular );
container.add( materialSpecularRow );
......@@ -92,11 +78,8 @@ Sidebar.Properties.Material = function ( signals ) {
var materialMapRow = new UI.Panel();
var materialMap = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
materialMapRow.add(
new UI.HorizontalRule(),
new UI.Text().setValue( 'Map' ).setColor( '#666' ),
materialMap
);
materialMapRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Map' ).setColor( '#666' ) );
materialMapRow.add( materialMap );
container.add( materialSpecularRow );
......@@ -105,11 +88,8 @@ Sidebar.Properties.Material = function ( signals ) {
var materialOpacityRow = new UI.Panel();
var materialOpacity = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
materialOpacityRow.add(
new UI.HorizontalRule(),
new UI.Text().setValue( 'Opacity' ).setColor( '#666' ),
materialOpacity
);
materialOpacityRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Opacity' ).setColor( '#666' ) );
materialOpacityRow.add( materialOpacity );
container.add( materialOpacityRow );
......@@ -118,11 +98,8 @@ Sidebar.Properties.Material = function ( signals ) {
var materialTransparentRow = new UI.Panel();
var materialTransparent = new UI.Boolean( 'absolute' ).setValue( false ).setLeft( '90px' ).onChange( update );
materialTransparentRow.add(
new UI.HorizontalRule(),
new UI.Text().setValue( 'Transparent' ).setColor( '#666' ),
materialTransparent
);
materialTransparentRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Transparent' ).setColor( '#666' ) );
materialTransparentRow.add( materialTransparent );
container.add( materialTransparentRow );
......@@ -131,11 +108,8 @@ Sidebar.Properties.Material = function ( signals ) {
var materialWireframeRow = new UI.Panel();
var materialWireframe = new UI.Boolean( 'absolute' ).setValue( false ).setLeft( '90px' ).onChange( update );
materialWireframeRow.add(
new UI.HorizontalRule(),
new UI.Text().setValue( 'Wireframe' ).setColor( '#666' ),
materialWireframe
);
materialWireframeRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Wireframe' ).setColor( '#666' ) );
materialWireframeRow.add( materialWireframe );
container.add( materialWireframeRow );
......@@ -144,11 +118,8 @@ Sidebar.Properties.Material = function ( signals ) {
var materialWireframeLinewidthRow = new UI.Panel();
var materialWireframeLinewidth = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '90px' ).setRange( 0, 100 ).onChange( update );
materialWireframeLinewidthRow.add(
new UI.HorizontalRule(),
new UI.Text().setValue( 'Linewidth' ).setColor( '#666' ),
materialWireframeLinewidth
);
materialWireframeLinewidthRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Linewidth' ).setColor( '#666' ) );
materialWireframeLinewidthRow.add( materialWireframeLinewidth );
container.add( materialWireframeLinewidthRow );
......
gui/js/ui/Sidebar.Properties.Object3D.js
浏览文件 @ c3829915
......@@ -6,31 +6,63 @@ Sidebar.Properties.Object3D = function ( signals ) {
container.add( new UI.Text().setValue( 'OBJECT' ).setColor( '#666' ) );
container.add( new UI.Break(), new UI.Break() );
container.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
// name
var objectNameRow = new UI.Panel();
var objectName = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' );
container.add( objectName );
container.add( new UI.HorizontalRule() );
container.add( new UI.Text().setValue( 'Position' ).setColor( '#666' ) );
var positionX = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '50px' ).onChange( update );
var positionY = new UI.Number( 'absolute' ).setLeft( '150px' ).setWidth( '50px' ).onChange( update );
var positionZ = new UI.Number( 'absolute' ).setLeft( '210px' ).setWidth( '50px' ).onChange( update );
container.add( positionX, positionY, positionZ );
container.add( new UI.HorizontalRule() );
container.add( new UI.Text().setValue( 'Rotation' ).setColor( '#666' ) );
var rotationX = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '50px' ).onChange( update );
var rotationY = new UI.Number( 'absolute' ).setLeft( '150px' ).setWidth( '50px' ).onChange( update );
var rotationZ = new UI.Number( 'absolute' ).setLeft( '210px' ).setWidth( '50px' ).onChange( update );
container.add( rotationX, rotationY, rotationZ );
container.add( new UI.HorizontalRule() );
container.add( new UI.Text().setValue( 'Scale' ).setColor( '#666' ) );
var scaleX = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '90px' ).setWidth( '50px' ).onChange( update );
var scaleY = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '150px' ).setWidth( '50px' ).onChange( update );
var scaleZ = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '210px' ).setWidth( '50px' ).onChange( update );
container.add( scaleX, scaleY, scaleZ );
container.add( new UI.Break(), new UI.Break(), new UI.Break() );
objectNameRow.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
objectNameRow.add( objectName );
container.add( objectNameRow );
// position
var objectPositionRow = new UI.Panel();
var objectPositionX = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '50px' ).onChange( update );
var objectPositionY = new UI.Number( 'absolute' ).setLeft( '150px' ).setWidth( '50px' ).onChange( update );
var objectPositionZ = new UI.Number( 'absolute' ).setLeft( '210px' ).setWidth( '50px' ).onChange( update );
objectPositionRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Position' ).setColor( '#666' ) );
objectPositionRow.add( objectPositionX, objectPositionY, objectPositionZ );
container.add( objectPositionRow );
// rotation
var objectRotationRow = new UI.Panel();
var objectRotationX = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '50px' ).onChange( update );
var objectRotationY = new UI.Number( 'absolute' ).setLeft( '150px' ).setWidth( '50px' ).onChange( update );
var objectRotationZ = new UI.Number( 'absolute' ).setLeft( '210px' ).setWidth( '50px' ).onChange( update );
objectRotationRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Rotation' ).setColor( '#666' ) );
objectRotationRow.add( objectRotationX, objectRotationY, objectRotationZ );
container.add( objectRotationRow );
// scale
var objectScaleRow = new UI.Panel();
var objectScaleX = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '90px' ).setWidth( '50px' ).onChange( update );
var objectScaleY = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '150px' ).setWidth( '50px' ).onChange( update );
var objectScaleZ = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '210px' ).setWidth( '50px' ).onChange( update );
objectScaleRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Scale' ).setColor( '#666' ) );
objectScaleRow.add( objectScaleX, objectScaleY, objectScaleZ );
container.add( objectScaleRow );
// visible
var objectVisibleRow = new UI.Panel();
var objectVisible = new UI.Boolean( 'absolute' ).setLeft( '90px' ).setWidth( '50px' ).onChange( update );
objectVisibleRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Visible' ).setColor( '#666' ) );
objectVisibleRow.add( objectVisible );
container.add( objectVisibleRow );
container.add( new UI.Break(), new UI.Break() );
//
......@@ -40,17 +72,19 @@ Sidebar.Properties.Object3D = function ( signals ) {
if ( selected ) {
selected.position.x = positionX.getValue();
selected.position.y = positionY.getValue();
selected.position.z = positionZ.getValue();
selected.position.x = objectPositionX.getValue();
selected.position.y = objectPositionY.getValue();
selected.position.z = objectPositionZ.getValue();
selected.rotation.x = rotationX.getValue();
selected.rotation.y = rotationY.getValue();
selected.rotation.z = rotationZ.getValue();
selected.rotation.x = objectRotationX.getValue();
selected.rotation.y = objectRotationY.getValue();
selected.rotation.z = objectRotationZ.getValue();
selected.scale.x = scaleX.getValue();
selected.scale.y = scaleY.getValue();
selected.scale.z = scaleZ.getValue();
selected.scale.x = objectScaleX.getValue();
selected.scale.y = objectScaleY.getValue();
selected.scale.z = objectScaleZ.getValue();
selected.visible = objectVisible.getValue();
signals.objectChanged.dispatch( selected );
......@@ -68,17 +102,19 @@ Sidebar.Properties.Object3D = function ( signals ) {
objectName.setValue( object.name );
positionX.setValue( object.position.x );
positionY.setValue( object.position.y );
positionZ.setValue( object.position.z );
objectPositionX.setValue( object.position.x );
objectPositionY.setValue( object.position.y );
objectPositionZ.setValue( object.position.z );
objectRotationX.setValue( object.rotation.x );
objectRotationY.setValue( object.rotation.y );
objectRotationZ.setValue( object.rotation.z );
rotationX.setValue( object.rotation.x );
rotationY.setValue( object.rotation.y );
rotationZ.setValue( object.rotation.z );
objectScaleX.setValue( object.scale.x );
objectScaleY.setValue( object.scale.y );
objectScaleZ.setValue( object.scale.z );
scaleX.setValue( object.scale.x );
scaleY.setValue( object.scale.y );
scaleZ.setValue( object.scale.z );
objectVisible.setValue( object.visible );
} else {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或