Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

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

GUI: Material class can now be changed.

上级 eea8d110
隐藏空白更改
内联 并排
Showing with 219 addition and 90 deletion
gui/js/UI.js
浏览文件 @ e186dd95
......@@ -256,7 +256,7 @@ UI.Text = function ( position ) {
UI.Text.prototype = Object.create( UI.Element.prototype );
UI.Text.prototype.setText = function ( value ) {
UI.Text.prototype.setValue = function ( value ) {
this.dom.textContent = value;
......@@ -264,6 +264,100 @@ UI.Text.prototype.setText = function ( value ) {
};
// Select
UI.Select = function ( position ) {
UI.Element.call( this );
var scope = this;
this.dom = document.createElement( 'select' );
this.dom.style.position = position || 'relative';
this.dom.style.width = '64px';
this.dom.style.height = '16px';
this.dom.style.border = '0px';
this.dom.style.padding = '0px';
this.onChangeCallback = null;
this.dom.addEventListener( 'change', function ( event ) {
// console.log( scope.dom.selectedIndex );
if ( scope.onChangeCallback ) scope.onChangeCallback();
}, false );
return this;
};
UI.Select.prototype = Object.create( UI.Element.prototype );
UI.Select.prototype.setOptions = function ( options ) {
for ( var i = 0; i < options.length; i ++ ) {
var option = document.createElement( 'option' );
option.appendChild( document.createTextNode( options[ i ] ) );
this.dom.appendChild( option );
}
return this;
};
UI.Select.prototype.getValue = function () {
return this.dom.value;
};
UI.Select.prototype.setValue = function ( value ) {
this.dom.value = value;
return this;
};
UI.Select.prototype.onChange = function ( callback ) {
this.onChangeCallback = callback;
return this;
};
// Boolean
UI.Boolean = function ( position ) {
UI.Select.call( this, position );
this.setOptions( [ 'true', 'false' ] );
return this;
};
UI.Boolean.prototype = Object.create( UI.Select.prototype );
UI.Boolean.prototype.getValue = function () {
return this.dom.value === 'true';
};
UI.Boolean.prototype.setValue = function ( value ) {
this.dom.value = value.toString();
return this;
};
// Color
......@@ -493,7 +587,7 @@ UI.Button = function ( position ) {
UI.Button.prototype = Object.create( UI.Element.prototype );
UI.Button.prototype.setText = function ( value ) {
UI.Button.prototype.setLabel = function ( value ) {
this.dom.textContent = value;
......
gui/js/ui/Menubar.js
浏览文件 @ e186dd95
......@@ -5,9 +5,10 @@ var Menubar = function ( signals ) {
var options = new UI.Panel();
options.setMargin( '8px' );
options.add( new UI.Text().setText( 'File' ).setColor( '#666' ).setMarginRight( '20px' ) );
options.add( new UI.Text().setText( 'Edit' ).setColor( '#666' ).setMarginRight( '20px' ) );
options.add( new UI.Text().setText( 'About' ).setColor( '#666' ).setMarginRight( '20px' ) );
options.add( new UI.Text().setValue( 'File' ).setColor( '#666' ).setMarginRight( '20px' ) );
options.add( new UI.Text().setValue( 'Edit' ).setColor( '#666' ).setMarginRight( '20px' ) );
options.add( new UI.Text().setValue( 'Add' ).setColor( '#666' ).setMarginRight( '20px' ) );
options.add( new UI.Text().setValue( 'Help' ).setColor( '#666' ).setMarginRight( '20px' ) );
container.add( options );
return container;
......
gui/js/ui/Sidebar.Outliner.js
浏览文件 @ e186dd95
......@@ -6,7 +6,7 @@ Sidebar.Outliner = function ( signals ) {
container.setPadding( '8px' );
container.setBorderTop( '1px solid #ccc' );
container.add( new UI.Text().setText( 'SCENE' ).setColor( '#666' ) );
container.add( new UI.Text().setValue( 'SCENE' ).setColor( '#666' ) );
container.add( new UI.Break(), new UI.Break() );
......
gui/js/ui/Sidebar.Properties.Geometry.js
浏览文件 @ e186dd95
......@@ -3,26 +3,26 @@ Sidebar.Properties.Geometry = function ( signals ) {
var container = new UI.Panel();
container.setDisplay( 'none' );
container.add( new UI.Text().setText( 'GEOMETRY' ).setColor( '#666' ) );
container.add( new UI.Button( 'absolute' ).setRight( '0px' ).setText( 'Export' ).onClick( exportGeometry ) );
container.add( new UI.Text().setValue( 'GEOMETRY' ).setColor( '#666' ) );
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().setText( 'Name' ).setColor( '#666' ) );
container.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
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().setText( 'Class' ).setColor( '#666' ) );
container.add( new UI.Text().setValue( 'Class' ).setColor( '#666' ) );
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().setText( 'Vertices' ).setColor( '#666' ) );
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() );
container.add( new UI.Text().setText( 'Faces' ).setColor( '#666' ) );
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() );
......@@ -39,10 +39,10 @@ Sidebar.Properties.Geometry = function ( signals ) {
container.setDisplay( 'block' );
geometryName.setText( object.geometry.name );
geometryClass.setText( getGeometryInstanceName( object.geometry ) );
verticesCount.setText( object.geometry.vertices.length );
facesCount.setText( object.geometry.faces.length );
geometryName.setValue( object.geometry.name );
geometryClass.setValue( getGeometryInstanceName( object.geometry ) );
verticesCount.setValue( object.geometry.vertices.length );
facesCount.setValue( object.geometry.faces.length );
} else {
......@@ -56,25 +56,33 @@ Sidebar.Properties.Geometry = function ( signals ) {
function getGeometryInstanceName( geometry ) {
// TODO: Is there a way of doing this automatically?
if ( geometry instanceof THREE.ConvexGeometry ) return "ConvexGeometry";
if ( geometry instanceof THREE.CubeGeometry ) return "CubeGeometry";
if ( geometry instanceof THREE.CylinderGeometry ) return "CylinderGeometry";
if ( geometry instanceof THREE.ExtrudeGeometry ) return "ExtrudeGeometry";
if ( geometry instanceof THREE.IcosahedronGeometry ) return "IcosahedronGeometry";
if ( geometry instanceof THREE.LatheGeometry ) return "LatheGeometry";
if ( geometry instanceof THREE.OctahedronGeometry ) return "OctahedronGeometry";
if ( geometry instanceof THREE.ParametricGeometry ) return "ParametricGeometry";
if ( geometry instanceof THREE.PlaneGeometry ) return "PlaneGeometry";
if ( geometry instanceof THREE.PolyhedronGeometry ) return "PolyhedronGeometry";
if ( geometry instanceof THREE.SphereGeometry ) return "SphereGeometry";
if ( geometry instanceof THREE.TetrahedronGeometry ) return "TetrahedronGeometry";
if ( geometry instanceof THREE.TextGeometry ) return "TextGeometry";
if ( geometry instanceof THREE.TorusGeometry ) return "TorusGeometry";
if ( geometry instanceof THREE.TorusKnotGeometry ) return "TorusKnotGeometry";
if ( geometry instanceof THREE.TubeGeometry ) return "TubeGeometry";
if ( geometry instanceof THREE.Geometry ) return "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;
}
}
......@@ -110,8 +118,8 @@ Sidebar.Properties.Geometry = function ( signals ) {
var hasFaceVertexColor = face.vertexColors[ 0 ] !== undefined;
var faceType = 0;
faceType = setBit( faceType, 0, ! isTriangle );
faceType = setBit( faceType, 0, ! isTriangle );
// faceType = setBit( faceType, 1, hasMaterial );
// faceType = setBit( faceType, 2, hasFaceUv );
// faceType = setBit( faceType, 3, hasFaceVertexUv );
......
gui/js/ui/Sidebar.Properties.Material.js
浏览文件 @ e186dd95
Sidebar.Properties.Material = function ( signals ) {
var materials = {
'LineBasicMaterial': THREE.LineBasicMaterial,
'MeshBasicMaterial': THREE.MeshBasicMaterial,
'MeshDepthMaterial': THREE.MeshDepthMaterial,
'MeshFaceMaterial': THREE.MeshFaceMaterial,
'MeshLambertMaterial': THREE.MeshLambertMaterial,
'MeshNormalMaterial': THREE.MeshNormalMaterial,
'MeshPhongMaterial': THREE.MeshPhongMaterial,
'ParticleBasicMaterial': THREE.ParticleBasicMaterial,
'ParticleCanvasMaterial': THREE.ParticleCanvasMaterial,
'ParticleDOMMaterial': THREE.ParticleDOMMaterial,
'ShaderMaterial': THREE.ShaderMaterial,
'Material': THREE.Material
};
var container = new UI.Panel();
container.setDisplay( 'none' );
container.add( new UI.Text().setText( 'MATERIAL' ).setColor( '#666' ) );
container.add( new UI.Text().setValue( 'MATERIAL' ).setColor( '#666' ) );
container.add( new UI.Break(), new UI.Break() );
container.add( new UI.Text().setText( 'Name' ).setColor( '#666' ) );
container.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
var materialName = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
container.add( materialName );
container.add( new UI.HorizontalRule() );
container.add( new UI.Text().setText( 'Class' ).setColor( '#666' ) );
var materialClass = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
container.add( new UI.Text().setValue( 'Class' ).setColor( '#666' ) );
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 );
container.add( materialClass );
container.add( new UI.HorizontalRule() );
container.add( new UI.Text().setText( 'Color' ).setColor( '#666' ) );
container.add( new UI.Text().setValue( 'Color' ).setColor( '#666' ) );
var materialColor = new UI.Color( 'absolute' ).setLeft( '90px' ).onChange( update );
container.add( materialColor );
container.add( new UI.HorizontalRule() );
container.add( new UI.Text().setText( 'Ambient' ).setColor( '#666' ) );
container.add( new UI.Text().setValue( 'Ambient' ).setColor( '#666' ) );
var materialAmbient = new UI.Color( 'absolute' ).setLeft( '90px' ).onChange( update );
container.add( materialAmbient );
container.add( new UI.HorizontalRule() );
container.add( new UI.Text().setText( 'Specular' ).setColor( '#666' ) );
container.add( new UI.Text().setValue( 'Specular' ).setColor( '#666' ) );
var materialSpecular = new UI.Color( 'absolute' ).setLeft( '90px' ).onChange( update );
container.add( materialSpecular );
container.add( new UI.HorizontalRule() );
container.add( new UI.Text().setText( 'Map' ).setColor( '#666' ) );
container.add( new UI.Text().setValue( 'Map' ).setColor( '#666' ) );
var materialMap = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
container.add( materialMap );
container.add( new UI.HorizontalRule() );
container.add( new UI.Text().setText( 'Opacity' ).setColor( '#666' ) );
container.add( new UI.Text().setValue( 'Opacity' ).setColor( '#666' ) );
var materialOpacity = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '60px' ).setMin( 0 ).setMax( 1 ).onChange( update );
container.add( materialOpacity );
container.add( new UI.HorizontalRule() );
container.add( new UI.Text().setText( 'Transparent' ).setColor( '#666' ) );
var materialTransparent = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
container.add( new UI.Text().setValue( 'Transparent' ).setColor( '#666' ) );
var materialTransparent = new UI.Boolean( 'absolute' ).setLeft( '90px' ).onChange( update );
container.add( materialTransparent );
//
......@@ -54,25 +71,39 @@ Sidebar.Properties.Material = function ( signals ) {
function update() {
if ( selected ) {
var material = selected.material;
if ( material ) {
if ( material instanceof materials[ materialClass.getValue() ] == false ) {
material = new materials[ materialClass.getValue() ];
selected.material = material;
}
if ( material.color ) {
material.color.setHex( parseInt( materialColor.getValue().substr( 1 ), 16 ) );
selected.color.setHex( parseInt( materialColor.getValue().substr( 1 ), 16 ) );
}
if ( selected.ambient ) {
if ( material.ambient ) {
selected.ambient.setHex( parseInt( materialAmbient.getValue().substr( 1 ), 16 ) );
material.ambient.setHex( parseInt( materialAmbient.getValue().substr( 1 ), 16 ) );
}
if ( selected.specular ) {
if ( material.specular ) {
selected.specular.setHex( parseInt( materialSpecular.getValue().substr( 1 ), 16 ) );
material.specular.setHex( parseInt( materialSpecular.getValue().substr( 1 ), 16 ) );
}
selected.opacity = materialOpacity.getValue();
material.opacity = materialOpacity.getValue();
material.transparent = materialTransparent.getValue();
signals.materialChanged.dispatch( selected );
signals.materialChanged.dispatch( material );
}
......@@ -82,18 +113,22 @@ Sidebar.Properties.Material = function ( signals ) {
if ( object && object.material ) {
selected = object.material;
selected = object;
container.setDisplay( 'block' );
materialName.setText( object.material.name );
materialClass.setText( getMaterialInstanceName( object.material ) );
materialColor.setValue( '#' + object.material.color.getHex().toString( 16 ) );
if ( object.material.ambient ) materialAmbient.setValue( '#' + object.material.ambient.getHex().toString( 16 ) );
if ( object.material.specular ) materialSpecular.setValue( '#' + object.material.specular.getHex().toString( 16 ) );
materialMap.setText( object.material.map );
materialOpacity.setValue( object.material.opacity );
materialTransparent.setText( object.material.transparent );
var material = object.material;
materialName.setValue( material.name );
materialClass.setValue( getMaterialInstanceName( material ) );
if ( material.color ) materialColor.setValue( '#' + material.color.getHex().toString( 16 ) );
if ( material.ambient ) materialAmbient.setValue( '#' + material.ambient.getHex().toString( 16 ) );
if ( material.specular ) materialSpecular.setValue( '#' + material.specular.getHex().toString( 16 ) );
if ( material.map ) materialMap.setValue( material.map );
materialOpacity.setValue( material.opacity );
materialTransparent.setValue( material.transparent );
} else {
......@@ -107,20 +142,11 @@ Sidebar.Properties.Material = function ( signals ) {
function getMaterialInstanceName( material ) {
// TODO: Is there a way of doing this automatically?
if ( material instanceof THREE.LineBasicMaterial ) return "LineBasicMaterial";
if ( material instanceof THREE.MeshBasicMaterial ) return "MeshBasicMaterial";
if ( material instanceof THREE.MeshDepthMaterial ) return "MeshDepthMaterial";
if ( material instanceof THREE.MeshFaceMaterial ) return "MeshFaceMaterial";
if ( material instanceof THREE.MeshLambertMaterial ) return "MeshLambertMaterial";
if ( material instanceof THREE.MeshNormalMaterial ) return "MeshNormalMaterial";
if ( material instanceof THREE.MeshPhongMaterial ) return "MeshPhongMaterial";
if ( material instanceof THREE.ParticleBasicMaterial ) return "ParticleBasicMaterial";
if ( material instanceof THREE.ParticleCanvasMaterial ) return "ParticleCanvasMaterial";
if ( material instanceof THREE.ParticleDOMMaterial ) return "ParticleDOMMaterial";
if ( material instanceof THREE.ShaderMaterial ) return "ShaderMaterial";
if ( material instanceof THREE.Material ) return "Material";
for ( var key in materials ) {
if ( material instanceof materials[ key ] ) return key;
}
}
......
gui/js/ui/Sidebar.Properties.Object3D.js
浏览文件 @ e186dd95
......@@ -3,29 +3,29 @@ Sidebar.Properties.Object3D = function ( signals ) {
var container = new UI.Panel();
container.setDisplay( 'none' );
container.add( new UI.Text().setText( 'OBJECT' ).setColor( '#666' ) );
container.add( new UI.Text().setValue( 'OBJECT' ).setColor( '#666' ) );
container.add( new UI.Break(), new UI.Break() );
container.add( new UI.Text().setText( 'Name' ).setColor( '#666' ) );
container.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
var objectName = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' );
container.add( objectName );
container.add( new UI.HorizontalRule() );
container.add( new UI.Text().setText( 'Position' ).setColor( '#666' ) );
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().setText( 'Rotation' ).setColor( '#666' ) );
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().setText( 'Scale' ).setColor( '#666' ) );
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 );
......@@ -66,7 +66,7 @@ Sidebar.Properties.Object3D = function ( signals ) {
container.setDisplay( 'block' );
objectName.setText( object.name );
objectName.setValue( object.name );
positionX.setValue( object.position.x );
positionY.setValue( object.position.y );
......
gui/js/ui/Viewport.js
浏览文件 @ e186dd95
......@@ -46,7 +46,6 @@ var Viewport = function ( signals ) {
camera.lookAt( scene.position );
scene.add( camera );
/*
var controls = new THREE.TrackballControls( camera, container.dom );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
......@@ -56,10 +55,11 @@ var Viewport = function ( signals ) {
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.addEventListener( 'change', render );
*/
/*
var controls = new THREE.OrbitControls( camera, container.dom );
controls.addEventListener( 'change', render );
*/
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 0.5, 0 ).normalize();
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或