| * Models | * Models | ||||
| * 3dm - Using [Rhino3dmLoadPlugin](#Rhino3dmLoadPlugin) | * 3dm - Using [Rhino3dmLoadPlugin](#Rhino3dmLoadPlugin) | ||||
| * ply - Using [PLYLoadPlugin](#PLYLoadPlugin) | * ply - Using [PLYLoadPlugin](#PLYLoadPlugin) | ||||
| * usdz - Using [USDZLoadPlugin](#USDZLoadPlugin) | |||||
| * stl - Using [STLLoadPlugin](#STLLoadPlugin) | * stl - Using [STLLoadPlugin](#STLLoadPlugin) | ||||
| * ktx - Using [KTXLoadPlugin](#KTXLoadPlugin) | * ktx - Using [KTXLoadPlugin](#KTXLoadPlugin) | ||||
| * ktx2 - Using [KTX2LoadPlugin](#KTX2LoadPlugin) | * ktx2 - Using [KTX2LoadPlugin](#KTX2LoadPlugin) | ||||
| const mesh = await viewer.load('file.ply') | const mesh = await viewer.load('file.ply') | ||||
| ``` | ``` | ||||
| ## USDZLoadPlugin | |||||
| Example: https://threepipe.org/examples/#usdz-load/ | |||||
| Source Code: [src/plugins/import/USDZLoadPlugin.ts](./src/plugins/import/USDZLoadPlugin.ts) | |||||
| API Reference: [USDZLoadPlugin](https://threepipe.org/docs/classes/USDZLoadPlugin.html) | |||||
| Adds support for loading .usdz and .usda ([Universal Scene Description](https://graphics.pixar.com/usd/docs/index.html)) files. | |||||
| ```typescript | |||||
| import {USDZLoadPlugin} from 'threepipe' | |||||
| viewer.addPluginSync(new USDZLoadPlugin()) | |||||
| const mesh = await viewer.load('file.usdz') | |||||
| const mesh2 = await viewer.load('file.usda') | |||||
| ``` | |||||
| ## STLLoadPlugin | ## STLLoadPlugin | ||||
| Example: https://threepipe.org/examples/#stl-load/ | Example: https://threepipe.org/examples/#stl-load/ |
| <li><a href="./hdr-load/">HDR Load </a></li> | <li><a href="./hdr-load/">HDR Load </a></li> | ||||
| <li><a href="./exr-load/">EXR Load </a></li> | <li><a href="./exr-load/">EXR Load </a></li> | ||||
| <li><a href="./image-load/">Image(png, jpeg, svg, ico, webp, avif) Load </a></li> | <li><a href="./image-load/">Image(png, jpeg, svg, ico, webp, avif) Load </a></li> | ||||
| <li><a href="./usdz-load/">USDZ, USDA Load </a></li> | |||||
| <li><a href="./ply-load/">PLY Load </a></li> | <li><a href="./ply-load/">PLY Load </a></li> | ||||
| <li><a href="./stl-load/">STL Load </a></li> | <li><a href="./stl-load/">STL Load </a></li> | ||||
| <li><a href="./ktx2-load/">KTX2 Load </a></li> | <li><a href="./ktx2-load/">KTX2 Load </a></li> |
| <!DOCTYPE html> | |||||
| <html lang="en"> | |||||
| <head> | |||||
| <meta charset="UTF-8"> | |||||
| <title>USDZ / USDA Load</title> | |||||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |||||
| <!-- Import maps polyfill --> | |||||
| <!-- Remove this when import maps will be widely supported --> | |||||
| <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script> | |||||
| <script type="importmap"> | |||||
| { | |||||
| "imports": { | |||||
| "threepipe": "./../../dist/index.mjs" | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style id="example-style"> | |||||
| html, body, #canvas-container, #mcanvas { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| margin: 0; | |||||
| overflow: hidden; | |||||
| } | |||||
| </style> | |||||
| <script type="module" src="../examples-utils/simple-code-preview.mjs"></script> | |||||
| <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script> | |||||
| </head> | |||||
| <body> | |||||
| <div id="canvas-container"> | |||||
| <canvas id="mcanvas"></canvas> | |||||
| </div> | |||||
| </body> |
| import {_testFinish, IObject3D, ThreeViewer, USDZLoadPlugin} from 'threepipe' | |||||
| async function init() { | |||||
| const viewer = new ThreeViewer({ | |||||
| canvas: document.getElementById('mcanvas') as HTMLCanvasElement, | |||||
| msaa: true, | |||||
| dropzone: { | |||||
| allowedExtensions: ['usdz', 'usda', 'hdr', 'exr'], | |||||
| addOptions: { | |||||
| disposeSceneObjects: true, | |||||
| autoSetEnvironment: true, // when hdr is dropped | |||||
| autoSetBackground: true, | |||||
| }, | |||||
| }, | |||||
| }) | |||||
| viewer.addPluginSync(USDZLoadPlugin) | |||||
| const options = { | |||||
| autoCenter: true, | |||||
| autoScale: true, | |||||
| } | |||||
| await Promise.all([ | |||||
| viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr'), | |||||
| viewer.load<IObject3D>('https://threejs.org/examples/models/usdz/saeukkang.usdz', options), | |||||
| ]) | |||||
| } | |||||
| init().then(_testFinish) |
| import {IViewerPluginSync, ThreeViewer} from '../../viewer' | |||||
| import {Importer} from '../../assetmanager' | |||||
| import {USDZLoader} from 'three/examples/jsm/loaders/USDZLoader.js' | |||||
| import {Group, Mesh} from 'three' | |||||
| import {Zippable, zipSync} from 'three/examples/jsm/libs/fflate.module.js' | |||||
| /** | |||||
| * Adds support for loading `.usdz`, `model/vnd.usd+zip` and `.usda`, `model/vnd.usda` files and data uris | |||||
| * @category Plugins | |||||
| */ | |||||
| export class USDZLoadPlugin implements IViewerPluginSync { | |||||
| declare ['constructor']: typeof USDZLoadPlugin | |||||
| public static readonly PluginType = 'USDZLoadPlugin' | |||||
| private _importer = new Importer(class extends USDZLoader { | |||||
| private _currentUrl = '' | |||||
| async loadAsync(url: string, onProgress?: (event: ProgressEvent) => void): Promise<Mesh> { | |||||
| this._currentUrl = url | |||||
| const res = await super.loadAsync(url, onProgress) | |||||
| this._currentUrl = '' | |||||
| return res | |||||
| } | |||||
| parse(buffer: ArrayBuffer): Group { | |||||
| // todo make changes in three.js to allow passing unzipped buffer directly for usda | |||||
| if (this._currentUrl.endsWith('.usda')) { | |||||
| const filename = this._currentUrl.split('/').pop() | |||||
| if (filename) { | |||||
| const zip: Zippable = {} | |||||
| zip[filename] = new Uint8Array(buffer) | |||||
| buffer = zipSync(zip).buffer | |||||
| } | |||||
| } | |||||
| return super.parse(buffer) | |||||
| } | |||||
| }, ['usdz', 'usda'], ['model/vnd.usd+zip', 'model/vnd.usdz+zip', 'model/vnd.usda'], false) | |||||
| onAdded(viewer: ThreeViewer) { | |||||
| viewer.assetManager.importer.addImporter(this._importer) | |||||
| } | |||||
| onRemove(viewer: ThreeViewer) { | |||||
| viewer.assetManager.importer.removeImporter(this._importer) | |||||
| } | |||||
| dispose() { | |||||
| return | |||||
| } | |||||
| } |
| // import | // import | ||||
| export {Rhino3dmLoadPlugin} from './import/Rhino3dmLoadPlugin' | export {Rhino3dmLoadPlugin} from './import/Rhino3dmLoadPlugin' | ||||
| export {USDZLoadPlugin} from './import/USDZLoadPlugin' | |||||
| export {PLYLoadPlugin} from './import/PLYLoadPlugin' | export {PLYLoadPlugin} from './import/PLYLoadPlugin' | ||||
| export {STLLoadPlugin} from './import/STLLoadPlugin' | export {STLLoadPlugin} from './import/STLLoadPlugin' | ||||
| export {KTXLoadPlugin} from './import/KTXLoadPlugin' | export {KTXLoadPlugin} from './import/KTXLoadPlugin' |