Buckets:
ktongue/docker_container / simsite /frontend /node_modules /three /examples /jsm /loaders /3MFLoader.js
| import { | |
| BufferAttribute, | |
| BufferGeometry, | |
| ClampToEdgeWrapping, | |
| Color, | |
| FileLoader, | |
| Float32BufferAttribute, | |
| Group, | |
| LinearFilter, | |
| LinearMipmapLinearFilter, | |
| Loader, | |
| Matrix4, | |
| Mesh, | |
| MeshPhongMaterial, | |
| MeshStandardMaterial, | |
| MirroredRepeatWrapping, | |
| NearestFilter, | |
| RepeatWrapping, | |
| TextureLoader, | |
| SRGBColorSpace | |
| } from 'three'; | |
| import * as fflate from '../libs/fflate.module.js'; | |
| const COLOR_SPACE_3MF = SRGBColorSpace; | |
| /** | |
| * | |
| * 3D Manufacturing Format (3MF) specification: https://3mf.io/specification/ | |
| * | |
| * The following features from the core specification are supported: | |
| * | |
| * - 3D Models | |
| * - Object Resources (Meshes and Components) | |
| * - Material Resources (Base Materials) | |
| * | |
| * 3MF Materials and Properties Extension are only partially supported. | |
| * | |
| * - Texture 2D | |
| * - Texture 2D Groups | |
| * - Color Groups (Vertex Colors) | |
| * - Metallic Display Properties (PBR) | |
| */ | |
| class ThreeMFLoader extends Loader { | |
| constructor( manager ) { | |
| super( manager ); | |
| this.availableExtensions = []; | |
| } | |
| load( url, onLoad, onProgress, onError ) { | |
| const scope = this; | |
| const loader = new FileLoader( scope.manager ); | |
| loader.setPath( scope.path ); | |
| loader.setResponseType( 'arraybuffer' ); | |
| loader.setRequestHeader( scope.requestHeader ); | |
| loader.setWithCredentials( scope.withCredentials ); | |
| loader.load( url, function ( buffer ) { | |
| try { | |
| onLoad( scope.parse( buffer ) ); | |
| } catch ( e ) { | |
| if ( onError ) { | |
| onError( e ); | |
| } else { | |
| console.error( e ); | |
| } | |
| scope.manager.itemError( url ); | |
| } | |
| }, onProgress, onError ); | |
| } | |
| parse( data ) { | |
| const scope = this; | |
| const textureLoader = new TextureLoader( this.manager ); | |
| function loadDocument( data ) { | |
| let zip = null; | |
| let file = null; | |
| let relsName; | |
| let modelRelsName; | |
| const modelPartNames = []; | |
| const texturesPartNames = []; | |
| let modelRels; | |
| const modelParts = {}; | |
| const printTicketParts = {}; | |
| const texturesParts = {}; | |
| const textDecoder = new TextDecoder(); | |
| try { | |
| zip = fflate.unzipSync( new Uint8Array( data ) ); | |
| } catch ( e ) { | |
| if ( e instanceof ReferenceError ) { | |
| console.error( 'THREE.3MFLoader: fflate missing and file is compressed.' ); | |
| return null; | |
| } | |
| } | |
| for ( file in zip ) { | |
| if ( file.match( /\_rels\/.rels$/ ) ) { | |
| relsName = file; | |
| } else if ( file.match( /3D\/_rels\/.*\.model\.rels$/ ) ) { | |
| modelRelsName = file; | |
| } else if ( file.match( /^3D\/.*\.model$/ ) ) { | |
| modelPartNames.push( file ); | |
| } else if ( file.match( /^3D\/Textures?\/.*/ ) ) { | |
| texturesPartNames.push( file ); | |
| } | |
| } | |
| // | |
| const relsView = zip[ relsName ]; | |
| const relsFileText = textDecoder.decode( relsView ); | |
| const rels = parseRelsXml( relsFileText ); | |
| // | |
| if ( modelRelsName ) { | |
| const relsView = zip[ modelRelsName ]; | |
| const relsFileText = textDecoder.decode( relsView ); | |
| modelRels = parseRelsXml( relsFileText ); | |
| } | |
| // | |
| for ( let i = 0; i < modelPartNames.length; i ++ ) { | |
| const modelPart = modelPartNames[ i ]; | |
| const view = zip[ modelPart ]; | |
| const fileText = textDecoder.decode( view ); | |
| const xmlData = new DOMParser().parseFromString( fileText, 'application/xml' ); | |
| if ( xmlData.documentElement.nodeName.toLowerCase() !== 'model' ) { | |
| console.error( 'THREE.3MFLoader: Error loading 3MF - no 3MF document found: ', modelPart ); | |
| } | |
| const modelNode = xmlData.querySelector( 'model' ); | |
| const extensions = {}; | |
| for ( let i = 0; i < modelNode.attributes.length; i ++ ) { | |
| const attr = modelNode.attributes[ i ]; | |
| if ( attr.name.match( /^xmlns:(.+)$/ ) ) { | |
| extensions[ attr.value ] = RegExp.$1; | |
| } | |
| } | |
| const modelData = parseModelNode( modelNode ); | |
| modelData[ 'xml' ] = modelNode; | |
| if ( 0 < Object.keys( extensions ).length ) { | |
| modelData[ 'extensions' ] = extensions; | |
| } | |
| modelParts[ modelPart ] = modelData; | |
| } | |
| // | |
| for ( let i = 0; i < texturesPartNames.length; i ++ ) { | |
| const texturesPartName = texturesPartNames[ i ]; | |
| texturesParts[ texturesPartName ] = zip[ texturesPartName ].buffer; | |
| } | |
| return { | |
| rels: rels, | |
| modelRels: modelRels, | |
| model: modelParts, | |
| printTicket: printTicketParts, | |
| texture: texturesParts | |
| }; | |
| } | |
| function parseRelsXml( relsFileText ) { | |
| const relationships = []; | |
| const relsXmlData = new DOMParser().parseFromString( relsFileText, 'application/xml' ); | |
| const relsNodes = relsXmlData.querySelectorAll( 'Relationship' ); | |
| for ( let i = 0; i < relsNodes.length; i ++ ) { | |
| const relsNode = relsNodes[ i ]; | |
| const relationship = { | |
| target: relsNode.getAttribute( 'Target' ), //required | |
| id: relsNode.getAttribute( 'Id' ), //required | |
| type: relsNode.getAttribute( 'Type' ) //required | |
| }; | |
| relationships.push( relationship ); | |
| } | |
| return relationships; | |
| } | |
| function parseMetadataNodes( metadataNodes ) { | |
| const metadataData = {}; | |
| for ( let i = 0; i < metadataNodes.length; i ++ ) { | |
| const metadataNode = metadataNodes[ i ]; | |
| const name = metadataNode.getAttribute( 'name' ); | |
| const validNames = [ | |
| 'Title', | |
| 'Designer', | |
| 'Description', | |
| 'Copyright', | |
| 'LicenseTerms', | |
| 'Rating', | |
| 'CreationDate', | |
| 'ModificationDate' | |
| ]; | |
| if ( 0 <= validNames.indexOf( name ) ) { | |
| metadataData[ name ] = metadataNode.textContent; | |
| } | |
| } | |
| return metadataData; | |
| } | |
| function parseBasematerialsNode( basematerialsNode ) { | |
| const basematerialsData = { | |
| id: basematerialsNode.getAttribute( 'id' ), // required | |
| basematerials: [] | |
| }; | |
| const basematerialNodes = basematerialsNode.querySelectorAll( 'base' ); | |
| for ( let i = 0; i < basematerialNodes.length; i ++ ) { | |
| const basematerialNode = basematerialNodes[ i ]; | |
| const basematerialData = parseBasematerialNode( basematerialNode ); | |
| basematerialData.index = i; // the order and count of the material nodes form an implicit 0-based index | |
| basematerialsData.basematerials.push( basematerialData ); | |
| } | |
| return basematerialsData; | |
| } | |
| function parseTexture2DNode( texture2DNode ) { | |
| const texture2dData = { | |
| id: texture2DNode.getAttribute( 'id' ), // required | |
| path: texture2DNode.getAttribute( 'path' ), // required | |
| contenttype: texture2DNode.getAttribute( 'contenttype' ), // required | |
| tilestyleu: texture2DNode.getAttribute( 'tilestyleu' ), | |
| tilestylev: texture2DNode.getAttribute( 'tilestylev' ), | |
| filter: texture2DNode.getAttribute( 'filter' ), | |
| }; | |
| return texture2dData; | |
| } | |
| function parseTextures2DGroupNode( texture2DGroupNode ) { | |
| const texture2DGroupData = { | |
| id: texture2DGroupNode.getAttribute( 'id' ), // required | |
| texid: texture2DGroupNode.getAttribute( 'texid' ), // required | |
| displaypropertiesid: texture2DGroupNode.getAttribute( 'displaypropertiesid' ) | |
| }; | |
| const tex2coordNodes = texture2DGroupNode.querySelectorAll( 'tex2coord' ); | |
| const uvs = []; | |
| for ( let i = 0; i < tex2coordNodes.length; i ++ ) { | |
| const tex2coordNode = tex2coordNodes[ i ]; | |
| const u = tex2coordNode.getAttribute( 'u' ); | |
| const v = tex2coordNode.getAttribute( 'v' ); | |
| uvs.push( parseFloat( u ), parseFloat( v ) ); | |
| } | |
| texture2DGroupData[ 'uvs' ] = new Float32Array( uvs ); | |
| return texture2DGroupData; | |
| } | |
| function parseColorGroupNode( colorGroupNode ) { | |
| const colorGroupData = { | |
| id: colorGroupNode.getAttribute( 'id' ), // required | |
| displaypropertiesid: colorGroupNode.getAttribute( 'displaypropertiesid' ) | |
| }; | |
| const colorNodes = colorGroupNode.querySelectorAll( 'color' ); | |
| const colors = []; | |
| const colorObject = new Color(); | |
| for ( let i = 0; i < colorNodes.length; i ++ ) { | |
| const colorNode = colorNodes[ i ]; | |
| const color = colorNode.getAttribute( 'color' ); | |
| colorObject.setStyle( color.substring( 0, 7 ), COLOR_SPACE_3MF ); | |
| colors.push( colorObject.r, colorObject.g, colorObject.b ); | |
| } | |
| colorGroupData[ 'colors' ] = new Float32Array( colors ); | |
| return colorGroupData; | |
| } | |
| function parseMetallicDisplaypropertiesNode( metallicDisplaypropetiesNode ) { | |
| const metallicDisplaypropertiesData = { | |
| id: metallicDisplaypropetiesNode.getAttribute( 'id' ) // required | |
| }; | |
| const metallicNodes = metallicDisplaypropetiesNode.querySelectorAll( 'pbmetallic' ); | |
| const metallicData = []; | |
| for ( let i = 0; i < metallicNodes.length; i ++ ) { | |
| const metallicNode = metallicNodes[ i ]; | |
| metallicData.push( { | |
| name: metallicNode.getAttribute( 'name' ), // required | |
| metallicness: parseFloat( metallicNode.getAttribute( 'metallicness' ) ), // required | |
| roughness: parseFloat( metallicNode.getAttribute( 'roughness' ) ) // required | |
| } ); | |
| } | |
| metallicDisplaypropertiesData.data = metallicData; | |
| return metallicDisplaypropertiesData; | |
| } | |
| function parseBasematerialNode( basematerialNode ) { | |
| const basematerialData = {}; | |
| basematerialData[ 'name' ] = basematerialNode.getAttribute( 'name' ); // required | |
| basematerialData[ 'displaycolor' ] = basematerialNode.getAttribute( 'displaycolor' ); // required | |
| basematerialData[ 'displaypropertiesid' ] = basematerialNode.getAttribute( 'displaypropertiesid' ); | |
| return basematerialData; | |
| } | |
| function parseMeshNode( meshNode ) { | |
| const meshData = {}; | |
| const vertices = []; | |
| const vertexNodes = meshNode.querySelectorAll( 'vertices vertex' ); | |
| for ( let i = 0; i < vertexNodes.length; i ++ ) { | |
| const vertexNode = vertexNodes[ i ]; | |
| const x = vertexNode.getAttribute( 'x' ); | |
| const y = vertexNode.getAttribute( 'y' ); | |
| const z = vertexNode.getAttribute( 'z' ); | |
| vertices.push( parseFloat( x ), parseFloat( y ), parseFloat( z ) ); | |
| } | |
| meshData[ 'vertices' ] = new Float32Array( vertices ); | |
| const triangleProperties = []; | |
| const triangles = []; | |
| const triangleNodes = meshNode.querySelectorAll( 'triangles triangle' ); | |
| for ( let i = 0; i < triangleNodes.length; i ++ ) { | |
| const triangleNode = triangleNodes[ i ]; | |
| const v1 = triangleNode.getAttribute( 'v1' ); | |
| const v2 = triangleNode.getAttribute( 'v2' ); | |
| const v3 = triangleNode.getAttribute( 'v3' ); | |
| const p1 = triangleNode.getAttribute( 'p1' ); | |
| const p2 = triangleNode.getAttribute( 'p2' ); | |
| const p3 = triangleNode.getAttribute( 'p3' ); | |
| const pid = triangleNode.getAttribute( 'pid' ); | |
| const triangleProperty = {}; | |
| triangleProperty[ 'v1' ] = parseInt( v1, 10 ); | |
| triangleProperty[ 'v2' ] = parseInt( v2, 10 ); | |
| triangleProperty[ 'v3' ] = parseInt( v3, 10 ); | |
| triangles.push( triangleProperty[ 'v1' ], triangleProperty[ 'v2' ], triangleProperty[ 'v3' ] ); | |
| // optional | |
| if ( p1 ) { | |
| triangleProperty[ 'p1' ] = parseInt( p1, 10 ); | |
| } | |
| if ( p2 ) { | |
| triangleProperty[ 'p2' ] = parseInt( p2, 10 ); | |
| } | |
| if ( p3 ) { | |
| triangleProperty[ 'p3' ] = parseInt( p3, 10 ); | |
| } | |
| if ( pid ) { | |
| triangleProperty[ 'pid' ] = pid; | |
| } | |
| if ( 0 < Object.keys( triangleProperty ).length ) { | |
| triangleProperties.push( triangleProperty ); | |
| } | |
| } | |
| meshData[ 'triangleProperties' ] = triangleProperties; | |
| meshData[ 'triangles' ] = new Uint32Array( triangles ); | |
| return meshData; | |
| } | |
| function parseComponentsNode( componentsNode ) { | |
| const components = []; | |
| const componentNodes = componentsNode.querySelectorAll( 'component' ); | |
| for ( let i = 0; i < componentNodes.length; i ++ ) { | |
| const componentNode = componentNodes[ i ]; | |
| const componentData = parseComponentNode( componentNode ); | |
| components.push( componentData ); | |
| } | |
| return components; | |
| } | |
| function parseComponentNode( componentNode ) { | |
| const componentData = {}; | |
| componentData[ 'objectId' ] = componentNode.getAttribute( 'objectid' ); // required | |
| const transform = componentNode.getAttribute( 'transform' ); | |
| if ( transform ) { | |
| componentData[ 'transform' ] = parseTransform( transform ); | |
| } | |
| return componentData; | |
| } | |
| function parseTransform( transform ) { | |
| const t = []; | |
| transform.split( ' ' ).forEach( function ( s ) { | |
| t.push( parseFloat( s ) ); | |
| } ); | |
| const matrix = new Matrix4(); | |
| matrix.set( | |
| t[ 0 ], t[ 3 ], t[ 6 ], t[ 9 ], | |
| t[ 1 ], t[ 4 ], t[ 7 ], t[ 10 ], | |
| t[ 2 ], t[ 5 ], t[ 8 ], t[ 11 ], | |
| 0.0, 0.0, 0.0, 1.0 | |
| ); | |
| return matrix; | |
| } | |
| function parseObjectNode( objectNode ) { | |
| const objectData = { | |
| type: objectNode.getAttribute( 'type' ) | |
| }; | |
| const id = objectNode.getAttribute( 'id' ); | |
| if ( id ) { | |
| objectData[ 'id' ] = id; | |
| } | |
| const pid = objectNode.getAttribute( 'pid' ); | |
| if ( pid ) { | |
| objectData[ 'pid' ] = pid; | |
| } | |
| const pindex = objectNode.getAttribute( 'pindex' ); | |
| if ( pindex ) { | |
| objectData[ 'pindex' ] = pindex; | |
| } | |
| const thumbnail = objectNode.getAttribute( 'thumbnail' ); | |
| if ( thumbnail ) { | |
| objectData[ 'thumbnail' ] = thumbnail; | |
| } | |
| const partnumber = objectNode.getAttribute( 'partnumber' ); | |
| if ( partnumber ) { | |
| objectData[ 'partnumber' ] = partnumber; | |
| } | |
| const name = objectNode.getAttribute( 'name' ); | |
| if ( name ) { | |
| objectData[ 'name' ] = name; | |
| } | |
| const meshNode = objectNode.querySelector( 'mesh' ); | |
| if ( meshNode ) { | |
| objectData[ 'mesh' ] = parseMeshNode( meshNode ); | |
| } | |
| const componentsNode = objectNode.querySelector( 'components' ); | |
| if ( componentsNode ) { | |
| objectData[ 'components' ] = parseComponentsNode( componentsNode ); | |
| } | |
| return objectData; | |
| } | |
| function parseResourcesNode( resourcesNode ) { | |
| const resourcesData = {}; | |
| resourcesData[ 'basematerials' ] = {}; | |
| const basematerialsNodes = resourcesNode.querySelectorAll( 'basematerials' ); | |
| for ( let i = 0; i < basematerialsNodes.length; i ++ ) { | |
| const basematerialsNode = basematerialsNodes[ i ]; | |
| const basematerialsData = parseBasematerialsNode( basematerialsNode ); | |
| resourcesData[ 'basematerials' ][ basematerialsData[ 'id' ] ] = basematerialsData; | |
| } | |
| // | |
| resourcesData[ 'texture2d' ] = {}; | |
| const textures2DNodes = resourcesNode.querySelectorAll( 'texture2d' ); | |
| for ( let i = 0; i < textures2DNodes.length; i ++ ) { | |
| const textures2DNode = textures2DNodes[ i ]; | |
| const texture2DData = parseTexture2DNode( textures2DNode ); | |
| resourcesData[ 'texture2d' ][ texture2DData[ 'id' ] ] = texture2DData; | |
| } | |
| // | |
| resourcesData[ 'colorgroup' ] = {}; | |
| const colorGroupNodes = resourcesNode.querySelectorAll( 'colorgroup' ); | |
| for ( let i = 0; i < colorGroupNodes.length; i ++ ) { | |
| const colorGroupNode = colorGroupNodes[ i ]; | |
| const colorGroupData = parseColorGroupNode( colorGroupNode ); | |
| resourcesData[ 'colorgroup' ][ colorGroupData[ 'id' ] ] = colorGroupData; | |
| } | |
| // | |
| resourcesData[ 'pbmetallicdisplayproperties' ] = {}; | |
| const pbmetallicdisplaypropertiesNodes = resourcesNode.querySelectorAll( 'pbmetallicdisplayproperties' ); | |
| for ( let i = 0; i < pbmetallicdisplaypropertiesNodes.length; i ++ ) { | |
| const pbmetallicdisplaypropertiesNode = pbmetallicdisplaypropertiesNodes[ i ]; | |
| const pbmetallicdisplaypropertiesData = parseMetallicDisplaypropertiesNode( pbmetallicdisplaypropertiesNode ); | |
| resourcesData[ 'pbmetallicdisplayproperties' ][ pbmetallicdisplaypropertiesData[ 'id' ] ] = pbmetallicdisplaypropertiesData; | |
| } | |
| // | |
| resourcesData[ 'texture2dgroup' ] = {}; | |
| const textures2DGroupNodes = resourcesNode.querySelectorAll( 'texture2dgroup' ); | |
| for ( let i = 0; i < textures2DGroupNodes.length; i ++ ) { | |
| const textures2DGroupNode = textures2DGroupNodes[ i ]; | |
| const textures2DGroupData = parseTextures2DGroupNode( textures2DGroupNode ); | |
| resourcesData[ 'texture2dgroup' ][ textures2DGroupData[ 'id' ] ] = textures2DGroupData; | |
| } | |
| // | |
| resourcesData[ 'object' ] = {}; | |
| const objectNodes = resourcesNode.querySelectorAll( 'object' ); | |
| for ( let i = 0; i < objectNodes.length; i ++ ) { | |
| const objectNode = objectNodes[ i ]; | |
| const objectData = parseObjectNode( objectNode ); | |
| resourcesData[ 'object' ][ objectData[ 'id' ] ] = objectData; | |
| } | |
| return resourcesData; | |
| } | |
| function parseBuildNode( buildNode ) { | |
| const buildData = []; | |
| const itemNodes = buildNode.querySelectorAll( 'item' ); | |
| for ( let i = 0; i < itemNodes.length; i ++ ) { | |
| const itemNode = itemNodes[ i ]; | |
| const buildItem = { | |
| objectId: itemNode.getAttribute( 'objectid' ) | |
| }; | |
| const transform = itemNode.getAttribute( 'transform' ); | |
| if ( transform ) { | |
| buildItem[ 'transform' ] = parseTransform( transform ); | |
| } | |
| buildData.push( buildItem ); | |
| } | |
| return buildData; | |
| } | |
| function parseModelNode( modelNode ) { | |
| const modelData = { unit: modelNode.getAttribute( 'unit' ) || 'millimeter' }; | |
| const metadataNodes = modelNode.querySelectorAll( 'metadata' ); | |
| if ( metadataNodes ) { | |
| modelData[ 'metadata' ] = parseMetadataNodes( metadataNodes ); | |
| } | |
| const resourcesNode = modelNode.querySelector( 'resources' ); | |
| if ( resourcesNode ) { | |
| modelData[ 'resources' ] = parseResourcesNode( resourcesNode ); | |
| } | |
| const buildNode = modelNode.querySelector( 'build' ); | |
| if ( buildNode ) { | |
| modelData[ 'build' ] = parseBuildNode( buildNode ); | |
| } | |
| return modelData; | |
| } | |
| function buildTexture( texture2dgroup, objects, modelData, textureData ) { | |
| const texid = texture2dgroup.texid; | |
| const texture2ds = modelData.resources.texture2d; | |
| const texture2d = texture2ds[ texid ]; | |
| if ( texture2d ) { | |
| const data = textureData[ texture2d.path ]; | |
| const type = texture2d.contenttype; | |
| const blob = new Blob( [ data ], { type: type } ); | |
| const sourceURI = URL.createObjectURL( blob ); | |
| const texture = textureLoader.load( sourceURI, function () { | |
| URL.revokeObjectURL( sourceURI ); | |
| } ); | |
| texture.colorSpace = COLOR_SPACE_3MF; | |
| // texture parameters | |
| switch ( texture2d.tilestyleu ) { | |
| case 'wrap': | |
| texture.wrapS = RepeatWrapping; | |
| break; | |
| case 'mirror': | |
| texture.wrapS = MirroredRepeatWrapping; | |
| break; | |
| case 'none': | |
| case 'clamp': | |
| texture.wrapS = ClampToEdgeWrapping; | |
| break; | |
| default: | |
| texture.wrapS = RepeatWrapping; | |
| } | |
| switch ( texture2d.tilestylev ) { | |
| case 'wrap': | |
| texture.wrapT = RepeatWrapping; | |
| break; | |
| case 'mirror': | |
| texture.wrapT = MirroredRepeatWrapping; | |
| break; | |
| case 'none': | |
| case 'clamp': | |
| texture.wrapT = ClampToEdgeWrapping; | |
| break; | |
| default: | |
| texture.wrapT = RepeatWrapping; | |
| } | |
| switch ( texture2d.filter ) { | |
| case 'auto': | |
| texture.magFilter = LinearFilter; | |
| texture.minFilter = LinearMipmapLinearFilter; | |
| break; | |
| case 'linear': | |
| texture.magFilter = LinearFilter; | |
| texture.minFilter = LinearFilter; | |
| break; | |
| case 'nearest': | |
| texture.magFilter = NearestFilter; | |
| texture.minFilter = NearestFilter; | |
| break; | |
| default: | |
| texture.magFilter = LinearFilter; | |
| texture.minFilter = LinearMipmapLinearFilter; | |
| } | |
| return texture; | |
| } else { | |
| return null; | |
| } | |
| } | |
| function buildBasematerialsMeshes( basematerials, triangleProperties, meshData, objects, modelData, textureData, objectData ) { | |
| const objectPindex = objectData.pindex; | |
| const materialMap = {}; | |
| for ( let i = 0, l = triangleProperties.length; i < l; i ++ ) { | |
| const triangleProperty = triangleProperties[ i ]; | |
| const pindex = ( triangleProperty.p1 !== undefined ) ? triangleProperty.p1 : objectPindex; | |
| if ( materialMap[ pindex ] === undefined ) materialMap[ pindex ] = []; | |
| materialMap[ pindex ].push( triangleProperty ); | |
| } | |
| // | |
| const keys = Object.keys( materialMap ); | |
| const meshes = []; | |
| for ( let i = 0, l = keys.length; i < l; i ++ ) { | |
| const materialIndex = keys[ i ]; | |
| const trianglePropertiesProps = materialMap[ materialIndex ]; | |
| const basematerialData = basematerials.basematerials[ materialIndex ]; | |
| const material = getBuild( basematerialData, objects, modelData, textureData, objectData, buildBasematerial ); | |
| // | |
| const geometry = new BufferGeometry(); | |
| const positionData = []; | |
| const vertices = meshData.vertices; | |
| for ( let j = 0, jl = trianglePropertiesProps.length; j < jl; j ++ ) { | |
| const triangleProperty = trianglePropertiesProps[ j ]; | |
| positionData.push( vertices[ ( triangleProperty.v1 * 3 ) + 0 ] ); | |
| positionData.push( vertices[ ( triangleProperty.v1 * 3 ) + 1 ] ); | |
| positionData.push( vertices[ ( triangleProperty.v1 * 3 ) + 2 ] ); | |
| positionData.push( vertices[ ( triangleProperty.v2 * 3 ) + 0 ] ); | |
| positionData.push( vertices[ ( triangleProperty.v2 * 3 ) + 1 ] ); | |
| positionData.push( vertices[ ( triangleProperty.v2 * 3 ) + 2 ] ); | |
| positionData.push( vertices[ ( triangleProperty.v3 * 3 ) + 0 ] ); | |
| positionData.push( vertices[ ( triangleProperty.v3 * 3 ) + 1 ] ); | |
| positionData.push( vertices[ ( triangleProperty.v3 * 3 ) + 2 ] ); | |
| } | |
| geometry.setAttribute( 'position', new Float32BufferAttribute( positionData, 3 ) ); | |
| // | |
| const mesh = new Mesh( geometry, material ); | |
| meshes.push( mesh ); | |
| } | |
| return meshes; | |
| } | |
| function buildTexturedMesh( texture2dgroup, triangleProperties, meshData, objects, modelData, textureData, objectData ) { | |
| // geometry | |
| const geometry = new BufferGeometry(); | |
| const positionData = []; | |
| const uvData = []; | |
| const vertices = meshData.vertices; | |
| const uvs = texture2dgroup.uvs; | |
| for ( let i = 0, l = triangleProperties.length; i < l; i ++ ) { | |
| const triangleProperty = triangleProperties[ i ]; | |
| positionData.push( vertices[ ( triangleProperty.v1 * 3 ) + 0 ] ); | |
| positionData.push( vertices[ ( triangleProperty.v1 * 3 ) + 1 ] ); | |
| positionData.push( vertices[ ( triangleProperty.v1 * 3 ) + 2 ] ); | |
| positionData.push( vertices[ ( triangleProperty.v2 * 3 ) + 0 ] ); | |
| positionData.push( vertices[ ( triangleProperty.v2 * 3 ) + 1 ] ); | |
| positionData.push( vertices[ ( triangleProperty.v2 * 3 ) + 2 ] ); | |
| positionData.push( vertices[ ( triangleProperty.v3 * 3 ) + 0 ] ); | |
| positionData.push( vertices[ ( triangleProperty.v3 * 3 ) + 1 ] ); | |
| positionData.push( vertices[ ( triangleProperty.v3 * 3 ) + 2 ] ); | |
| // | |
| uvData.push( uvs[ ( triangleProperty.p1 * 2 ) + 0 ] ); | |
| uvData.push( uvs[ ( triangleProperty.p1 * 2 ) + 1 ] ); | |
| uvData.push( uvs[ ( triangleProperty.p2 * 2 ) + 0 ] ); | |
| uvData.push( uvs[ ( triangleProperty.p2 * 2 ) + 1 ] ); | |
| uvData.push( uvs[ ( triangleProperty.p3 * 2 ) + 0 ] ); | |
| uvData.push( uvs[ ( triangleProperty.p3 * 2 ) + 1 ] ); | |
| } | |
| geometry.setAttribute( 'position', new Float32BufferAttribute( positionData, 3 ) ); | |
| geometry.setAttribute( 'uv', new Float32BufferAttribute( uvData, 2 ) ); | |
| // material | |
| const texture = getBuild( texture2dgroup, objects, modelData, textureData, objectData, buildTexture ); | |
| const material = new MeshPhongMaterial( { map: texture, flatShading: true } ); | |
| // mesh | |
| const mesh = new Mesh( geometry, material ); | |
| return mesh; | |
| } | |
| function buildVertexColorMesh( colorgroup, triangleProperties, meshData, objectData ) { | |
| // geometry | |
| const geometry = new BufferGeometry(); | |
| const positionData = []; | |
| const colorData = []; | |
| const vertices = meshData.vertices; | |
| const colors = colorgroup.colors; | |
| for ( let i = 0, l = triangleProperties.length; i < l; i ++ ) { | |
| const triangleProperty = triangleProperties[ i ]; | |
| const v1 = triangleProperty.v1; | |
| const v2 = triangleProperty.v2; | |
| const v3 = triangleProperty.v3; | |
| positionData.push( vertices[ ( v1 * 3 ) + 0 ] ); | |
| positionData.push( vertices[ ( v1 * 3 ) + 1 ] ); | |
| positionData.push( vertices[ ( v1 * 3 ) + 2 ] ); | |
| positionData.push( vertices[ ( v2 * 3 ) + 0 ] ); | |
| positionData.push( vertices[ ( v2 * 3 ) + 1 ] ); | |
| positionData.push( vertices[ ( v2 * 3 ) + 2 ] ); | |
| positionData.push( vertices[ ( v3 * 3 ) + 0 ] ); | |
| positionData.push( vertices[ ( v3 * 3 ) + 1 ] ); | |
| positionData.push( vertices[ ( v3 * 3 ) + 2 ] ); | |
| // | |
| const p1 = ( triangleProperty.p1 !== undefined ) ? triangleProperty.p1 : objectData.pindex; | |
| const p2 = ( triangleProperty.p2 !== undefined ) ? triangleProperty.p2 : p1; | |
| const p3 = ( triangleProperty.p3 !== undefined ) ? triangleProperty.p3 : p1; | |
| colorData.push( colors[ ( p1 * 3 ) + 0 ] ); | |
| colorData.push( colors[ ( p1 * 3 ) + 1 ] ); | |
| colorData.push( colors[ ( p1 * 3 ) + 2 ] ); | |
| colorData.push( colors[ ( p2 * 3 ) + 0 ] ); | |
| colorData.push( colors[ ( p2 * 3 ) + 1 ] ); | |
| colorData.push( colors[ ( p2 * 3 ) + 2 ] ); | |
| colorData.push( colors[ ( p3 * 3 ) + 0 ] ); | |
| colorData.push( colors[ ( p3 * 3 ) + 1 ] ); | |
| colorData.push( colors[ ( p3 * 3 ) + 2 ] ); | |
| } | |
| geometry.setAttribute( 'position', new Float32BufferAttribute( positionData, 3 ) ); | |
| geometry.setAttribute( 'color', new Float32BufferAttribute( colorData, 3 ) ); | |
| // material | |
| const material = new MeshPhongMaterial( { vertexColors: true, flatShading: true } ); | |
| // mesh | |
| const mesh = new Mesh( geometry, material ); | |
| return mesh; | |
| } | |
| function buildDefaultMesh( meshData ) { | |
| const geometry = new BufferGeometry(); | |
| geometry.setIndex( new BufferAttribute( meshData[ 'triangles' ], 1 ) ); | |
| geometry.setAttribute( 'position', new BufferAttribute( meshData[ 'vertices' ], 3 ) ); | |
| const material = new MeshPhongMaterial( { | |
| name: Loader.DEFAULT_MATERIAL_NAME, | |
| color: 0xffffff, | |
| flatShading: true | |
| } ); | |
| const mesh = new Mesh( geometry, material ); | |
| return mesh; | |
| } | |
| function buildMeshes( resourceMap, meshData, objects, modelData, textureData, objectData ) { | |
| const keys = Object.keys( resourceMap ); | |
| const meshes = []; | |
| for ( let i = 0, il = keys.length; i < il; i ++ ) { | |
| const resourceId = keys[ i ]; | |
| const triangleProperties = resourceMap[ resourceId ]; | |
| const resourceType = getResourceType( resourceId, modelData ); | |
| switch ( resourceType ) { | |
| case 'material': | |
| const basematerials = modelData.resources.basematerials[ resourceId ]; | |
| const newMeshes = buildBasematerialsMeshes( basematerials, triangleProperties, meshData, objects, modelData, textureData, objectData ); | |
| for ( let j = 0, jl = newMeshes.length; j < jl; j ++ ) { | |
| meshes.push( newMeshes[ j ] ); | |
| } | |
| break; | |
| case 'texture': | |
| const texture2dgroup = modelData.resources.texture2dgroup[ resourceId ]; | |
| meshes.push( buildTexturedMesh( texture2dgroup, triangleProperties, meshData, objects, modelData, textureData, objectData ) ); | |
| break; | |
| case 'vertexColors': | |
| const colorgroup = modelData.resources.colorgroup[ resourceId ]; | |
| meshes.push( buildVertexColorMesh( colorgroup, triangleProperties, meshData, objectData ) ); | |
| break; | |
| case 'default': | |
| meshes.push( buildDefaultMesh( meshData ) ); | |
| break; | |
| default: | |
| console.error( 'THREE.3MFLoader: Unsupported resource type.' ); | |
| } | |
| } | |
| if ( objectData.name ) { | |
| for ( let i = 0; i < meshes.length; i ++ ) { | |
| meshes[ i ].name = objectData.name; | |
| } | |
| } | |
| return meshes; | |
| } | |
| function getResourceType( pid, modelData ) { | |
| if ( modelData.resources.texture2dgroup[ pid ] !== undefined ) { | |
| return 'texture'; | |
| } else if ( modelData.resources.basematerials[ pid ] !== undefined ) { | |
| return 'material'; | |
| } else if ( modelData.resources.colorgroup[ pid ] !== undefined ) { | |
| return 'vertexColors'; | |
| } else if ( pid === 'default' ) { | |
| return 'default'; | |
| } else { | |
| return undefined; | |
| } | |
| } | |
| function analyzeObject( meshData, objectData ) { | |
| const resourceMap = {}; | |
| const triangleProperties = meshData[ 'triangleProperties' ]; | |
| const objectPid = objectData.pid; | |
| for ( let i = 0, l = triangleProperties.length; i < l; i ++ ) { | |
| const triangleProperty = triangleProperties[ i ]; | |
| let pid = ( triangleProperty.pid !== undefined ) ? triangleProperty.pid : objectPid; | |
| if ( pid === undefined ) pid = 'default'; | |
| if ( resourceMap[ pid ] === undefined ) resourceMap[ pid ] = []; | |
| resourceMap[ pid ].push( triangleProperty ); | |
| } | |
| return resourceMap; | |
| } | |
| function buildGroup( meshData, objects, modelData, textureData, objectData ) { | |
| const group = new Group(); | |
| const resourceMap = analyzeObject( meshData, objectData ); | |
| const meshes = buildMeshes( resourceMap, meshData, objects, modelData, textureData, objectData ); | |
| for ( let i = 0, l = meshes.length; i < l; i ++ ) { | |
| group.add( meshes[ i ] ); | |
| } | |
| return group; | |
| } | |
| function applyExtensions( extensions, meshData, modelXml ) { | |
| if ( ! extensions ) { | |
| return; | |
| } | |
| const availableExtensions = []; | |
| const keys = Object.keys( extensions ); | |
| for ( let i = 0; i < keys.length; i ++ ) { | |
| const ns = keys[ i ]; | |
| for ( let j = 0; j < scope.availableExtensions.length; j ++ ) { | |
| const extension = scope.availableExtensions[ j ]; | |
| if ( extension.ns === ns ) { | |
| availableExtensions.push( extension ); | |
| } | |
| } | |
| } | |
| for ( let i = 0; i < availableExtensions.length; i ++ ) { | |
| const extension = availableExtensions[ i ]; | |
| extension.apply( modelXml, extensions[ extension[ 'ns' ] ], meshData ); | |
| } | |
| } | |
| function getBuild( data, objects, modelData, textureData, objectData, builder ) { | |
| if ( data.build !== undefined ) return data.build; | |
| data.build = builder( data, objects, modelData, textureData, objectData ); | |
| return data.build; | |
| } | |
| function buildBasematerial( materialData, objects, modelData ) { | |
| let material; | |
| const displaypropertiesid = materialData.displaypropertiesid; | |
| const pbmetallicdisplayproperties = modelData.resources.pbmetallicdisplayproperties; | |
| if ( displaypropertiesid !== null && pbmetallicdisplayproperties[ displaypropertiesid ] !== undefined ) { | |
| // metallic display property, use StandardMaterial | |
| const pbmetallicdisplayproperty = pbmetallicdisplayproperties[ displaypropertiesid ]; | |
| const metallicData = pbmetallicdisplayproperty.data[ materialData.index ]; | |
| material = new MeshStandardMaterial( { flatShading: true, roughness: metallicData.roughness, metalness: metallicData.metallicness } ); | |
| } else { | |
| // otherwise use PhongMaterial | |
| material = new MeshPhongMaterial( { flatShading: true } ); | |
| } | |
| material.name = materialData.name; | |
| // displaycolor MUST be specified with a value of a 6 or 8 digit hexadecimal number, e.g. "#RRGGBB" or "#RRGGBBAA" | |
| const displaycolor = materialData.displaycolor; | |
| const color = displaycolor.substring( 0, 7 ); | |
| material.color.setStyle( color, COLOR_SPACE_3MF ); | |
| // process alpha if set | |
| if ( displaycolor.length === 9 ) { | |
| material.opacity = parseInt( displaycolor.charAt( 7 ) + displaycolor.charAt( 8 ), 16 ) / 255; | |
| } | |
| return material; | |
| } | |
| function buildComposite( compositeData, objects, modelData, textureData ) { | |
| const composite = new Group(); | |
| for ( let j = 0; j < compositeData.length; j ++ ) { | |
| const component = compositeData[ j ]; | |
| let build = objects[ component.objectId ]; | |
| if ( build === undefined ) { | |
| buildObject( component.objectId, objects, modelData, textureData ); | |
| build = objects[ component.objectId ]; | |
| } | |
| const object3D = build.clone(); | |
| // apply component transform | |
| const transform = component.transform; | |
| if ( transform ) { | |
| object3D.applyMatrix4( transform ); | |
| } | |
| composite.add( object3D ); | |
| } | |
| return composite; | |
| } | |
| function buildObject( objectId, objects, modelData, textureData ) { | |
| const objectData = modelData[ 'resources' ][ 'object' ][ objectId ]; | |
| if ( objectData[ 'mesh' ] ) { | |
| const meshData = objectData[ 'mesh' ]; | |
| const extensions = modelData[ 'extensions' ]; | |
| const modelXml = modelData[ 'xml' ]; | |
| applyExtensions( extensions, meshData, modelXml ); | |
| objects[ objectData.id ] = getBuild( meshData, objects, modelData, textureData, objectData, buildGroup ); | |
| } else { | |
| const compositeData = objectData[ 'components' ]; | |
| objects[ objectData.id ] = getBuild( compositeData, objects, modelData, textureData, objectData, buildComposite ); | |
| } | |
| if ( objectData.name ) { | |
| objects[ objectData.id ].name = objectData.name; | |
| } | |
| } | |
| function buildObjects( data3mf ) { | |
| const modelsData = data3mf.model; | |
| const modelRels = data3mf.modelRels; | |
| const objects = {}; | |
| const modelsKeys = Object.keys( modelsData ); | |
| const textureData = {}; | |
| // evaluate model relationships to textures | |
| if ( modelRels ) { | |
| for ( let i = 0, l = modelRels.length; i < l; i ++ ) { | |
| const modelRel = modelRels[ i ]; | |
| const textureKey = modelRel.target.substring( 1 ); | |
| if ( data3mf.texture[ textureKey ] ) { | |
| textureData[ modelRel.target ] = data3mf.texture[ textureKey ]; | |
| } | |
| } | |
| } | |
| // start build | |
| for ( let i = 0; i < modelsKeys.length; i ++ ) { | |
| const modelsKey = modelsKeys[ i ]; | |
| const modelData = modelsData[ modelsKey ]; | |
| const objectIds = Object.keys( modelData[ 'resources' ][ 'object' ] ); | |
| for ( let j = 0; j < objectIds.length; j ++ ) { | |
| const objectId = objectIds[ j ]; | |
| buildObject( objectId, objects, modelData, textureData ); | |
| } | |
| } | |
| return objects; | |
| } | |
| function fetch3DModelPart( rels ) { | |
| for ( let i = 0; i < rels.length; i ++ ) { | |
| const rel = rels[ i ]; | |
| const extension = rel.target.split( '.' ).pop(); | |
| if ( extension.toLowerCase() === 'model' ) return rel; | |
| } | |
| } | |
| function build( objects, data3mf ) { | |
| const group = new Group(); | |
| const relationship = fetch3DModelPart( data3mf[ 'rels' ] ); | |
| const buildData = data3mf.model[ relationship[ 'target' ].substring( 1 ) ][ 'build' ]; | |
| for ( let i = 0; i < buildData.length; i ++ ) { | |
| const buildItem = buildData[ i ]; | |
| const object3D = objects[ buildItem[ 'objectId' ] ].clone(); | |
| // apply transform | |
| const transform = buildItem[ 'transform' ]; | |
| if ( transform ) { | |
| object3D.applyMatrix4( transform ); | |
| } | |
| group.add( object3D ); | |
| } | |
| return group; | |
| } | |
| const data3mf = loadDocument( data ); | |
| const objects = buildObjects( data3mf ); | |
| return build( objects, data3mf ); | |
| } | |
| addExtension( extension ) { | |
| this.availableExtensions.push( extension ); | |
| } | |
| } | |
| export { ThreeMFLoader }; | |
Xet Storage Details
- Size:
- 34.5 kB
- Xet hash:
- a41c134411542b0862a4beb4c627b7321ab4b02e4b471f643ded4af74faf66be
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.