Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 a4bee66f 编写于 作者: A Aleksandar Rodic
浏览文件
操作

added custom UI classes for attributes 

Replaced multiple attribute pannels with a single uber attribute panel

added lock to scale param
上级 b61034a6
隐藏空白更改
内联 并排
Showing with 897 addition and 2198 deletion
editor/index.html
浏览文件 @ a4bee66f
...@@ -65,7 +65,6 @@ ...@@ -65,7 +65,6 @@
} }
.sidebar { .sidebar {
width: 300px;
background-color: #eee; background-color: #eee;
overflow: auto; overflow: auto;
} }
...@@ -129,18 +128,8 @@ ...@@ -129,18 +128,8 @@
<script src="js/Sidebar.Outliner.Materials.js"></script> <script src="js/Sidebar.Outliner.Materials.js"></script>
<script src="js/Sidebar.Outliner.Textures.js"></script> <script src="js/Sidebar.Outliner.Textures.js"></script>
<script src="js/Sidebar.Selected.js"></script> <script src="js/Sidebar.Attributes.js"></script>
<script src="js/Sidebar.Object3D.js"></script>
<script src="js/Sidebar.Geometry.js"></script>
<script src="js/Sidebar.Animation.js"></script> <script src="js/Sidebar.Animation.js"></script>
<script src="js/Sidebar.Geometry.PlaneGeometry.js"></script>
<script src="js/Sidebar.Geometry.CubeGeometry.js"></script>
<script src="js/Sidebar.Geometry.CylinderGeometry.js"></script>
<script src="js/Sidebar.Geometry.SphereGeometry.js"></script>
<script src="js/Sidebar.Geometry.IcosahedronGeometry.js"></script>
<script src="js/Sidebar.Geometry.TorusGeometry.js"></script>
<script src="js/Sidebar.Geometry.TorusKnotGeometry.js"></script>
<script src="js/Sidebar.Material.js"></script>
<script src="js/Toolbar.js"></script> <script src="js/Toolbar.js"></script>
<script src="js/Viewport.js"></script> <script src="js/Viewport.js"></script>
......
editor/js/Editor.js
浏览文件 @ a4bee66f
...@@ -53,36 +53,12 @@ Editor.prototype = { ...@@ -53,36 +53,12 @@ Editor.prototype = {
parameters = parameters ? parameters : {}; parameters = parameters ? parameters : {};
var name = parameters.name ? parameters.name : null;
var width = parameters.width ? parameters.width : null;
var height = parameters.height ? parameters.height : null;
var depth = parameters.depth ? parameters.depth : null;
var widthSegments = parameters.widthSegments ? parameters.widthSegments : null;
var heightSegments = parameters.heightSegments ? parameters.heightSegments : null;
var depthSegments = parameters.depthSegments ? parameters.depthSegments : null;
var radialSegments = parameters.radialSegments ? parameters.radialSegments : null;
var tubularSegments = parameters.tubularSegments ? parameters.tubularSegments : null;
var radius = parameters.radius ? parameters.radius : null;
var radiusTop = parameters.radiusTop ? parameters.radiusTop : null;
var radiusBottom = parameters.radiusBottom ? parameters.radiusBottom : null;
var phiStart = parameters.phiStart ? parameters.phiStart : null;
var phiLength = parameters.phiLength ? parameters.phiLength : null;
var thetaStart = parameters.thetaStart ? parameters.thetaStart : null;
var thetaLength = parameters.thetaLength ? parameters.thetaLength : null;
var tube = parameters.tube ? parameters.tube : null;
var arc = parameters.arc ? parameters.arc : null;
var detail = parameters.detail ? parameters.detail : null;
var p = parameters.p ? parameters.p : null;
var q = parameters.q ? parameters.q : null;
var heightScale = parameters.heightScale ? parameters.heightScale : null;
var openEnded = parameters.openEnded ? parameters.openEnded : false;
var color = parameters.color ? parameters.color : null; var color = parameters.color ? parameters.color : null;
var groundColor = parameters.groundColor ? parameters.groundColor : null;
var intensity = parameters.intensity ? parameters.intensity : null; var intensity = parameters.intensity ? parameters.intensity : null;
var distance = parameters.distance ? parameters.distance : null; var distance = parameters.distance ? parameters.distance : null;
var angle = parameters.angle ? parameters.angle : null; var angle = parameters.angle ? parameters.angle : null;
var exponent = parameters.exponent ? parameters.exponent : null; var exponent = parameters.exponent ? parameters.exponent : null;
var skyColor = parameters.skyColor ? parameters.skyColor : null;
var groundColor = parameters.groundColor ? parameters.groundColor : null;
if ( !type ) { if ( !type ) {
...@@ -91,102 +67,54 @@ Editor.prototype = { ...@@ -91,102 +67,54 @@ Editor.prototype = {
} else if ( type == 'plane' ) { } else if ( type == 'plane' ) {
width = width ? width : 200; geometry = this.createGeometry( type, parameters );
height = height ? height : 200;
widthSegments = widthSegments ? widthSegments : 1;
heightSegments = heightSegments ? heightSegments : 1;
geometry = new THREE.PlaneGeometry( width, height, widthSegments, heightSegments );
object = new THREE.Mesh( geometry, this.defaultMaterial ); object = new THREE.Mesh( geometry, this.defaultMaterial );
object.name = name ? name : 'Plane ' + object.id; object.name = name ? name : type + object.id;
geometry.name = object.name + ' geometry';
object.rotation.x = - Math.PI/2; object.rotation.x = - Math.PI/2;
} else if ( type == 'cube' ) { } else if ( type == 'cube' ) {
width = width ? width : 100; geometry = this.createGeometry( type, parameters );
height = height ? height : 100;
depth = depth ? depth : 100;
widthSegments = widthSegments ? widthSegments : 1;
heightSegments = heightSegments ? heightSegments : 1;
depthSegments = depthSegments ? depthSegments : 1;
geometry = new THREE.CubeGeometry( width, height, depth, widthSegments, heightSegments, depthSegments );
object = new THREE.Mesh( geometry, this.defaultMaterial ); object = new THREE.Mesh( geometry, this.defaultMaterial );
object.name = name ? name : 'Cube ' + object.id; object.name = name ? name : type + object.id;
geometry.name = object.name + ' geometry';
} else if ( type == 'cylinder' ) { } else if ( type == 'cylinder' ) {
radiusTop = radiusTop ? radiusTop : 20; geometry = this.createGeometry( type, parameters );
radiusBottom = radiusBottom ? radiusBottom : 20;
height = height ? height : 100;
radialSegments = radialSegments ? radialSegments : 8;
heightSegments = heightSegments ? heightSegments : 1;
openEnded = openEnded ? openEnded : false;
geometry = new THREE.CylinderGeometry( radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded );
object = new THREE.Mesh( geometry, this.defaultMaterial ); object = new THREE.Mesh( geometry, this.defaultMaterial );
object.name = name ? name : 'Cylinder ' + object.id; object.name = name ? name : type + object.id;
geometry.name = object.name + ' geometry';
} else if ( type == 'sphere' ) { } else if ( type == 'sphere' ) {
radius = radius ? radius : 75; geometry = this.createGeometry( type, parameters );
widthSegments = widthSegments ? widthSegments : 32;
heightSegments = heightSegments ? heightSegments : 16;
widthSegments = widthSegments ? widthSegments : 32;
heightSegments = heightSegments ? heightSegments : 16;
phiStart = phiStart ? phiStart : null;
phiLength = phiLength ? phiLength : null;
thetaStart = thetaStart ? thetaStart : null;
thetaLength = thetaLength ? thetaLength : null;
geometry = new THREE.SphereGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength );
object = new THREE.Mesh( geometry, this.defaultMaterial ); object = new THREE.Mesh( geometry, this.defaultMaterial );
object.name = name ? name : 'Sphere ' + object.id; object.name = name ? name : type + object.id;
geometry.name = object.name + ' geometry';
} else if ( type == 'icosahedron' ) { } else if ( type == 'icosahedron' ) {
radius = radius ? radius : 75; geometry = this.createGeometry( type, parameters );
detail = detail ? detail : 2;
geometry = new THREE.IcosahedronGeometry ( radius, detail );
object = new THREE.Mesh( geometry, this.defaultMaterial ); object = new THREE.Mesh( geometry, this.defaultMaterial );
object.name = name ? name : 'Icosahedron ' + object.id; object.name = name ? name : type + object.id;
geometry.name = object.name + ' geometry';
} else if ( type == 'torus' ) { } else if ( type == 'torus' ) {
radius = radius ? radius : 100; geometry = this.createGeometry( type, parameters );
tube = tube ? tube : 40;
radialSegments = radialSegments ? radialSegments : 8;
tubularSegments = tubularSegments ? tubularSegments : 6;
arc = arc ? arc : Math.PI * 2;
geometry = new THREE.TorusGeometry( radius, tube, radialSegments, tubularSegments, arc );
object = new THREE.Mesh( geometry, this.defaultMaterial ); object = new THREE.Mesh( geometry, this.defaultMaterial );
object.name = name ? name : 'Torus ' + object.id; object.name = name ? name : type + object.id;
geometry.name = object.name + ' geometry';
} else if ( type == 'torusknot' ) { } else if ( type == 'torusknot' ) {
radius = radius ? radius : 100; geometry = this.createGeometry( type, parameters );
tube = tube ? tube : 40;
radialSegments = radialSegments ? radialSegments : 64;
tubularSegments = tubularSegments ? tubularSegments : 8;
p = p ? p : 2;
q = q ? q : 3;
heightScale = heightScale ? heightScale : 1;
geometry = new THREE.TorusKnotGeometry( radius, tube, radialSegments, tubularSegments, p, q, heightScale );
object = new THREE.Mesh( geometry, this.defaultMaterial ); object = new THREE.Mesh( geometry, this.defaultMaterial );
object.name = name ? name : 'TorusKnot ' + object.id; object.name = name ? name : type + object.id;
geometry.name = object.name + ' geometry';
} else if ( type == 'pointlight' ) { } else if ( type == 'pointlight' ) {
...@@ -224,11 +152,11 @@ Editor.prototype = { ...@@ -224,11 +152,11 @@ Editor.prototype = {
} else if ( type == 'hemispherelight' ) { } else if ( type == 'hemispherelight' ) {
skyColor = skyColor ? skyColor : 0x00aaff; color = color ? color : 0x00aaff;
groundColor = groundColor ? groundColor : 0xffaa00; groundColor = groundColor ? groundColor : 0xffaa00;
intensity = intensity ? intensity : 1; intensity = intensity ? intensity : 1;
var object = new THREE.HemisphereLight( skyColor, groundColor, intensity ); var object = new THREE.HemisphereLight( color, groundColor, intensity );
object.name = name ? name : 'HemisphereLight ' + object.id; object.name = name ? name : 'HemisphereLight ' + object.id;
object.position.set( 1, 1, 1 ).multiplyScalar( 200 ); object.position.set( 1, 1, 1 ).multiplyScalar( 200 );
...@@ -248,6 +176,124 @@ Editor.prototype = { ...@@ -248,6 +176,124 @@ Editor.prototype = {
}, },
createGeometry: function( type, parameters ) {
type = type ? type : null;
parameters = parameters ? parameters : {};
var name = parameters.name ? parameters.name : type + 'Geometry';
var width = parameters.width ? parameters.width : null;
var height = parameters.height ? parameters.height : null;
var depth = parameters.depth ? parameters.depth : null;
var widthSegments = parameters.widthSegments ? parameters.widthSegments : null;
var heightSegments = parameters.heightSegments ? parameters.heightSegments : null;
var depthSegments = parameters.depthSegments ? parameters.depthSegments : null;
var radialSegments = parameters.radialSegments ? parameters.radialSegments : null;
var tubularSegments = parameters.tubularSegments ? parameters.tubularSegments : null;
var radius = parameters.radius ? parameters.radius : null;
var radiusTop = parameters.radiusTop ? parameters.radiusTop : null;
var radiusBottom = parameters.radiusBottom ? parameters.radiusBottom : null;
var phiStart = parameters.phiStart ? parameters.phiStart : null;
var phiLength = parameters.phiLength ? parameters.phiLength : null;
var thetaStart = parameters.thetaStart ? parameters.thetaStart : null;
var thetaLength = parameters.thetaLength ? parameters.thetaLength : null;
var tube = parameters.tube ? parameters.tube : null;
var arc = parameters.arc ? parameters.arc : null;
var detail = parameters.detail ? parameters.detail : null;
var p = parameters.p ? parameters.p : null;
var q = parameters.q ? parameters.q : null;
var heightScale = parameters.heightScale ? parameters.heightScale : null;
var openEnded = parameters.openEnded ? parameters.openEnded : false;
var geometry;
if ( !type ) {
geometry = new THREE.Geometry();
} else if ( type == 'plane' ) {
width = width ? width : 200;
height = height ? height : 200;
widthSegments = widthSegments ? widthSegments : 1;
heightSegments = heightSegments ? heightSegments : 1;
geometry = new THREE.PlaneGeometry( width, height, widthSegments, heightSegments );
} else if ( type == 'cube' ) {
width = width ? width : 100;
height = height ? height : 100;
depth = depth ? depth : 100;
widthSegments = widthSegments ? widthSegments : 1;
heightSegments = heightSegments ? heightSegments : 1;
depthSegments = depthSegments ? depthSegments : 1;
geometry = new THREE.CubeGeometry( width, height, depth, widthSegments, heightSegments, depthSegments );
} else if ( type == 'cylinder' ) {
radiusTop = radiusTop ? radiusTop : 20;
radiusBottom = radiusBottom ? radiusBottom : 20;
height = height ? height : 100;
radialSegments = radialSegments ? radialSegments : 8;
heightSegments = heightSegments ? heightSegments : 1;
openEnded = openEnded ? openEnded : false;
geometry = new THREE.CylinderGeometry( radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded );
} else if ( type == 'sphere' ) {
radius = radius ? radius : 75;
widthSegments = widthSegments ? widthSegments : 32;
heightSegments = heightSegments ? heightSegments : 16;
widthSegments = widthSegments ? widthSegments : 32;
heightSegments = heightSegments ? heightSegments : 16;
phiStart = phiStart ? phiStart : 0;
phiLength = phiLength ? phiLength : Math.PI * 2;
thetaStart = thetaStart ? thetaStart : 0;
thetaLength = thetaLength ? thetaLength : Math.PI;
geometry = new THREE.SphereGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength );
} else if ( type == 'icosahedron' ) {
radius = radius ? radius : 75;
detail = detail ? detail : 2;
geometry = new THREE.IcosahedronGeometry ( radius, detail );
} else if ( type == 'torus' ) {
radius = radius ? radius : 100;
tube = tube ? tube : 40;
radialSegments = radialSegments ? radialSegments : 8;
tubularSegments = tubularSegments ? tubularSegments : 6;
arc = arc ? arc : Math.PI * 2;
geometry = new THREE.TorusGeometry( radius, tube, radialSegments, tubularSegments, arc );
} else if ( type == 'torusknot' ) {
radius = radius ? radius : 100;
tube = tube ? tube : 40;
radialSegments = radialSegments ? radialSegments : 64;
tubularSegments = tubularSegments ? tubularSegments : 8;
p = p ? p : 2;
q = q ? q : 3;
heightScale = heightScale ? heightScale : 1;
geometry = new THREE.TorusKnotGeometry( radius, tube, radialSegments, tubularSegments, p, q, heightScale );
}
geometry.name = name;
geometry.computeBoundingSphere();
return geometry;
},
createMaterial: function( type, parameters ) { createMaterial: function( type, parameters ) {
var material; var material;
...@@ -258,8 +304,6 @@ Editor.prototype = { ...@@ -258,8 +304,6 @@ Editor.prototype = {
var name = parameters.name ? parameters.name : null; var name = parameters.name ? parameters.name : null;
// TODO: implement types
if ( type == 'phong' ) { if ( type == 'phong' ) {
material = new THREE.MeshPhongMaterial( parameters ); material = new THREE.MeshPhongMaterial( parameters );
...@@ -675,8 +719,6 @@ Editor.prototype = { ...@@ -675,8 +719,6 @@ Editor.prototype = {
var deletedObjects = {}; var deletedObjects = {};
for ( var i in list ) { for ( var i in list ) {
// TODO: handle helpers
if ( this.objects[ list[ i ].uuid ] && list[ i ] != this.scene ) { if ( this.objects[ list[ i ].uuid ] && list[ i ] != this.scene ) {
...@@ -894,6 +936,62 @@ Editor.prototype = { ...@@ -894,6 +936,62 @@ Editor.prototype = {
}, },
// Utils
updateObject: function( object, parameters ) {
parameters = parameters ? parameters : {};
if ( parameters.parent && object.parent && object.parent != parameters.parent)
editor.parent( object, parameters.parent );
if ( parameters.geometry && object.geometry && object.geometry != parameters.geometry) {
object.geometry = parameters.geometry;
this.updateGeometry( object.geometry );
}
if ( parameters.material && object.material && object.material != parameters.material)
object.material = parameters.material;
if ( parameters.name !== undefined ) object.name = parameters.name;
if ( parameters.position !== undefined ) object.position = parameters.position;
if ( parameters.rotation !== undefined ) object.rotation = parameters.rotation;
if ( parameters.scale !== undefined ) object.scale = parameters.scale;
if ( object.fov !== undefined && parameters.fov !== undefined ) object.fov = parameters.fov;
if ( object.near !== undefined && parameters.near !== undefined ) object.near = parameters.near;
if ( object.far !== undefined && parameters.far !== undefined ) object.far = parameters.far;
if ( object.intensity !== undefined && parameters.intensity !== undefined ) object.intensity = parameters.intensity;
if ( object.color && parameters.color !== undefined ) object.color.setHex( parameters.color );
if ( object.groundColor && parameters.groundColor !== undefined ) object.groundColor.setHex( parameters.groundColor );
if ( object.distance !== undefined && parameters.distance !== undefined ) object.distance = parameters.distance;
if ( object.angle !== undefined && parameters.angle !== undefined ) object.angle = parameters.angle;
if ( object.exponent !== undefined && parameters.exponent !== undefined ) object.exponent = parameters.exponent;
if ( object.visible !== undefined && parameters.visible !== undefined ) object.visible = parameters.visible;
if ( parameters.userData !== undefined ) {
try {
object.userData = JSON.parse( parameters.userData );
} catch ( error ) {
console.log( error );
}
};
if ( object.updateProjectionMatrix ) object.updateProjectionMatrix();
signals.objectChanged.dispatch( object );
},
updateMaterials: function( list ) { updateMaterials: function( list ) {
list = list ? list : this.list( 'material' ); list = list ? list : this.list( 'material' );
...@@ -918,62 +1016,37 @@ Editor.prototype = { ...@@ -918,62 +1016,37 @@ Editor.prototype = {
}, },
remakeGeometry: function( geometry, parameters ) { updateGeometry: function( geometry, parameters ) {
// TODO: document
parameters = parameters ? parameters : {}; parameters = parameters ? parameters : {};
var uuid = geometry.uuid; var uuid = geometry.uuid;
var name = parameters.name ? parameters.name : geometry.name; var name = geometry.name;
var width = parameters.width ? parameters.width : null; if ( geometry instanceof THREE.PlaneGeometry )
var height = parameters.height ? parameters.height : null; geometry = this.createGeometry( 'plane', parameters );
var depth = parameters.depth ? parameters.depth : null;
var widthSegments = parameters.widthSegments ? parameters.widthSegments : null;
var heightSegments = parameters.heightSegments ? parameters.heightSegments : null;
var depthSegments = parameters.depthSegments ? parameters.depthSegments : null;
var radialSegments = parameters.radialSegments ? parameters.radialSegments : null;
var tubularSegments = parameters.tubularSegments ? parameters.tubularSegments : null;
var radius = parameters.radius ? parameters.radius : null;
var radiusTop = parameters.radiusTop ? parameters.radiusTop : null;
var radiusBottom = parameters.radiusBottom ? parameters.radiusBottom : null;
var phiStart = parameters.phiStart ? parameters.phiStart : null;
var phiLength = parameters.phiLength ? parameters.phiLength : null;
var thetaStart = parameters.thetaStart ? parameters.thetaStart : null;
var thetaLength = parameters.thetaLength ? parameters.thetaLength : null;
var tube = parameters.tube ? parameters.tube : null;
var arc = parameters.arc ? parameters.arc : null;
var detail = parameters.detail ? parameters.detail : null;
var p = parameters.p ? parameters.p : null;
var q = parameters.q ? parameters.q : null;
var heightScale = parameters.heightScale ? parameters.heightScale : null;
var openEnded = parameters.openEnded ? parameters.openEnded : false;
if ( geometry instanceof THREE.CubeGeometry ) if ( geometry instanceof THREE.CubeGeometry )
editor.geometries[uuid] = new THREE.CubeGeometry( width, height, depth, widthSegments, heightSegments, depthSegments ); geometry = this.createGeometry( 'cube', parameters );
if ( geometry instanceof THREE.CylinderGeometry ) if ( geometry instanceof THREE.CylinderGeometry )
editor.geometries[uuid] = new THREE.CylinderGeometry( radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded ); geometry = this.createGeometry( 'cylinder', parameters );
if ( geometry instanceof THREE.IcosahedronGeometry )
editor.geometries[uuid] = new THREE.IcosahedronGeometry( radius, detail );
if ( geometry instanceof THREE.PlaneGeometry )
editor.geometries[uuid] = new THREE.PlaneGeometry( width, height, widthSegments, heightSegments );
if ( geometry instanceof THREE.SphereGeometry ) if ( geometry instanceof THREE.SphereGeometry )
editor.geometries[uuid] = new THREE.SphereGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength ); geometry = this.createGeometry( 'sphere', parameters );
if ( geometry instanceof THREE.IcosahedronGeometry )
geometry = this.createGeometry( 'icosahedron', parameters );
if ( geometry instanceof THREE.TorusGeometry ) if ( geometry instanceof THREE.TorusGeometry )
editor.geometries[uuid] = new THREE.TorusGeometry( radius, tube, radialSegments, tubularSegments, arc ); geometry = this.createGeometry( 'torus', parameters );
if ( geometry instanceof THREE.TorusKnotGeometry ) if ( geometry instanceof THREE.TorusKnotGeometry )
editor.geometries[uuid] = new THREE.TorusKnotGeometry( radius, tube, radialSegments, tubularSegments, p, q, heightScale ); geometry = this.createGeometry( 'torusknot', parameters );
editor.geometries[uuid].computeBoundingSphere(); geometry.computeBoundingSphere();
editor.geometries[uuid].uuid = uuid; geometry.uuid = uuid;
editor.geometries[uuid].name = name; geometry.name = name;
for ( var i in editor.objects ) { for ( var i in editor.objects ) {
...@@ -984,7 +1057,7 @@ Editor.prototype = { ...@@ -984,7 +1057,7 @@ Editor.prototype = {
delete object.__webglInit; // TODO: Remove hack (WebGLRenderer refactoring) delete object.__webglInit; // TODO: Remove hack (WebGLRenderer refactoring)
object.geometry.dispose(); object.geometry.dispose();
object.geometry = editor.geometries[uuid]; object.geometry = geometry;
signals.objectChanged.dispatch( object ); signals.objectChanged.dispatch( object );
......
editor/js/Sidebar.Attributes.js 0 → 100644
浏览文件 @ a4bee66f
Sidebar.Attributes = function ( signals ) {
var scope = this;
var object;
var param = {};
var primaryParams = [
'name',
'parent',
'geometry',
'material',
'position',
'rotation',
'scale',
'width',
'height',
'depth',
'widthSegments',
'heightSegments',
'depthSegments',
'radialSegments',
'tubularSegments',
'radius',
'radiusTop',
'radiusBottom',
'phiStart',
'phiLength',
'thetaStart',
'thetaLength',
'tube',
'arc',
'detail',
'p',
'q',
'heightScale',
'openEnded',
'color',
'groundColor',
'ambient',
'emissive',
'specular',
'reflectivity',
'shininess',
'intensity',
'opacity',
'transparent',
'metal',
'wireframe',
'visible',
'userData'
];
var secondaryParams = [
'castShadow',
'receiveShadow',
'useQuaternion',
'fog',
'depthTest',
'depthWrite',
'dynamic'
];
var integerParams = [
'widthSegments',
'heightSegments',
'depthSegments',
'radialSegments',
'tubularSegments'
];
var container = new UI.Panel();
var group1 = new UI.Panel().setBorderTop( '1px solid #ccc' ).setPadding( '10px' );
var group2 = new UI.Panel().setBorderTop( '1px solid #ccc' ).setPadding( '10px' ).setOpacity( 0.5 );
var group3 = new UI.Panel().setBorderTop( '1px solid #ccc' ).setPadding( '10px' ).setOpacity( 0.25 );//.setDisplay( 'none' );
container.add( group1, group2, group3 );
signals.objectChanged.add( function ( changed ) {
if ( object === changed ) updateUI();
} );
signals.selected.add( function ( selected ) {
var selected = editor.listSelected();
object = ( selected.length ) ? selected[0] : null;
createUI();
updateUI();
} );
function createUI() {
param = {};
while ( group1.dom.hasChildNodes() ) group1.dom.removeChild( group1.dom.lastChild );
while ( group2.dom.hasChildNodes() ) group2.dom.removeChild( group2.dom.lastChild );
while ( group3.dom.hasChildNodes() ) group3.dom.removeChild( group3.dom.lastChild );
if ( object ) {
for ( var i in primaryParams ) addElement( primaryParams[i], group1 );
for ( var i in secondaryParams ) addElement( secondaryParams[i], group2 );
for ( var key in object ) addElement( key, group3 );
}
}
function addElement( key, parent ) {
if ( object[ key ] !== undefined && param[ key ] === undefined ) {
if ( typeof object[ key ] === 'string' ) {
param[ key ] = new UI.ParamString( key ).onChange( updateParam );
parent.add( param[ key ] );
} else if ( typeof object[ key ] === 'boolean' ) {
param[ key ] = new UI.ParamBool( key ).onChange( updateParam );
parent.add( param[ key ] );
} else if ( typeof object[ key ] === 'number' ) {
if ( integerParams.indexOf( key ) != -1 )
param[ key ] = new UI.ParamInteger( key ).onChange( updateParam );
else
param[ key ] = new UI.ParamFloat( key ).onChange( updateParam );
parent.add( param[ key ] );
} else if ( object[ key ] instanceof THREE.Vector3 ) {
var hasLock = ( key === 'scale' ) ? true : false;
param[ key ] = new UI.ParamVector3( key, hasLock ).onChange( updateParam );
parent.add( param[ key ] );
} else if ( object[ key ] instanceof THREE.Color ) {
param[ key ] = new UI.ParamColor( key ).onChange( updateParam );
parent.add( param[ key ] );
} else if ( key === 'parent' ) {
param[ key ] = new UI.ParamSelect( key ).onChange( updateParam );
param[ key ].name.setColor( '#0080f0' ).onClick( function(){ editor.select( editor.objects[ param[ key ].getValue() ] ) } );
parent.add( param[ key ] );
} else if ( key === 'geometry' ) {
param[ key ] = new UI.ParamSelect( key ).onChange( updateParam );
param[ key ].name.setColor( '#0080f0' ).onClick( function(){ editor.select( editor.geometries[ param[ key ].getValue() ] ) } );
parent.add( param[ key ] );
} else if ( key == 'material' ) {
param[ key ] = new UI.ParamSelect( key ).onChange( updateParam );
param[ key ].name.setColor( '#0080f0' ).onClick( function(){ editor.select( editor.materials[ param[ key ].getValue() ] ) } );
parent.add( param[ key ] );
} else if ( key == 'userData' ) {
param[ key ] = new UI.ParamJson( key ).onChange( updateParam );
parent.add( param[ key ] );
}
}
}
function updateUI() {
if ( object ) {
for ( var key in object ) {
if ( typeof object[ key ] === 'string' ) param[ key ].setValue( object[ key ] );
else if ( typeof object[ key ] === 'boolean' ) param[ key ].setValue( object[ key ] );
else if ( typeof object[ key ] === 'number' ) param[ key ].setValue( object[ key ] );
else if ( object[ key ] instanceof THREE.Vector3 ) param[ key ].setValue( object[ key ] );
else if ( object[ key ] instanceof THREE.Color ) param[ key ].setValue( object[ key ] );
else if ( object[ key ] && key === 'parent' ) {
var options = {};
for ( var uuid in editor.objects ) if ( object.uuid != uuid ) options[ uuid ] = editor.objects[ uuid ].name;
param[ key ].setOptions( options );
if ( object.parent !== undefined ) param[ key ].setValue( object.parent.uuid );
} else if ( object[ key ] && key === 'geometry' ) {
var options = {};
for ( var uuid in editor.geometries ) if ( object.uuid != uuid ) options[ uuid ] = editor.geometries[ uuid ].name;
param[ key ].setOptions( options );
if ( object.geometry !== undefined ) param[ key ].setValue( object.geometry.uuid );
} else if ( object[ key ] && key === 'material' ) {
var options = {};
for ( var uuid in editor.materials ) if ( object.uuid != uuid ) options[ uuid ] = editor.materials[ uuid ].name;
param[ key ].setOptions( options );
if ( object.material !== undefined ) param[ key ].setValue( object.material.uuid );
} else if ( key == 'userData' ) {
try {
param[ key ].setValue( JSON.stringify( object.userData, null, ' ' ) );
} catch ( error ) {
console.log( error );
}
}
}
}
}
function updateParam( event ) {
var key = event.srcElement.name;
if ( typeof object[ key ] === 'string' ) object[ key ] = param[ key ].getValue();
else if ( typeof object[ key ] === 'boolean' ) object[ key ] = param[ key ].getValue();
else if ( typeof object[ key ] === 'number' ) object[ key ] = param[ key ].getValue();
else if ( object[ key ] instanceof THREE.Color ) object[ key ].setHex( param[ key ].getValue() );
else if ( object[ key ] instanceof THREE.Vector3 ) object[ key ].copy( param[ key ].getValue() );
else if ( key === 'parent' ) {
if ( param[ key ].getValue() != object.uuid )
editor.parent( object, editor.objects[ param[ key ].getValue() ] );
} else if ( key === 'geometry' ) {
if ( param[ key ].getValue() != object.geometry.uuid )
object.geometry = editor.geometries[ param[ key ].getValue() ];
} else if ( key === 'material' ) {
if ( param[ key ].getValue() != object.material.uuid )
object.material = editor.materials[ param[ key ].getValue() ];
} else if ( key === 'userData' ) {
try {
object.userData = JSON.parse( param[ key ].getValue() );
} catch ( error ) {
console.log( error );
}
}
if ( object instanceof THREE.Object3D ) {
signals.objectChanged.dispatch( object );
} else if ( object instanceof THREE.Geometry ) {
var geoParams = {};
for ( var i in param ) geoParams[ i ] = param[ i ].getValue();
editor.updateGeometry( object, geoParams );
} else if ( object instanceof THREE.Material ) {
signals.materialChanged.dispatch( object );
}
signals.sceneChanged.dispatch( editor.scene );
}
return container;
}
editor/js/Sidebar.Geometry.CubeGeometry.js 已删除 100644 → 0
浏览文件 @ b61034a6
Sidebar.Geometry.CubeGeometry = function ( signals, geometry ) {
var container = new UI.Panel();
container.setBorderTop( '1px solid #ccc' );
container.setPaddingTop( '10px' );
// width
var widthRow = new UI.Panel();
var width = new UI.Number( geometry.width ).onChange( update );
widthRow.add( new UI.Text( 'Width' ).setWidth( '90px' ).setColor( '#666' ) );
widthRow.add( width );
container.add( widthRow );
// height
var heightRow = new UI.Panel();
var height = new UI.Number( geometry.height ).onChange( update );
heightRow.add( new UI.Text( 'Height' ).setWidth( '90px' ).setColor( '#666' ) );
heightRow.add( height );
container.add( heightRow );
// depth
var depthRow = new UI.Panel();
var depth = new UI.Number( geometry.depth ).onChange( update );
depthRow.add( new UI.Text( 'Depth' ).setWidth( '90px' ).setColor( '#666' ) );
depthRow.add( depth );
container.add( depthRow );
// widthSegments
var widthSegmentsRow = new UI.Panel();
var widthSegments = new UI.Integer( geometry.widthSegments ).setRange( 1, Infinity ).onChange( update );
widthSegmentsRow.add( new UI.Text( 'Width segments' ).setWidth( '90px' ).setColor( '#666' ) );
widthSegmentsRow.add( widthSegments );
container.add( widthSegmentsRow );
// heightSegments
var heightSegmentsRow = new UI.Panel();
var heightSegments = new UI.Integer( geometry.heightSegments ).setRange( 1, Infinity ).onChange( update );
heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ).setColor( '#666' ) );
heightSegmentsRow.add( heightSegments );
container.add( heightSegmentsRow );
// depthSegments
var depthSegmentsRow = new UI.Panel();
var depthSegments = new UI.Integer( geometry.depthSegments ).setRange( 1, Infinity ).onChange( update );
depthSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ).setColor( '#666' ) );
depthSegmentsRow.add( depthSegments );
container.add( depthSegmentsRow );
//
function update() {
editor.remakeGeometry( geometry,
{
width: width.getValue(),
height: height.getValue(),
depth: depth.getValue(),
widthSegments: widthSegments.getValue(),
heightSegments: heightSegments.getValue(),
depthSegments: depthSegments.getValue()
}
);
}
return container;
}
editor/js/Sidebar.Geometry.CylinderGeometry.js 已删除 100644 → 0
浏览文件 @ b61034a6
Sidebar.Geometry.CylinderGeometry = function ( signals, geometry ) {
var container = new UI.Panel();
container.setBorderTop( '1px solid #ccc' );
container.setPaddingTop( '10px' );
// radiusTop
var radiusTopRow = new UI.Panel();
var radiusTop = new UI.Number( geometry.radiusTop ).onChange( update );
radiusTopRow.add( new UI.Text( 'Radius top' ).setWidth( '90px' ).setColor( '#666' ) );
radiusTopRow.add( radiusTop );
container.add( radiusTopRow );
// radiusBottom
var radiusBottomRow = new UI.Panel();
var radiusBottom = new UI.Number( geometry.radiusBottom ).onChange( update );
radiusBottomRow.add( new UI.Text( 'Radius bottom' ).setWidth( '90px' ).setColor( '#666' ) );
radiusBottomRow.add( radiusBottom );
container.add( radiusBottomRow );
// height
var heightRow = new UI.Panel();
var height = new UI.Number( geometry.height ).onChange( update );
heightRow.add( new UI.Text( 'Height' ).setWidth( '90px' ).setColor( '#666' ) );
heightRow.add( height );
container.add( heightRow );
// radialSegments
var radialSegmentsRow = new UI.Panel();
var radialSegments = new UI.Integer( geometry.radialSegments ).setRange( 1, Infinity ).onChange( update );
radialSegmentsRow.add( new UI.Text( 'Radius segments' ).setWidth( '90px' ).setColor( '#666' ) );
radialSegmentsRow.add( radialSegments );
container.add( radialSegmentsRow );
// heightSegments
var heightSegmentsRow = new UI.Panel();
var heightSegments = new UI.Integer( geometry.heightSegments ).setRange( 1, Infinity ).onChange( update );
heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ).setColor( '#666' ) );
heightSegmentsRow.add( heightSegments );
container.add( heightSegmentsRow );
// openEnded
var openEndedRow = new UI.Panel();
var openEnded = new UI.Checkbox( geometry.openEnded ).onChange( update );
openEndedRow.add( new UI.Text( 'Open ended' ).setWidth( '90px' ).setColor( '#666' ) );
openEndedRow.add( openEnded );
container.add( openEndedRow );
//
function update() {
editor.remakeGeometry( geometry,
{
radiusTop: radiusTop.getValue(),
radiusBottom: radiusBottom.getValue(),
height: height.getValue(),
radialSegments: radialSegments.getValue(),
heightSegments: heightSegments.getValue(),
openEnded: openEnded.getValue()
}
);
}
return container;
}
editor/js/Sidebar.Geometry.IcosahedronGeometry.js 已删除 100644 → 0
浏览文件 @ b61034a6
Sidebar.Geometry.IcosahedronGeometry = function ( signals, geometry ) {
var container = new UI.Panel();
container.setBorderTop( '1px solid #ccc' );
container.setPaddingTop( '10px' );
// radius
var radiusRow = new UI.Panel();
var radius = new UI.Number( geometry.radius ).onChange( update );
radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ).setColor( '#666' ) );
radiusRow.add( radius );
container.add( radiusRow );
// detail
var detailRow = new UI.Panel();
var detail = new UI.Integer( geometry.detail ).setRange( 0, Infinity ).onChange( update );
detailRow.add( new UI.Text( 'Detail' ).setWidth( '90px' ).setColor( '#666' ) );
detailRow.add( detail );
container.add( detailRow );
//
function update() {
editor.remakeGeometry( geometry,
{
radius: radius.getValue(),
detail: detail.getValue()
}
);
}
return container;
}
editor/js/Sidebar.Geometry.PlaneGeometry.js 已删除 100644 → 0
浏览文件 @ b61034a6
Sidebar.Geometry.PlaneGeometry = function ( signals, geometry ) {
var container = new UI.Panel();
container.setBorderTop( '1px solid #ccc' );
container.setPaddingTop( '10px' );
// width
var widthRow = new UI.Panel();
var width = new UI.Number( geometry.width ).onChange( update );
widthRow.add( new UI.Text( 'Width' ).setWidth( '90px' ).setColor( '#666' ) );
widthRow.add( width );
container.add( widthRow );
// height
var heightRow = new UI.Panel();
var height = new UI.Number( geometry.height ).onChange( update );
heightRow.add( new UI.Text( 'Height' ).setWidth( '90px' ).setColor( '#666' ) );
heightRow.add( height );
container.add( heightRow );
// widthSegments
var widthSegmentsRow = new UI.Panel();
var widthSegments = new UI.Integer( geometry.widthSegments ).setRange( 1, Infinity ).onChange( update );
widthSegmentsRow.add( new UI.Text( 'Width segments' ).setWidth( '90px' ).setColor( '#666' ) );
widthSegmentsRow.add( widthSegments );
container.add( widthSegmentsRow );
// heightSegments
var heightSegmentsRow = new UI.Panel();
var heightSegments = new UI.Integer( geometry.heightSegments ).setRange( 1, Infinity ).onChange( update );
heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ).setColor( '#666' ) );
heightSegmentsRow.add( heightSegments );
container.add( heightSegmentsRow );
//
function update() {
editor.remakeGeometry( geometry,
{
width: width.getValue(),
height: height.getValue(),
widthSegments: widthSegments.getValue(),
heightSegments: heightSegments.getValue()
}
);
}
return container;
}
editor/js/Sidebar.Geometry.SphereGeometry.js 已删除 100644 → 0
浏览文件 @ b61034a6
Sidebar.Geometry.SphereGeometry = function ( signals, geometry ) {
var container = new UI.Panel();
container.setBorderTop( '1px solid #ccc' );
container.setPaddingTop( '10px' );
// radius
var radiusRow = new UI.Panel();
var radius = new UI.Number( geometry.radius ).onChange( update );
radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ).setColor( '#666' ) );
radiusRow.add( radius );
container.add( radiusRow );
// widthSegments
var widthSegmentsRow = new UI.Panel();
var widthSegments = new UI.Integer( geometry.widthSegments ).setRange( 1, Infinity ).onChange( update );
widthSegmentsRow.add( new UI.Text( 'Width segments' ).setWidth( '90px' ).setColor( '#666' ) );
widthSegmentsRow.add( widthSegments );
container.add( widthSegmentsRow );
// heightSegments
var heightSegmentsRow = new UI.Panel();
var heightSegments = new UI.Integer( geometry.heightSegments ).setRange( 1, Infinity ).onChange( update );
heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ).setColor( '#666' ) );
heightSegmentsRow.add( heightSegments );
container.add( heightSegmentsRow );
// phiStart
var phiStartRow = new UI.Panel();
var phiStart = new UI.Number( geometry.phiStart ).onChange( update );
phiStartRow.add( new UI.Text( 'Phi start' ).setWidth( '90px' ).setColor( '#666' ) );
phiStartRow.add( phiStart );
container.add( phiStartRow );
// phiLength
var phiLengthRow = new UI.Panel();
var phiLength = new UI.Number( geometry.phiLength ).onChange( update );
phiLengthRow.add( new UI.Text( 'Phi length' ).setWidth( '90px' ).setColor( '#666' ) );
phiLengthRow.add( phiLength );
container.add( phiLengthRow );
// thetaStart
var thetaStartRow = new UI.Panel();
var thetaStart = new UI.Number( geometry.thetaStart ).onChange( update );
thetaStartRow.add( new UI.Text( 'Theta start' ).setWidth( '90px' ).setColor( '#666' ) );
thetaStartRow.add( thetaStart );
container.add( thetaStartRow );
// thetaLength
var thetaLengthRow = new UI.Panel();
var thetaLength = new UI.Number( geometry.thetaLength ).onChange( update );
thetaLengthRow.add( new UI.Text( 'Theta length' ).setWidth( '90px' ).setColor( '#666' ) );
thetaLengthRow.add( thetaLength );
container.add( thetaLengthRow );
//
function update() {
editor.remakeGeometry( geometry,
{
radius: radius.getValue(),
widthSegments: widthSegments.getValue(),
heightSegments: heightSegments.getValue(),
phiStart: phiStart.getValue(),
phiLength: phiLength.getValue(),
thetaStart: thetaStart.getValue(),
thetaLength: thetaLength.getValue()
}
);
}
return container;
}
editor/js/Sidebar.Geometry.TorusGeometry.js 已删除 100644 → 0
浏览文件 @ b61034a6
Sidebar.Geometry.TorusGeometry = function ( signals, geometry ) {
var container = new UI.Panel();
container.setBorderTop( '1px solid #ccc' );
container.setPaddingTop( '10px' );
// radius
var radiusRow = new UI.Panel();
var radius = new UI.Number( geometry.radius ).onChange( update );
radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ).setColor( '#666' ) );
radiusRow.add( radius );
container.add( radiusRow );
// tube
var tubeRow = new UI.Panel();
var tube = new UI.Number( geometry.tube ).onChange( update );
tubeRow.add( new UI.Text( 'Tube' ).setWidth( '90px' ).setColor( '#666' ) );
tubeRow.add( tube );
container.add( tubeRow );
// radialSegments
var radialSegmentsRow = new UI.Panel();
var radialSegments = new UI.Integer( geometry.radialSegments ).setRange( 1, Infinity ).onChange( update );
radialSegmentsRow.add( new UI.Text( 'Radial segments' ).setWidth( '90px' ).setColor( '#666' ) );
radialSegmentsRow.add( radialSegments );
container.add( radialSegmentsRow );
// tubularSegments
var tubularSegmentsRow = new UI.Panel();
var tubularSegments = new UI.Integer( geometry.tubularSegments ).setRange( 1, Infinity ).onChange( update );
tubularSegmentsRow.add( new UI.Text( 'Tubular segments' ).setWidth( '90px' ).setColor( '#666' ) );
tubularSegmentsRow.add( tubularSegments );
container.add( tubularSegmentsRow );
// arc
var arcRow = new UI.Panel();
var arc = new UI.Number( geometry.arc ).onChange( update );
arcRow.add( new UI.Text( 'Arc' ).setWidth( '90px' ).setColor( '#666' ) );
arcRow.add( arc );
container.add( arcRow );
//
function update() {
editor.remakeGeometry( geometry,
{
radius: radius.getValue(),
tube: tube.getValue(),
radialSegments: radialSegments.getValue(),
tubularSegments: tubularSegments.getValue(),
arc: arc.getValue()
}
);
}
return container;
}
editor/js/Sidebar.Geometry.TorusKnotGeometry.js 已删除 100644 → 0
浏览文件 @ b61034a6
Sidebar.Geometry.TorusKnotGeometry = function ( signals, geometry ) {
var container = new UI.Panel();
container.setBorderTop( '1px solid #ccc' );
container.setPaddingTop( '10px' );
// radius
var radiusRow = new UI.Panel();
var radius = new UI.Number( geometry.radius ).onChange( update );
radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ).setColor( '#666' ) );
radiusRow.add( radius );
container.add( radiusRow );
// tube
var tubeRow = new UI.Panel();
var tube = new UI.Number( geometry.tube ).onChange( update );
tubeRow.add( new UI.Text( 'Tube' ).setWidth( '90px' ).setColor( '#666' ) );
tubeRow.add( tube );
container.add( tubeRow );
// radialSegments
var radialSegmentsRow = new UI.Panel();
var radialSegments = new UI.Integer( geometry.radialSegments ).setRange( 1, Infinity ).onChange( update );
radialSegmentsRow.add( new UI.Text( 'Radial segments' ).setWidth( '90px' ).setColor( '#666' ) );
radialSegmentsRow.add( radialSegments );
container.add( radialSegmentsRow );
// tubularSegments
var tubularSegmentsRow = new UI.Panel();
var tubularSegments = new UI.Integer( geometry.tubularSegments ).setRange( 1, Infinity ).onChange( update );
tubularSegmentsRow.add( new UI.Text( 'Tubular segments' ).setWidth( '90px' ).setColor( '#666' ) );
tubularSegmentsRow.add( tubularSegments );
container.add( tubularSegmentsRow );
// p
var pRow = new UI.Panel();
var p = new UI.Number( geometry.p ).onChange( update );
pRow.add( new UI.Text( 'P' ).setWidth( '90px' ).setColor( '#666' ) );
pRow.add( p );
container.add( pRow );
// q
var qRow = new UI.Panel();
var q = new UI.Number( geometry.q ).onChange( update );
pRow.add( new UI.Text( 'Q' ).setWidth( '90px' ).setColor( '#666' ) );
pRow.add( q );
container.add( qRow );
// heightScale
var heightScaleRow = new UI.Panel();
var heightScale = new UI.Number( geometry.heightScale ).onChange( update );
pRow.add( new UI.Text( 'Height scale' ).setWidth( '90px' ).setColor( '#666' ) );
pRow.add( heightScale );
container.add( heightScaleRow );
//
function update() {
editor.remakeGeometry( geometry,
{
radius: radius.getValue(),
tube: tube.getValue(),
radialSegments: radialSegments.getValue(),
tubularSegments: tubularSegments.getValue(),
p: p.getValue(),
q: q.getValue(),
heightScale: heightScale.getValue()
}
);
}
return container;
}
editor/js/Sidebar.Geometry.js 已删除 100644 → 0
浏览文件 @ b61034a6
Sidebar.Geometry = function ( signals ) {
var geometryClasses = {
"CircleGeometry": THREE.CircleGeometry,
"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,
"ShapeGeometry": THREE.ShapeGeometry,
"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.setBorderTop( '1px solid #ccc' );
container.setDisplay( 'none' );
container.setPadding( '10px' );
var objectType = new UI.Text().setColor( '#666' ).setTextTransform( 'uppercase' );
container.add( objectType );
container.add( new UI.Break(), new UI.Break() );
// name
var geometryNameRow = new UI.Panel();
var geometryName = new UI.Input().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
geometryNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ).setColor( '#666' ) );
geometryNameRow.add( geometryName );
container.add( geometryNameRow );
// vertices
var geometryVerticesRow = new UI.Panel();
var geometryVertices = new UI.Text().setColor( '#444' ).setFontSize( '12px' );
geometryVerticesRow.add( new UI.Text( 'Vertices' ).setWidth( '90px' ).setColor( '#666' ) );
geometryVerticesRow.add( geometryVertices );
container.add( geometryVerticesRow );
// faces
var geometryFacesRow = new UI.Panel();
var geometryFaces = new UI.Text().setColor( '#444' ).setFontSize( '12px' );
geometryFacesRow.add( new UI.Text( 'Faces' ).setWidth( '90px' ).setColor( '#666' ) );
geometryFacesRow.add( geometryFaces );
container.add( geometryFacesRow );
// parameters
var parameters;
//
var geometry = null;
function update() {
if ( geometry ) {
geometry.name = geometryName.getValue();
}
}
signals.selected.add( function ( selected ) {
var selected = editor.listSelected( 'geometry' );
geometry = ( selected.length ) ? selected[0] : null;
if ( geometry ) {
container.setDisplay( 'block' );
objectType.setValue( getGeometryInstanceName( geometry ) );
updateFields( geometry );
//
if ( parameters !== undefined ) {
container.remove( parameters );
parameters = undefined;
}
if ( geometry instanceof THREE.PlaneGeometry ) {
parameters = new Sidebar.Geometry.PlaneGeometry( signals, geometry );
container.add( parameters );
} else if ( geometry instanceof THREE.CubeGeometry ) {
parameters = new Sidebar.Geometry.CubeGeometry( signals, geometry );
container.add( parameters );
} else if ( geometry instanceof THREE.CylinderGeometry ) {
parameters = new Sidebar.Geometry.CylinderGeometry( signals, geometry );
container.add( parameters );
} else if ( geometry instanceof THREE.SphereGeometry ) {
parameters = new Sidebar.Geometry.SphereGeometry( signals, geometry );
container.add( parameters );
} else if ( geometry instanceof THREE.IcosahedronGeometry ) {
parameters = new Sidebar.Geometry.IcosahedronGeometry( signals, geometry );
container.add( parameters );
} else if ( geometry instanceof THREE.TorusGeometry ) {
parameters = new Sidebar.Geometry.TorusGeometry( signals, geometry );
container.add( parameters );
} else if ( geometry instanceof THREE.TorusKnotGeometry ) {
parameters = new Sidebar.Geometry.TorusKnotGeometry( signals, geometry );
container.add( parameters );
}
update();
} else {
geometry = null;
container.setDisplay( 'none' );
}
} );
signals.objectChanged.add( function ( object ) {
if ( object && object.geometry ) {
updateFields( object.geometry );
}
} );
//
function updateFields( geometry ) {
geometryName.setValue( geometry.name );
geometryVertices.setValue( geometry.vertices.length );
geometryFaces.setValue( geometry.faces.length );
}
function getGeometryInstanceName( geometry ) {
for ( var key in geometryClasses ) {
if ( geometry instanceof geometryClasses[ key ] ) return key;
}
}
return container;
}
editor/js/Sidebar.Material.js 已删除 100644 → 0
浏览文件 @ b61034a6
Sidebar.Material = function ( signals ) {
var materialClasses = {
'LineBasicMaterial': THREE.LineBasicMaterial,
'LineDashedMaterial': THREE.LineDashedMaterial,
'MeshBasicMaterial': THREE.MeshBasicMaterial,
'MeshDepthMaterial': THREE.MeshDepthMaterial,
'MeshFaceMaterial': THREE.MeshFaceMaterial,
'MeshLambertMaterial': THREE.MeshLambertMaterial,
'MeshNormalMaterial': THREE.MeshNormalMaterial,
'MeshPhongMaterial': THREE.MeshPhongMaterial,
'ParticleBasicMaterial': THREE.ParticleBasicMaterial,
'ParticleCanvasMaterial': THREE.ParticleCanvasMaterial,
'ShaderMaterial': THREE.ShaderMaterial,
'Material': THREE.Material
};
var container = new UI.Panel();
container.setBorderTop( '1px solid #ccc' );
container.setDisplay( 'none' );
container.setPadding( '10px' );
container.add( new UI.Text().setValue( 'MATERIAL' ).setColor( '#666' ) );
container.add( new UI.Break(), new UI.Break() );
// name
var materialNameRow = new UI.Panel();
var materialName = new UI.Input().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
materialNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ).setColor( '#666' ) );
materialNameRow.add( materialName );
container.add( materialNameRow );
// class
var materialClassRow = new UI.Panel();
var materialClass = new UI.Select().setOptions( {
'LineBasicMaterial': 'LineBasicMaterial',
'LineDashedMaterial': 'LineDashedMaterial',
'MeshBasicMaterial': 'MeshBasicMaterial',
'MeshDepthMaterial': 'MeshDepthMaterial',
'MeshFaceMaterial': 'MeshFaceMaterial',
'MeshLambertMaterial': 'MeshLambertMaterial',
'MeshNormalMaterial': 'MeshNormalMaterial',
'MeshPhongMaterial': 'MeshPhongMaterial'
} ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
materialClassRow.add( new UI.Text( 'Class' ).setWidth( '90px' ).setColor( '#666' ) );
materialClassRow.add( materialClass );
container.add( materialClassRow );
// color
var materialColorRow = new UI.Panel();
var materialColor = new UI.Color().onChange( update );
materialColorRow.add( new UI.Text( 'Color' ).setWidth( '90px' ).setColor( '#666' ) );
materialColorRow.add( materialColor );
container.add( materialColorRow );
// ambient
var materialAmbientRow = new UI.Panel();
var materialAmbient = new UI.Color().onChange( update );
materialAmbientRow.add( new UI.Text( 'Ambient' ).setWidth( '90px' ).setColor( '#666' ) );
materialAmbientRow.add( materialAmbient );
container.add( materialAmbientRow );
// emissive
var materialEmissiveRow = new UI.Panel();
var materialEmissive = new UI.Color().onChange( update );
materialEmissiveRow.add( new UI.Text( 'Emissive' ).setWidth( '90px' ).setColor( '#666' ) );
materialEmissiveRow.add( materialEmissive );
container.add( materialEmissiveRow );
// specular
var materialSpecularRow = new UI.Panel();
var materialSpecular = new UI.Color().onChange( update );
materialSpecularRow.add( new UI.Text( 'Specular' ).setWidth( '90px' ).setColor( '#666' ) );
materialSpecularRow.add( materialSpecular );
container.add( materialSpecularRow );
// shininess
var materialShininessRow = new UI.Panel();
var materialShininess = new UI.Number( 30 ).onChange( update );
materialShininessRow.add( new UI.Text( 'Shininess' ).setWidth( '90px' ).setColor( '#666' ) );
materialShininessRow.add( materialShininess );
container.add( materialShininessRow );
// map
var materialMapRow = new UI.Panel();
var materialMapEnabled = new UI.Checkbox( false ).onChange( update );
var materialMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
materialMapRow.add( new UI.Text( 'Map' ).setWidth( '90px' ).setColor( '#666' ) );
materialMapRow.add( materialMapEnabled );
materialMapRow.add( materialMap );
container.add( materialMapRow );
// light map
var materialLightMapRow = new UI.Panel();
var materialLightMapEnabled = new UI.Checkbox( false ).onChange( update );
var materialLightMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
materialLightMapRow.add( new UI.Text( 'Light Map' ).setWidth( '90px' ).setColor( '#666' ) );
materialLightMapRow.add( materialLightMapEnabled );
materialLightMapRow.add( materialLightMap );
container.add( materialLightMapRow );
// bump map
var materialBumpMapRow = new UI.Panel();
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( 'Bump Map' ).setWidth( '90px' ).setColor( '#666' ) );
materialBumpMapRow.add( materialBumpMapEnabled );
materialBumpMapRow.add( materialBumpScale );
materialBumpMapRow.add( materialBumpMap );
container.add( materialBumpMapRow );
// normal map
var materialNormalMapRow = new UI.Panel();
var materialNormalMapEnabled = new UI.Checkbox( false ).onChange( update );
var materialNormalMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
materialNormalMapRow.add( new UI.Text( 'Normal Map' ).setWidth( '90px' ).setColor( '#666' ) );
materialNormalMapRow.add( materialNormalMapEnabled );
materialNormalMapRow.add( materialNormalMap );
container.add( materialNormalMapRow );
// specular map
var materialSpecularMapRow = new UI.Panel();
var materialSpecularMapEnabled = new UI.Checkbox( false ).onChange( update );
var materialSpecularMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
materialSpecularMapRow.add( new UI.Text( 'Specular Map' ).setWidth( '90px' ).setColor( '#666' ) );
materialSpecularMapRow.add( materialSpecularMapEnabled );
materialSpecularMapRow.add( materialSpecularMap );
container.add( materialSpecularMapRow );
// env map
var materialEnvMapRow = new UI.Panel();
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( 'Env Map' ).setWidth( '90px' ).setColor( '#666' ) );
materialEnvMapRow.add( materialEnvMapEnabled );
materialEnvMapRow.add( materialReflectivity );
materialEnvMapRow.add( materialEnvMap );
container.add( materialEnvMapRow );
// opacity
var materialOpacityRow = new UI.Panel();
var materialOpacity = new UI.Number().setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
materialOpacityRow.add( new UI.Text( 'Opacity' ).setWidth( '90px' ).setColor( '#666' ) );
materialOpacityRow.add( materialOpacity );
container.add( materialOpacityRow );
// transparent
var materialTransparentRow = new UI.Panel();
var materialTransparent = new UI.Checkbox().setLeft( '100px' ).onChange( update );
materialTransparentRow.add( new UI.Text( 'Transparent' ).setWidth( '90px' ).setColor( '#666' ) );
materialTransparentRow.add( materialTransparent );
container.add( materialTransparentRow );
// wireframe
var materialWireframeRow = new UI.Panel();
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( 'Wireframe' ).setWidth( '90px' ).setColor( '#666' ) );
materialWireframeRow.add( materialWireframe );
materialWireframeRow.add( materialWireframeLinewidth );
container.add( materialWireframeRow );
//
var material = null;
var selectedHasUvs = false;
function update() {
var textureWarning = false;
// var selected = editor.list( 'selected' )[0];
// material = ( editor.materials[ selected.uuid ] ) ? selected : null;
if ( material ) {
material.name = materialName.getValue();
if ( material instanceof materialClasses[ materialClass.getValue() ] == false ) {
material = new materialClasses[ materialClass.getValue() ]();
}
if ( material.color !== undefined ) {
material.color.setHex( materialColor.getHexValue() );
}
if ( material.ambient !== undefined ) {
material.ambient.setHex( materialAmbient.getHexValue() );
}
if ( material.emissive !== undefined ) {
material.emissive.setHex( materialEmissive.getHexValue() );
}
if ( material.specular !== undefined ) {
material.specular.setHex( materialSpecular.getHexValue() );
}
if ( material.shininess !== undefined ) {
material.shininess = materialShininess.getValue();
}
if ( material.map !== undefined ) {
var mapEnabled = materialMapEnabled.getValue() === true;
if ( selectedHasUvs ) {
material.map = mapEnabled ? materialMap.getValue() : null;
material.needsUpdate = true;
// TODO: update all buffers with this material
selected.geometry.buffersNeedUpdate = true;
selected.geometry.uvsNeedUpdate = true;
} else {
if ( mapEnabled ) textureWarning = true;
}
}
/*
if ( material.lightMap !== undefined ) {
var lightMapEnabled = materialLightMapEnabled.getValue() === true;
if ( selectedHasUvs ) {
material.lightMap = lightMapEnabled ? materialLightMap.getValue() : null;
material.needsUpdate = true;
selected.geometry.buffersNeedUpdate = true;
selected.geometry.uvsNeedUpdate = true;
} else {
if ( lightMapEnabled ) textureWarning = true;
}
}
*/
if ( material.bumpMap !== undefined ) {
var bumpMapEnabled = materialBumpMapEnabled.getValue() === true;
if ( selectedHasUvs ) {
material.bumpMap = bumpMapEnabled ? materialBumpMap.getValue() : null;
material.bumpScale = materialBumpScale.getValue();
material.needsUpdate = true;
selected.geometry.buffersNeedUpdate = true;
selected.geometry.uvsNeedUpdate = true;
} else {
if ( bumpMapEnabled ) textureWarning = true;
}
}
if ( material.normalMap !== undefined ) {
var normalMapEnabled = materialNormalMapEnabled.getValue() === true;
if ( selectedHasUvs ) {
material.normalMap = normalMapEnabled ? materialNormalMap.getValue() : null;
material.needsUpdate = true;
selected.geometry.buffersNeedUpdate = true;
selected.geometry.uvsNeedUpdate = true;
} else {
if ( normalMapEnabled ) textureWarning = true;
}
}
if ( material.specularMap !== undefined ) {
var specularMapEnabled = materialSpecularMapEnabled.getValue() === true;
if ( selectedHasUvs ) {
material.specularMap = specularMapEnabled ? materialSpecularMap.getValue() : null;
material.needsUpdate = true;
selected.geometry.buffersNeedUpdate = true;
selected.geometry.uvsNeedUpdate = true;
} else {
if ( specularMapEnabled ) textureWarning = true;
}
}
if ( material.envMap !== undefined ) {
var envMapEnabled = materialEnvMapEnabled.getValue() === true;
if ( selectedHasUvs ) {
material.envMap = envMapEnabled ? materialEnvMap.getValue() : null;
material.reflectivity = materialReflectivity.getValue();
material.needsUpdate = true;
selected.geometry.buffersNeedUpdate = true;
selected.geometry.uvsNeedUpdate = true;
} else {
if ( envMapEnabled ) textureWarning = true;
}
}
if ( material.opacity !== undefined ) {
material.opacity = materialOpacity.getValue();
}
if ( material.transparent !== undefined ) {
material.transparent = materialTransparent.getValue();
}
if ( material.wireframe !== undefined ) {
material.wireframe = materialWireframe.getValue();
}
if ( material.wireframeLinewidth !== undefined ) {
material.wireframeLinewidth = materialWireframeLinewidth.getValue();
}
updateRows();
signals.materialChanged.dispatch( material );
}
if ( textureWarning ) {
console.warn( "Can't set texture, model doesn't have texture coordinates" );
}
};
function updateRows() {
var properties = {
'color': materialColorRow,
'ambient': materialAmbientRow,
'emissive': materialEmissiveRow,
'specular': materialSpecularRow,
'shininess': materialShininessRow,
'map': materialMapRow,
'lightMap': materialLightMapRow,
'bumpMap': materialBumpMapRow,
'normalMap': materialNormalMapRow,
'specularMap': materialSpecularMapRow,
'envMap': materialEnvMapRow,
'opacity': materialOpacityRow,
'transparent': materialTransparentRow,
'wireframe': materialWireframeRow
};
for ( var property in properties ) {
properties[ property ].setDisplay( material[ property ] !== undefined ? '' : 'none' );
}
};
function getMaterialInstanceName( material ) {
for ( var key in materialClasses ) {
if ( material instanceof materialClasses[ key ] ) return key;
}
}
// events
signals.selected.add( function ( selected ) {
var selected = editor.listSelected( 'material' );
material = ( selected.length ) ? selected[0] : null;
if ( material ) {
// selected = object;
// selectedHasUvs = object.geometry.faceVertexUvs[ 0 ].length > 0;
container.setDisplay( '' );
// var material = object.material;
materialName.setValue( material.name );
materialClass.setValue( getMaterialInstanceName( material ) );
if ( material.color !== undefined ) {
materialColor.setValue( '#' + material.color.getHexString() );
}
if ( material.ambient !== undefined ) {
materialAmbient.setValue( '#' + material.ambient.getHexString() );
}
if ( material.emissive !== undefined ) {
materialEmissive.setValue( '#' + material.emissive.getHexString() );
}
if ( material.specular !== undefined ) {
materialSpecular.setValue( '#' + material.specular.getHexString() );
}
if ( material.shininess !== undefined ) {
materialShininess.setValue( material.shininess );
}
if ( material.map !== undefined ) {
// if ( selectedHasUvs ) {
if ( material.map !== null ) {
materialMapEnabled.setValue( true );
materialMap.setValue( material.map );
} else {
materialMapEnabled.setValue( false );
}
// } else {
// console.warn( "Can't set texture, model doesn't have texture coordinates" );
// }
}
/*
if ( material.lightMap !== undefined ) {
if ( material.lightMap !== null ) {
materialLightMapEnabled.setValue( true );
materialLightMap.setValue( material.lightMap );
} else {
materialLightMapEnabled.setValue( false );
}
}
*/
if ( material.bumpMap !== undefined ) {
if ( material.bumpMap !== null ) {
materialBumpMapEnabled.setValue( true );
materialBumpMap.setValue( material.bumpMap );
materialBumpScale.setValue( material.bumpScale );
} else {
materialBumpMapEnabled.setValue( false );
materialBumpScale.setValue( 1 );
}
}
if ( material.normalMap !== undefined ) {
if ( material.normalMap !== null ) {
materialNormalMapEnabled.setValue( true );
materialNormalMap.setValue( material.normalMap );
} else {
materialNormalMapEnabled.setValue( false );
}
}
if ( material.specularMap !== undefined ) {
if ( material.specularMap !== null ) {
materialSpecularMapEnabled.setValue( true );
materialSpecularMap.setValue( material.specularMap );
} else {
materialSpecularMapEnabled.setValue( false );
}
}
if ( material.envMap !== undefined ) {
if ( material.envMap !== null ) {
materialEnvMapEnabled.setValue( true );
materialEnvMap.setValue( material.envMap );
materialReflectivity.setValue( material.reflectivity );
} else {
materialEnvMapEnabled.setValue( false );
}
}
if ( material.opacity !== undefined ) {
materialOpacity.setValue( material.opacity );
}
if ( material.transparent !== undefined ) {
materialTransparent.setValue( material.transparent );
}
if ( material.wireframe !== undefined ) {
materialWireframe.setValue( material.wireframe );
}
if ( material.wireframeLinewidth !== undefined ) {
materialWireframeLinewidth.setValue( material.wireframeLinewidth );
}
updateRows();
update();
} else {
// selected = null;
// selectedHasUvs = false;
container.setDisplay( 'none' );
}
} );
return container;
}
editor/js/Sidebar.Object3D.js 已删除 100644 → 0
浏览文件 @ b61034a6
Sidebar.Object3D = function ( signals ) {
var container = new UI.Panel();
container.setBorderTop( '1px solid #ccc' );
container.setPadding( '10px' );
container.setDisplay( 'none' );
var objectType = new UI.Text().setColor( '#666' ).setTextTransform( 'uppercase' );
container.add( objectType );
container.add( new UI.Break(), new UI.Break() );
// name
var objectNameRow = new UI.Panel();
var objectName = new UI.Input().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
objectNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ).setColor( '#666' ) );
objectNameRow.add( objectName );
container.add( objectNameRow );
// parent
var objectParentRow = new UI.Panel();
var objectParent = new UI.Select().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
var parentLabel = new UI.Text( 'Parent' ).setWidth( '90px' ).setColor( '#0080f0' );
parentLabel.onClick( function(){ editor.select( editor.objects[ objectParent.getValue() ] ) } );
objectParentRow.add( parentLabel );
objectParentRow.add( objectParent );
container.add( objectParentRow );
// geometry
var objectGeometryRow = new UI.Panel();
var objectGeometry = new UI.Select().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
var geometryLabel = new UI.Text( 'Geometry' ).setWidth( '90px' ).setColor( '#0080f0' );
geometryLabel.onClick( function(){ editor.select( editor.geometries[ objectGeometry.getValue() ] ) } );
objectGeometryRow.add( geometryLabel );
objectGeometryRow.add( objectGeometry );
container.add( objectGeometryRow );
// material
var objectMaterialRow = new UI.Panel();
var objectMaterial = new UI.Select().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
var materialLabel = new UI.Text( 'Material' ).setWidth( '90px' ).setColor( '#0080f0' );
materialLabel.onClick( function(){ editor.select( editor.materials[ objectMaterial.getValue() ] ) } );
objectMaterialRow.add( materialLabel );
objectMaterialRow.add( objectMaterial );
container.add( objectMaterialRow );
// position
var objectPositionRow = new UI.Panel();
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( 'Position' ).setWidth( '90px' ).setColor( '#666' ) );
objectPositionRow.add( objectPositionX, objectPositionY, objectPositionZ );
container.add( objectPositionRow );
// rotation
var objectRotationRow = new UI.Panel();
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( 'Rotation' ).setWidth( '90px' ).setColor( '#666' ) );
objectRotationRow.add( objectRotationX, objectRotationY, objectRotationZ );
container.add( objectRotationRow );
// scale
var objectScaleRow = new UI.Panel();
var objectScaleLock = new UI.Checkbox().setPosition( 'absolute' ).setLeft( '75px' );
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( 'Scale' ).setWidth( '90px' ).setColor( '#666' ) );
objectScaleRow.add( objectScaleLock );
objectScaleRow.add( objectScaleX, objectScaleY, objectScaleZ );
container.add( objectScaleRow );
// fov
var objectFovRow = new UI.Panel();
var objectFov = new UI.Number().onChange( update );
objectFovRow.add( new UI.Text( 'Fov' ).setWidth( '90px' ).setColor( '#666' ) );
objectFovRow.add( objectFov );
container.add( objectFovRow );
// near
var objectNearRow = new UI.Panel();
var objectNear = new UI.Number().onChange( update );
objectNearRow.add( new UI.Text( 'Near' ).setWidth( '90px' ).setColor( '#666' ) );
objectNearRow.add( objectNear );
container.add( objectNearRow );
// far
var objectFarRow = new UI.Panel();
var objectFar = new UI.Number().onChange( update );
objectFarRow.add( new UI.Text( 'Far' ).setWidth( '90px' ).setColor( '#666' ) );
objectFarRow.add( objectFar );
container.add( objectFarRow );
// intensity
var objectIntensityRow = new UI.Panel();
var objectIntensity = new UI.Number().setRange( 0, Infinity ).onChange( update );
objectIntensityRow.add( new UI.Text( 'Intensity' ).setWidth( '90px' ).setColor( '#666' ) );
objectIntensityRow.add( objectIntensity );
container.add( objectIntensityRow );
// color
var objectColorRow = new UI.Panel();
var objectColor = new UI.Color().onChange( update );
objectColorRow.add( new UI.Text( 'Color' ).setWidth( '90px' ).setColor( '#666' ) );
objectColorRow.add( objectColor );
container.add( objectColorRow );
// ground color
var objectGroundColorRow = new UI.Panel();
var objectGroundColor = new UI.Color().onChange( update );
objectGroundColorRow.add( new UI.Text( 'Ground color' ).setWidth( '90px' ).setColor( '#666' ) );
objectGroundColorRow.add( objectGroundColor );
container.add( objectGroundColorRow );
// distance
var objectDistanceRow = new UI.Panel();
var objectDistance = new UI.Number().setRange( 0, Infinity ).onChange( update );
objectDistanceRow.add( new UI.Text( 'Distance' ).setWidth( '90px' ).setColor( '#666' ) );
objectDistanceRow.add( objectDistance );
container.add( objectDistanceRow );
// angle
var objectAngleRow = new UI.Panel();
var objectAngle = new UI.Number().setPrecision( 3 ).setRange( 0, Math.PI / 2 ).onChange( update );
objectAngleRow.add( new UI.Text( 'Angle' ).setWidth( '90px' ).setColor( '#666' ) );
objectAngleRow.add( objectAngle );
container.add( objectAngleRow );
// exponent
var objectExponentRow = new UI.Panel();
var objectExponent = new UI.Number().setRange( 0, Infinity ).onChange( update );
objectExponentRow.add( new UI.Text( 'Exponent' ).setWidth( '90px' ).setColor( '#666' ) );
objectExponentRow.add( objectExponent );
container.add( objectExponentRow );
// visible
var objectVisibleRow = new UI.Panel();
var objectVisible = new UI.Checkbox().onChange( update );
objectVisibleRow.add( new UI.Text( 'Visible' ).setWidth( '90px' ).setColor( '#666' ) );
objectVisibleRow.add( objectVisible );
container.add( objectVisibleRow );
// user data
var objectUserDataRow = new UI.Panel();
var objectUserData = new UI.TextArea().setWidth( '150px' ).setHeight( '40px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
objectUserData.onKeyUp( function () {
try {
JSON.parse( objectUserData.getValue() );
objectUserData.setBorderColor( '#ccc' );
objectUserData.setBackgroundColor( '' );
} catch ( error ) {
objectUserData.setBorderColor( '#f00' );
objectUserData.setBackgroundColor( 'rgba(255,0,0,0.25)' );
}
} );
objectUserDataRow.add( new UI.Text( 'User data' ).setWidth( '90px' ).setColor( '#666' ) );
objectUserDataRow.add( objectUserData );
container.add( objectUserDataRow );
//
var object = null;
var scene = editor.scene;
//
function updateScaleX() {
if ( objectScaleLock.getValue() === true ) {
var scale = objectScaleX.getValue() / object.scale.x;
objectScaleY.setValue( objectScaleY.getValue() * scale );
objectScaleZ.setValue( objectScaleZ.getValue() * scale );
}
update();
}
function updateScaleY() {
if ( objectScaleLock.getValue() === true ) {
var scale = objectScaleY.getValue() / object.scale.y;
objectScaleX.setValue( objectScaleX.getValue() * scale );
objectScaleZ.setValue( objectScaleZ.getValue() * scale );
}
update();
}
function updateScaleZ() {
if ( objectScaleLock.getValue() === true ) {
var scale = objectScaleZ.getValue() / object.scale.z;
objectScaleX.setValue( objectScaleX.getValue() * scale );
objectScaleY.setValue( objectScaleY.getValue() * scale );
}
update();
}
function update() {
if ( object ) {
object.name = objectName.getValue();
if ( object.parent !== undefined ) {
var newParentUuid = objectParent.getValue();
if ( object.parent.uuid !== newParentUuid && object.uuid !== newParentUuid ) {
var parent = editor.objects[newParentUuid];
if ( parent === undefined ) {
parent = scene;
}
parent.add( object );
signals.sceneChanged.dispatch( scene );
}
}
if ( object.geometry !== undefined ) {
var newGeometryUUid = objectGeometry.getValue();
if ( object.geometry.uuid !== newGeometryUUid && object.uuid !== newGeometryUUid ) {
object.geometry = editor.geometries[newGeometryUUid];
// TODO: Update Geometry;
signals.objectChanged.dispatch( object );
}
}
if ( object.material !== undefined ) {
var newMaterialUUid = objectMaterial.getValue();
if ( object.material.uuid !== newMaterialUUid && object.uuid !== newMaterialUUid ) {
object.material = editor.materials[newMaterialUUid];
signals.objectChanged.dispatch( object );
}
}
object.position.x = objectPositionX.getValue();
object.position.y = objectPositionY.getValue();
object.position.z = objectPositionZ.getValue();
object.rotation.x = objectRotationX.getValue();
object.rotation.y = objectRotationY.getValue();
object.rotation.z = objectRotationZ.getValue();
object.scale.x = objectScaleX.getValue();
object.scale.y = objectScaleY.getValue();
object.scale.z = objectScaleZ.getValue();
if ( object.fov !== undefined ) {
object.fov = objectFov.getValue();
object.updateProjectionMatrix();
}
if ( object.near !== undefined ) {
object.near = objectNear.getValue();
}
if ( object.far !== undefined ) {
object.far = objectFar.getValue();
}
if ( object.intensity !== undefined ) {
object.intensity = objectIntensity.getValue();
}
if ( object.color !== undefined ) {
object.color.setHex( objectColor.getHexValue() );
}
if ( object.groundColor !== undefined ) {
object.groundColor.setHex( objectGroundColor.getHexValue() );
}
if ( object.distance !== undefined ) {
object.distance = objectDistance.getValue();
}
if ( object.angle !== undefined ) {
object.angle = objectAngle.getValue();
}
if ( object.exponent !== undefined ) {
object.exponent = objectExponent.getValue();
}
object.visible = objectVisible.getValue();
try {
object.userData = JSON.parse( objectUserData.getValue() );
} catch ( error ) {
console.log( error );
}
signals.objectChanged.dispatch( object );
}
}
function updateRows() {
var properties = {
'parent': objectParentRow,
'geometry': objectGeometryRow,
'material': objectMaterialRow,
'fov': objectFovRow,
'near': objectNearRow,
'far': objectFarRow,
'intensity': objectIntensityRow,
'color': objectColorRow,
'groundColor': objectGroundColorRow,
'distance' : objectDistanceRow,
'angle' : objectAngleRow,
'exponent' : objectExponentRow
};
for ( var property in properties ) {
properties[ property ].setDisplay( object[ property ] !== undefined ? '' : 'none' );
}
}
function updateTransformRows() {
if ( object instanceof THREE.Light || ( object instanceof THREE.Object3D && object.userData.targetInverse ) ) {
objectRotationRow.setDisplay( 'none' );
objectScaleRow.setDisplay( 'none' );
} else {
objectRotationRow.setDisplay( '' );
objectScaleRow.setDisplay( '' );
}
}
function getObjectInstanceName( object ) {
var objects = {
'Scene': THREE.Scene,
'PerspectiveCamera': THREE.PerspectiveCamera,
'AmbientLight': THREE.AmbientLight,
'DirectionalLight': THREE.DirectionalLight,
'HemisphereLight': THREE.HemisphereLight,
'PointLight': THREE.PointLight,
'SpotLight': THREE.SpotLight,
'Mesh': THREE.Mesh,
'Object3D': THREE.Object3D
};
for ( var key in objects ) {
if ( object instanceof objects[ key ] ) return key;
}
}
// events
signals.sceneChanged.add( function () {
} );
signals.selected.add( function ( selected ) {
var selected = editor.listSelected( 'object' );
object = ( selected.length ) ? selected[0] : null;
updateUI();
} );
signals.objectChanged.add( function ( changedObject ) {
if ( object === changedObject ) updateUI();
} );
function updateUI() {
if ( !object ) {
container.setDisplay( 'none' );
return;
}
container.setDisplay( 'block' );
objectType.setValue( getObjectInstanceName( object ) );
var allObjects = {};
var allGeometries = {};
var allMaterials = {};
for ( var uuid in editor.objects ) {
if ( object.uuid != uuid ) allObjects[ uuid ] = editor.objects[ uuid ].name;
}
for ( var uuid in editor.geometries ) {
allGeometries[ uuid ] = editor.geometries[ uuid ].name;
}
for ( var uuid in editor.materials ) {
allMaterials[ uuid ] = editor.materials[ uuid ].name;
}
objectParent.setOptions( allObjects );
objectGeometry.setOptions( allGeometries );
objectMaterial.setOptions( allMaterials );
if ( object.parent !== undefined ) {
objectParent.setValue( object.parent.uuid );
}
if ( object.geometry !== undefined ) {
objectGeometry.setValue( object.geometry.uuid );
}
if ( object.material !== undefined ) {
objectMaterial.setValue( object.material.uuid );
}
objectName.setValue( object.name );
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 );
objectScaleX.setValue( object.scale.x );
objectScaleY.setValue( object.scale.y );
objectScaleZ.setValue( object.scale.z );
if ( object.fov !== undefined ) {
objectFov.setValue( object.fov );
}
if ( object.near !== undefined ) {
objectNear.setValue( object.near );
}
if ( object.far !== undefined ) {
objectFar.setValue( object.far );
}
if ( object.intensity !== undefined ) {
objectIntensity.setValue( object.intensity );
}
if ( object.color !== undefined ) {
objectColor.setValue( '#' + object.color.getHexString() );
}
if ( object.groundColor !== undefined ) {
objectGroundColor.setValue( '#' + object.groundColor.getHexString() );
}
if ( object.distance !== undefined ) {
objectDistance.setValue( object.distance );
}
if ( object.angle !== undefined ) {
objectAngle.setValue( object.angle );
}
if ( object.exponent !== undefined ) {
objectExponent.setValue( object.exponent );
}
objectVisible.setValue( object.visible );
try {
objectUserData.setValue( JSON.stringify( object.userData, null, ' ' ) );
} catch ( error ) {
console.log( error );
}
objectUserData.setBorderColor( '#ccc' );
objectUserData.setBackgroundColor( '' );
updateRows();
updateTransformRows();
}
return container;
}
editor/js/Sidebar.Selected.js 已删除 100644 → 0
浏览文件 @ b61034a6
Sidebar.Selected = function ( signals ) {
var container = new UI.Panel();
container.add( new Sidebar.Object3D( signals ) );
container.add( new Sidebar.Geometry( signals ) );
container.add( new Sidebar.Material( signals ) );
return container;
}
editor/js/Sidebar.js
浏览文件 @ a4bee66f
var Sidebar = function ( editor, signals ) { var Sidebar = function ( editor, signals ) {
var container = new UI.Panel(); var container = new UI.Panel().setWidth('300px');
container.setPosition( 'absolute' ); container.setPosition( 'absolute' );
container.setClass( 'sidebar' ); container.setClass( 'sidebar' );
container.add( new Sidebar.Renderer( signals ) ); container.add( new Sidebar.Renderer( signals ) );
container.add( new Sidebar.Outliner( signals ) ); container.add( new Sidebar.Outliner( signals ) );
container.add( new Sidebar.Selected( signals ) ); container.add( new Sidebar.Attributes( signals ) );
container.add( new Sidebar.Animation( signals ) ); container.add( new Sidebar.Animation( signals ) );
return container; return container;
......
editor/js/Viewport.js
浏览文件 @ a4bee66f
...@@ -171,6 +171,7 @@ var Viewport = function ( editor, signals ) { ...@@ -171,6 +171,7 @@ var Viewport = function ( editor, signals ) {
if ( object.geometry !== undefined ) { if ( object.geometry !== undefined ) {
selectionBox.visible = true;
selectionBox.update( object ); selectionBox.update( object );
transformControls.update(); transformControls.update();
...@@ -221,9 +222,7 @@ var Viewport = function ( editor, signals ) { ...@@ -221,9 +222,7 @@ var Viewport = function ( editor, signals ) {
if ( object && object !== scene ) { if ( object && object !== scene ) {
selectionBox.visible = true;
transformControls.attach( object ); transformControls.attach( object );
updateHelpers( object ); updateHelpers( object );
} }
...@@ -249,6 +248,7 @@ var Viewport = function ( editor, signals ) { ...@@ -249,6 +248,7 @@ var Viewport = function ( editor, signals ) {
signals.objectChanged.add( function ( object ) { signals.objectChanged.add( function ( object ) {
updateHelpers( object ); updateHelpers( object );
transformControls.update();
updateInfo(); updateInfo();
render(); render();
......
editor/js/libs/ui.js
浏览文件 @ a4bee66f
...@@ -675,10 +675,14 @@ UI.Number = function ( number ) { ...@@ -675,10 +675,14 @@ UI.Number = function ( number ) {
var onChange = function ( event ) { var onChange = function ( event ) {
var number = parseFloat( dom.value ); var number = parseFloat( dom.value );
if ( isNaN( number ) === false ) { if ( isNaN( number ) === false ) {
dom.oldValue = dom.newValue;
dom.newValue = number;
dom.value = number; dom.value = number;
} }
......
editor/js/libs/ui.three.js
浏览文件 @ a4bee66f
// Texture // String
UI.ParamString = function ( name ) {
UI.Panel.call( this );
var scope = this;
var row = new UI.Panel();
this.name = new UI.Text( name ).setWidth( '90px' ).setColor( '#666' );
this.string = new UI.Input().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' );
this.string.dom.name = name;
row.add( this.name, this.string );
this.add( row );
return this;
};
UI.ParamString.prototype = Object.create( UI.Panel.prototype );
UI.ParamString.prototype.setValue = function ( value ) {
this.string.setValue( value );
};
UI.ParamString.prototype.getValue = function ( value ) {
return this.string.getValue( value );
};
// Integer
UI.ParamInteger = function ( name ) {
UI.Panel.call( this );
var scope = this;
var row = new UI.Panel();
this.name = new UI.Text( name ).setWidth( '90px' ).setColor( '#666' );
this.integer = new UI.Integer();
this.integer.dom.name = name;
row.add( this.name, this.integer );
this.add( row );
return this;
};
UI.ParamInteger.prototype = Object.create( UI.Panel.prototype );
UI.ParamInteger.prototype.setValue = function ( value ) {
this.integer.setValue( value );
};
UI.ParamInteger.prototype.getValue = function () {
return this.integer.getValue();
};
// Float
UI.ParamFloat = function ( name ) {
UI.Panel.call( this );
var scope = this;
var row = new UI.Panel();
this.name = new UI.Text( name ).setWidth( '90px' ).setColor( '#666' );
this.float = new UI.Number();
this.float.dom.name = name;
row.add( this.name, this.float );
this.add( row );
return this;
};
UI.ParamFloat.prototype = Object.create( UI.Panel.prototype );
UI.ParamFloat.prototype.setValue = function ( value ) {
this.float.setValue( value );
};
UI.ParamFloat.prototype.getValue = function () {
return this.float.getValue();
};
// Bool
UI.ParamBool = function ( name ) {
UI.Panel.call( this );
var scope = this;
var row = new UI.Panel();
this.name = new UI.Text( name ).setWidth( '90px' ).setColor( '#666' ).setPosition( 'relative' ).setLeft( '25px' );
this.bool = new UI.Checkbox().setPosition( 'absolute' ).setLeft( '10px' );
this.bool.dom.name = name;
row.add( this.name, this.bool );
this.add( row );
return this;
};
UI.ParamBool.prototype = Object.create( UI.Panel.prototype );
UI.ParamBool.prototype.setValue = function ( value ) {
this.bool.setValue( value );
};
UI.ParamBool.prototype.getValue = function () {
return this.bool.getValue();
};
// Vector3
UI.ParamVector3 = function ( name, scaleLock ) {
UI.Panel.call( this );
scaleLock = scaleLock ? scaleLock : false;
var scope = this;
var row = new UI.Panel();
this.name = new UI.Text( name ).setWidth( '90px' ).setColor( '#666' );
this.x = new UI.Number().setWidth( '50px' ).onChange( setYZ );
this.y = new UI.Number().setWidth( '50px' ).onChange( setXZ );
this.z = new UI.Number().setWidth( '50px' ).onChange( setXY );
this.x.dom.name = name;
this.y.dom.name = name;
this.z.dom.name = name;
row.add( this.name, this.x, this.y, this.z );
if ( scaleLock ) {
this.scaleLock = new UI.Checkbox().setPosition( 'absolute' ).setLeft( '75px' );
row.add( this.scaleLock );
}
this.add( row );
function setYZ( event ) {
if ( scope.scaleLock && scope.scaleLock.getValue() && event.srcElement.oldValue ) {
var scale = event.srcElement.value / event.srcElement.oldValue;
scope.y.setValue( parseFloat(scope.y.getValue()) * scale );
scope.z.setValue( parseFloat(scope.z.getValue()) * scale );
}
}
function setXZ( event ) {
if ( scope.scaleLock && scope.scaleLock.getValue() && event.srcElement.oldValue ) {
var scale = event.srcElement.value / event.srcElement.oldValue;
scope.x.setValue( parseFloat(scope.x.getValue()) * scale );
scope.z.setValue( parseFloat(scope.z.getValue()) * scale );
}
}
function setXY( event ) {
if ( scope.scaleLock && scope.scaleLock.getValue() && event.srcElement.oldValue ) {
var scale = event.srcElement.value / event.srcElement.oldValue;
scope.x.setValue( parseFloat(scope.x.getValue()) * scale );
scope.y.setValue( parseFloat(scope.y.getValue()) * scale );
}
}
return this;
};
UI.ParamVector3.prototype = Object.create( UI.Panel.prototype );
UI.ParamVector3.prototype.setValue = function ( value ) {
this.x.setValue( value.x );
this.y.setValue( value.y );
this.z.setValue( value.z );
};
UI.ParamVector3.prototype.getValue = function () {
return new THREE.Vector3( this.x.getValue(), this.y.getValue(), this.z.getValue() );
};
// Color
UI.ParamColor = function ( name ) {
UI.Panel.call( this );
var scope = this;
var row = new UI.Panel();
this.name = new UI.Text( name ).setWidth( '90px' ).setColor( '#666' );
this.color = new UI.Color();
this.color.dom.name = name;
row.add( this.name, this.color );
this.add( row );
return this;
};
UI.ParamColor.prototype = Object.create( UI.Panel.prototype );
UI.ParamColor.prototype.setValue = function ( color ) {
this.color.setValue( '#' + color.getHexString() );
};
UI.ParamColor.prototype.getValue = function () {
return this.color.getHexValue();
};
// Select
UI.ParamSelect = function ( name ) {
UI.Panel.call( this );
var scope = this;
this.onChangeCallback;
var row = new UI.Panel();
this.name = new UI.Text( name ).setWidth( '90px' ).setColor( '#666' );
this.select = new UI.Select().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' );
this.select.dom.name = name;
row.add( this.name, this.select );
this.add( row );
return this;
};
UI.ParamSelect.prototype = Object.create( UI.Panel.prototype );
UI.ParamSelect.prototype.setValue = function ( value ) {
this.select.setValue( value );
};
UI.ParamSelect.prototype.getValue = function ( value ) {
return this.select.getValue( value );
};
UI.ParamSelect.prototype.setOptions = function ( value ) {
this.select.setOptions( value );
};
// Texture
UI.Texture = function ( position ) { UI.Texture = function ( position ) {
UI.Element.call( this ); UI.Element.call( this );
var scope = this; var scope = this;
...@@ -95,7 +408,6 @@ UI.Texture.prototype.onChange = function ( callback ) { ...@@ -95,7 +408,6 @@ UI.Texture.prototype.onChange = function ( callback ) {
}; };
// CubeTexture // CubeTexture
UI.CubeTexture = function ( position ) { UI.CubeTexture = function ( position ) {
...@@ -164,3 +476,50 @@ UI.CubeTexture.prototype.onChange = function ( callback ) { ...@@ -164,3 +476,50 @@ UI.CubeTexture.prototype.onChange = function ( callback ) {
return this; return this;
}; };
// Json
UI.ParamJson = function ( name ) {
UI.Panel.call( this );
var scope = this;
var row = new UI.Panel();
this.name = new UI.Text( name ).setWidth( '90px' ).setColor( '#666' );
this.json = new UI.TextArea().setWidth( '150px' ).setHeight( '40px' ).setColor( '#444' ).setFontSize( '12px' );
this.json.dom.name = name;
this.json.onKeyUp( function () {
try {
JSON.parse( scope.json.getValue() );
scope.json.setBorderColor( '#ccc' );
scope.json.setBackgroundColor( '' );
} catch ( error ) {
scope.json.setBorderColor( '#f00' );
scope.json.setBackgroundColor( 'rgba(255,0,0,0.25)' );
}
} );
row.add( this.name, this.json );
this.add( row );
return this;
};
UI.ParamJson.prototype = Object.create( UI.Panel.prototype );
UI.ParamJson.prototype.setValue = function ( value ) {
this.json.setValue( value );
};
UI.ParamJson.prototype.getValue = function () {
return this.json.getValue();
};
src/extras/geometries/CylinderGeometry.js
浏览文件 @ a4bee66f
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @author mrdoob / http://mrdoob.com/ * @author mrdoob / http://mrdoob.com/
*/ */
THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded ) { THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded ) {
THREE.Geometry.call( this ); THREE.Geometry.call( this );
...@@ -10,7 +10,7 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegme ...@@ -10,7 +10,7 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegme
this.radiusBottom = radiusBottom = radiusBottom !== undefined ? radiusBottom : 20; this.radiusBottom = radiusBottom = radiusBottom !== undefined ? radiusBottom : 20;
this.height = height = height !== undefined ? height : 100; this.height = height = height !== undefined ? height : 100;
this.radiusSegments = radiusSegments = radiusSegments || 8; this.radialSegments = radialSegments = radialSegments || 8;
this.heightSegments = heightSegments = heightSegments || 1; this.heightSegments = heightSegments = heightSegments || 1;
this.openEnded = openEnded = openEnded !== undefined ? openEnded : false; this.openEnded = openEnded = openEnded !== undefined ? openEnded : false;
...@@ -27,9 +27,9 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegme ...@@ -27,9 +27,9 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegme
var v = y / heightSegments; var v = y / heightSegments;
var radius = v * ( radiusBottom - radiusTop ) + radiusTop; var radius = v * ( radiusBottom - radiusTop ) + radiusTop;
for ( x = 0; x <= radiusSegments; x ++ ) { for ( x = 0; x <= radialSegments; x ++ ) {
var u = x / radiusSegments; var u = x / radialSegments;
var vertex = new THREE.Vector3(); var vertex = new THREE.Vector3();
vertex.x = radius * Math.sin( u * Math.PI * 2 ); vertex.x = radius * Math.sin( u * Math.PI * 2 );
...@@ -51,7 +51,7 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegme ...@@ -51,7 +51,7 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegme
var tanTheta = ( radiusBottom - radiusTop ) / height; var tanTheta = ( radiusBottom - radiusTop ) / height;
var na, nb; var na, nb;
for ( x = 0; x < radiusSegments; x ++ ) { for ( x = 0; x < radialSegments; x ++ ) {
if ( radiusTop !== 0 ) { if ( radiusTop !== 0 ) {
...@@ -98,7 +98,7 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegme ...@@ -98,7 +98,7 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegme
this.vertices.push( new THREE.Vector3( 0, heightHalf, 0 ) ); this.vertices.push( new THREE.Vector3( 0, heightHalf, 0 ) );
for ( x = 0; x < radiusSegments; x ++ ) { for ( x = 0; x < radialSegments; x ++ ) {
var v1 = vertices[ 0 ][ x ]; var v1 = vertices[ 0 ][ x ];
var v2 = vertices[ 0 ][ x + 1 ]; var v2 = vertices[ 0 ][ x + 1 ];
...@@ -125,7 +125,7 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegme ...@@ -125,7 +125,7 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegme
this.vertices.push( new THREE.Vector3( 0, - heightHalf, 0 ) ); this.vertices.push( new THREE.Vector3( 0, - heightHalf, 0 ) );
for ( x = 0; x < radiusSegments; x ++ ) { for ( x = 0; x < radialSegments; x ++ ) {
var v1 = vertices[ y ][ x + 1 ]; var v1 = vertices[ y ][ x + 1 ];
var v2 = vertices[ y ][ x ]; var v2 = vertices[ y ][ x ];
......
src/extras/geometries/TubeGeometry.js
浏览文件 @ a4bee66f
...@@ -11,14 +11,14 @@ ...@@ -11,14 +11,14 @@
* http://www.cs.indiana.edu/pub/techreports/TR425.pdf * http://www.cs.indiana.edu/pub/techreports/TR425.pdf
*/ */
THREE.TubeGeometry = function( path, segments, radius, radiusSegments, closed, debug ) { THREE.TubeGeometry = function( path, segments, radius, radialSegments, closed, debug ) {
THREE.Geometry.call( this ); THREE.Geometry.call( this );
this.path = path; this.path = path;
this.segments = segments || 64; this.segments = segments || 64;
this.radius = radius || 1; this.radius = radius || 1;
this.radiusSegments = radiusSegments || 8; this.radialSegments = radialSegments || 8;
this.closed = closed || false; this.closed = closed || false;
if ( debug ) this.debug = new THREE.Object3D(); if ( debug ) this.debug = new THREE.Object3D();
...@@ -83,9 +83,9 @@ THREE.TubeGeometry = function( path, segments, radius, radiusSegments, closed, d ...@@ -83,9 +83,9 @@ THREE.TubeGeometry = function( path, segments, radius, radiusSegments, closed, d
} }
for ( j = 0; j < this.radiusSegments; j++ ) { for ( j = 0; j < this.radialSegments; j++ ) {
v = j / this.radiusSegments * 2 * Math.PI; v = j / this.radialSegments * 2 * Math.PI;
cx = -this.radius * Math.cos( v ); // TODO: Hack: Negating it so it faces outside. cx = -this.radius * Math.cos( v ); // TODO: Hack: Negating it so it faces outside.
cy = this.radius * Math.sin( v ); cy = this.radius * Math.sin( v );
...@@ -105,20 +105,20 @@ THREE.TubeGeometry = function( path, segments, radius, radiusSegments, closed, d ...@@ -105,20 +105,20 @@ THREE.TubeGeometry = function( path, segments, radius, radiusSegments, closed, d
for ( i = 0; i < this.segments; i++ ) { for ( i = 0; i < this.segments; i++ ) {
for ( j = 0; j < this.radiusSegments; j++ ) { for ( j = 0; j < this.radialSegments; j++ ) {
ip = ( this.closed ) ? (i + 1) % this.segments : i + 1; ip = ( this.closed ) ? (i + 1) % this.segments : i + 1;
jp = (j + 1) % this.radiusSegments; jp = (j + 1) % this.radialSegments;
a = this.grid[ i ][ j ]; // *** NOT NECESSARILY PLANAR ! *** a = this.grid[ i ][ j ]; // *** NOT NECESSARILY PLANAR ! ***
b = this.grid[ ip ][ j ]; b = this.grid[ ip ][ j ];
c = this.grid[ ip ][ jp ]; c = this.grid[ ip ][ jp ];
d = this.grid[ i ][ jp ]; d = this.grid[ i ][ jp ];
uva = new THREE.Vector2( i / this.segments, j / this.radiusSegments ); uva = new THREE.Vector2( i / this.segments, j / this.radialSegments );
uvb = new THREE.Vector2( ( i + 1 ) / this.segments, j / this.radiusSegments ); uvb = new THREE.Vector2( ( i + 1 ) / this.segments, j / this.radialSegments );
uvc = new THREE.Vector2( ( i + 1 ) / this.segments, ( j + 1 ) / this.radiusSegments ); uvc = new THREE.Vector2( ( i + 1 ) / this.segments, ( j + 1 ) / this.radialSegments );
uvd = new THREE.Vector2( i / this.segments, ( j + 1 ) / this.radiusSegments ); uvd = new THREE.Vector2( i / this.segments, ( j + 1 ) / this.radialSegments );
this.faces.push( new THREE.Face4( a, b, c, d ) ); this.faces.push( new THREE.Face4( a, b, c, d ) );
this.faceVertexUvs[ 0 ].push( [ uva, uvb, uvc, uvd ] ); this.faceVertexUvs[ 0 ].push( [ uva, uvb, uvc, uvd ] );
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或