threepipe
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

plugin-assimpjs.md 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. ---
  2. prev:
  3. text: '@threepipe/plugin-3d-tiles-renderer'
  4. link: './plugin-3d-tiles-renderer'
  5. next: false
  6. ---
  7. # @threepipe/plugin-assimpjs
  8. This package exports [AssimpJsPlugin](https://threepipe.org/plugins/assimpjs/docs/classes/AssimpJsPlugin.html) which loads the assimpjs library and provides `ajs` interface.
  9. [Example](https://threepipe.org/examples/#assimpjs-plugin/) —
  10. [Source Code](https://github.com/repalash/threepipe/blob/master/plugins/assimpjs/src/index.ts) —
  11. [API Reference](https://threepipe.org/plugins/assimpjs/docs)
  12. [![NPM Package](https://img.shields.io/npm/v/@threepipe/plugin-assimpjs.svg)](https://www.npmjs.com/package/@threepipe/plugin-assimpjs)
  13. ```bash
  14. npm install @threepipe/plugin-assimpjs
  15. ```
  16. ## Sample Usage
  17. ### Convert any format to glTF/glb and load in viewer
  18. Any set of 3d files can be loaded into assimp, and converted to glTF/glb format. The converted files can then be loaded into the viewer as blobs.
  19. ```typescript
  20. import {ThreeViewer} from 'threepipe'
  21. import {AssimpJsPlugin} from '@threepipe/plugin-assimpjs'
  22. const viewer = new ThreeViewer({...})
  23. const assimpjs = viewer.addPluginSync(AssimpJsPlugin)
  24. await assimp.init() // load the assimpjs library and wait for it to be ready. It also loads automatically when plugin is added to the viewer if autoInit is true.
  25. // Prepare a list of files to load
  26. const files = [
  27. 'https://threejs.org/examples/models/obj/male02/male02.obj',
  28. ]
  29. // Download the files
  30. const fe = files.map(async f=>fetch(`${f}`).then(async t=>t.arrayBuffer()))
  31. const responses = await Promise.all(fe)
  32. const fileList: Record<string, ArrayBuffer> = {}
  33. for (let i = 0; i < files.length; i++) {
  34. fileList[files[i]] = responses[i]
  35. }
  36. const fbx = assimp.convertFiles(fileList, 'glb2')
  37. if (!fbx) {
  38. console.error('Failed to convert files to glb')
  39. return
  40. }
  41. // load the glb file
  42. await viewer.load<IObject3D>({path: 'file.glb', file: glb})
  43. ```
  44. Check the [assimpjs-plugin](https://threepipe.org/examples/#assimpjs-plugin/) example for a live demo.
  45. ### Export to FBX / Convert to FBX
  46. Assimp includes a FBX exporter, which can be used to convert any 3D file format to FBX.
  47. To export the current scene to FBX, the scene can be exported to glTF/glb format, and then converted to FBX using the `AssimpJsPlugin`'s `convertFiles` function.
  48. ```typescript
  49. import {ThreeViewer, downloadBlob} from 'threepipe'
  50. import {AssimpJsPlugin} from '@threepipe/plugin-assimpjs'
  51. const viewer = new ThreeViewer({...})
  52. const assimpjs = viewer.addPluginSync(AssimpJsPlugin)
  53. await assimp.init() // load the assimpjs library and wait for it to be ready. It also loads automatically when plugin is added to the viewer if autoInit is true.
  54. // load some models
  55. const result = await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf')
  56. // export to glb
  57. const blob = await viewer.export(result, {
  58. embedUrlImages: true,
  59. })
  60. fbxBlob = assimp.convertFiles({['file.glb']: await blob.arrayBuffer()}, 'fbx')
  61. if (!fbxBlob) {
  62. console.error('Failed to convert files to fbx')
  63. return
  64. }
  65. // download the fbx file
  66. downloadBlob(fbxBlob, 'model.fbx')
  67. ```
  68. Check full example - [fbx-export](https://threepipe.org/examples/#fbx-export/).