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

script.ts 1.0KB

1234567891011121314151617181920212223242526272829303132
  1. import {
  2. _testFinish, _testStart,
  3. DepthBufferPlugin,
  4. IObject3D,
  5. LoadingScreenPlugin,
  6. ThreeViewer,
  7. TonemapPlugin,
  8. UnsignedByteType,
  9. } from 'threepipe'
  10. import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
  11. async function init() {
  12. const viewer = new ThreeViewer({
  13. canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
  14. tonemap: true, // this is true by default
  15. plugins: [LoadingScreenPlugin],
  16. })
  17. // A GBuffer(depth buffer here) is required for the `tonemapBackground` flag in TonemapPlugin to work
  18. viewer.addPluginSync(new DepthBufferPlugin(UnsignedByteType, true))
  19. await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
  20. await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf')
  21. const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))
  22. ui.setupPluginUi(TonemapPlugin)
  23. }
  24. _testStart()
  25. init().finally(_testFinish)