Sidebar.Properties.Geometry = function ( signals ) { var container = new UI.Panel(); container.setDisplay( 'none' ); container.add( new UI.Text().setText( 'GEOMETRY' ).setColor( '#666' ) ); var button = new UI.Button( 'absolute' ).setRight( '0px' ).setText( 'Export' ).onClick( exportGeometry ); button.download = 'test.js'; container.add( button ); container.add( new UI.Break(), new UI.Break() ); container.add( new UI.Text().setText( 'Name' ).setColor( '#666' ) ); var geometryName = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' ); container.add( geometryName ); container.add( new UI.HorizontalRule() ); container.add( new UI.Text().setText( 'Class' ).setColor( '#666' ) ); var geometryClass = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' ); container.add( geometryClass ); container.add( new UI.HorizontalRule() ); container.add( new UI.Text().setText( 'Vertices' ).setColor( '#666' ) ); var verticesCount = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' ); container.add( verticesCount ); container.add( new UI.HorizontalRule() ); container.add( new UI.Text().setText( 'Faces' ).setColor( '#666' ) ); var facesCount = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' ); container.add( facesCount ); container.add( new UI.Break(), new UI.Break(), new UI.Break() ); // var selected = null; signals.objectSelected.add( function ( object ) { if ( object && object.geometry ) { selected = object.geometry; container.setDisplay( 'block' ); geometryName.setText( object.geometry.name ); geometryClass.setText( getGeometryInstanceName( object.geometry ) ); verticesCount.setText( object.geometry.vertices.length ); facesCount.setText( object.geometry.faces.length ); } else { selected = null; container.setDisplay( 'none' ); } } ); function getGeometryInstanceName( geometry ) { // TODO: Is there a way of doing this automatically? if ( geometry instanceof THREE.ConvexGeometry ) return "ConvexGeometry"; if ( geometry instanceof THREE.CubeGeometry ) return "CubeGeometry"; if ( geometry instanceof THREE.CylinderGeometry ) return "CylinderGeometry"; if ( geometry instanceof THREE.ExtrudeGeometry ) return "ExtrudeGeometry"; if ( geometry instanceof THREE.IcosahedronGeometry ) return "IcosahedronGeometry"; if ( geometry instanceof THREE.LatheGeometry ) return "LatheGeometry"; if ( geometry instanceof THREE.OctahedronGeometry ) return "OctahedronGeometry"; if ( geometry instanceof THREE.ParametricGeometry ) return "ParametricGeometry"; if ( geometry instanceof THREE.PlaneGeometry ) return "PlaneGeometry"; if ( geometry instanceof THREE.PolyhedronGeometry ) return "PolyhedronGeometry"; if ( geometry instanceof THREE.SphereGeometry ) return "SphereGeometry"; if ( geometry instanceof THREE.TetrahedronGeometry ) return "TetrahedronGeometry"; if ( geometry instanceof THREE.TextGeometry ) return "TextGeometry"; if ( geometry instanceof THREE.TorusGeometry ) return "TorusGeometry"; if ( geometry instanceof THREE.TorusKnotGeometry ) return "TorusKnotGeometry"; if ( geometry instanceof THREE.TubeGeometry ) return "TubeGeometry"; if ( geometry instanceof THREE.Geometry ) return "Geometry"; } function exportGeometry() { var geometry = selected; var json = { "metadata": { "formatVersion" : 3 } }; json.vertices = []; for ( var i = 0; i < geometry.vertices.length; i ++ ) { var vertex = geometry.vertices[ i ]; json.vertices.push( vertex.x, vertex.y, vertex.z ); } json.faces = []; for ( var i = 0; i < geometry.faces.length; i ++ ) { var face = geometry.faces[ i ]; var isTriangle = face instanceof THREE.Face3; var hasMaterial = face.materialIndex !== undefined; var hasFaceUv = geometry.faceUvs[ 0 ][ i ] !== undefined; var hasFaceVertexUv = geometry.faceVertexUvs[ 0 ][ i ] !== undefined; var hasFaceNormal = face.normal.length() > 0; var hasFaceVertexNormal = face.vertexNormals[ 0 ] !== undefined; var hasFaceColor = face.color; var hasFaceVertexColor = face.vertexColors[ 0 ] !== undefined; var faceType = 0 faceType = setBit( faceType, 0, ! isTriangle ); /* faceType = setBit( faceType, 1, hasMaterial ); faceType = setBit( faceType, 2, hasFaceUv ); faceType = setBit( faceType, 3, hasFaceVertexUv ); faceType = setBit( faceType, 4, hasFaceNormal ); faceType = setBit( faceType, 5, hasFaceVertexNormal ); faceType = setBit( faceType, 6, hasFaceColor ); faceType = setBit( faceType, 7, hasFaceVertexColor ); */ json.faces.push( faceType ); if ( isTriangle ) { json.faces.push( face.a, face.b, face.c ); } else { json.faces.push( face.a, face.b, face.c, face.d ); } if ( hasMaterial ) { json.faces.push( face.materialIndex ); } if ( hasFaceUv || hasFaceVertexUv ) json.uvs = [ [] ]; if ( hasFaceUv ) { /* var uv = geometry.faceUvs[ 0 ][ i ]; json.uvs[ 0 ].push( uv.u, uv.v ); */ } if ( hasFaceVertexUv ) { /* var uvs = geometry.faceVertexUvs[ 0 ][ i ]; if ( isTriangle ) { json.faces.push( uvs[ 0 ].u, uvs[ 0 ].v, uvs[ 1 ].u, uvs[ 1 ].v, uvs[ 2 ].u, uvs[ 2 ].v ); } else { json.faces.push( uvs[ 0 ].u, uvs[ 0 ].v, uvs[ 1 ].u, uvs[ 1 ].v, uvs[ 2 ].u, uvs[ 2 ].v, uvs[ 3 ].u, uvs[ 3 ].v ); } */ } if ( hasFaceNormal || hasFaceVertexNormal ) json.normals = []; if ( hasFaceNormal ) { /* var normal = face.normal; json.faces.push( normal.x, normal.y, normal.z ); */ } if ( hasFaceVertexNormal ) { /* var normals = face.vertexNormals; if ( isTriangle ) { json.faces.push( normals[ 0 ].u, normals[ 0 ].y, normals[ 0 ].z, normals[ 1 ].u, normals[ 1 ].y, normals[ 1 ].z, normals[ 2 ].u, normals[ 2 ].y, normals[ 2 ].z ); } else { json.faces.push( normals[ 0 ].x, normals[ 0 ].y, normals[ 0 ].z, normals[ 1 ].x, normals[ 1 ].y, normals[ 1 ].z, normals[ 2 ].x, normals[ 2 ].y, normals[ 2 ].z, normals[ 3 ].x, normals[ 3 ].y, normals[ 3 ].z ); } */ } } function setBit( value, position, enabled ) { return enabled ? value | ( 1 << position ) : value & ( ~ ( 1 << position) ); } // var file = new BlobBuilder(); file.append( JSON.stringify( json ) ); var objectURL = URL.createObjectURL( file.getBlob( 'text/json' ) ); var clickEvent = document.createEvent( 'MouseEvent' ); clickEvent.initMouseEvent( 'click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null ); var download = document.createElement( 'a' ); download.href = objectURL; download.download = 'geometry.js'; download.dispatchEvent( clickEvent ); URL.revokeObjectURL( objectURL ); } return container; }