threepipe
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

script.ts 1.5KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. import {_testFinish, downloadBlob, IObject3D, LoadingScreenPlugin, Rhino3dmLoadPlugin, ThreeViewer} from 'threepipe'
  2. const viewer = new ThreeViewer({
  3. canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
  4. msaa: true,
  5. plugins: [LoadingScreenPlugin],
  6. })
  7. async function init() {
  8. viewer.addPluginSync(Rhino3dmLoadPlugin)
  9. // load a 3dm file
  10. const result = await viewer.load<IObject3D>('https://threejs.org/examples/models/3dm/Rhino_Logo.3dm', {
  11. autoCenter: true,
  12. autoScale: true,
  13. })
  14. // export to glb
  15. const blob = await viewer.export(result)
  16. // const blob = await viewer.exportScene(); // its possible to export the whole scene also
  17. if (!blob || blob.ext !== 'glb') {
  18. console.error('Unable to export scene')
  19. return
  20. }
  21. // clear scene
  22. viewer.scene.disposeSceneModels()
  23. // load environment map and glb
  24. await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
  25. await viewer.load({
  26. path: 'file.glb',
  27. file: blob,
  28. })
  29. // add download button
  30. const downloadButton = document.createElement('button')
  31. downloadButton.innerText = 'Download .glb'
  32. downloadButton.style.position = 'absolute'
  33. downloadButton.style.bottom = '3rem'
  34. downloadButton.style.right = '3rem'
  35. downloadButton.style.zIndex = '10000'
  36. downloadButton.onclick = () => downloadBlob(blob, 'file.glb')
  37. document.body.appendChild(downloadButton)
  38. }
  39. init().finally(_testFinish)