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

index.html 1.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Blend Load</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <!-- Import maps polyfill -->
  8. <!-- Remove this when import maps will be widely supported -->
  9. <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
  10. <script type="importmap">
  11. {
  12. "imports": {
  13. "threepipe": "./../../dist/index.mjs",
  14. "@threepipe/plugin-blend-importer": "./../../plugins/blend-importer/dist/index.mjs"
  15. }
  16. }
  17. </script>
  18. <style id="example-style">
  19. html, body, #canvas-container, #mcanvas {
  20. width: 100%;
  21. height: 100%;
  22. margin: 0;
  23. overflow: hidden;
  24. }
  25. </style>
  26. <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
  27. <script id="example-script" type="module">
  28. import {_testFinish, ThreeViewer} from 'threepipe'
  29. import {BlendLoadPlugin} from '@threepipe/plugin-blend-importer'
  30. const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas')})
  31. viewer.addPluginsSync([BlendLoadPlugin])
  32. async function init() {
  33. await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
  34. const result = await viewer.load('https://asset-samples.threepipe.org/minimal/default-cube.blend', {
  35. autoCenter: true,
  36. autoScale: false,
  37. })
  38. console.log(result)
  39. }
  40. init().then(_testFinish)
  41. </script>
  42. </head>
  43. <body>
  44. <div id="canvas-container">
  45. <canvas id="mcanvas"></canvas>
  46. </div>
  47. </body>