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

script.ts 1.4KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. import {
  2. _testFinish, _testStart,
  3. CameraViewPlugin,
  4. LoadingScreenPlugin,
  5. Object3DGeneratorPlugin,
  6. Object3DWidgetsPlugin,
  7. PickingPlugin,
  8. ThreeViewer,
  9. } from 'threepipe'
  10. import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
  11. import {HierarchyUiPlugin} from '@threepipe/plugin-tweakpane-editor'
  12. async function init() {
  13. const viewer = new ThreeViewer({
  14. canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
  15. msaa: true,
  16. plugins: [PickingPlugin, CameraViewPlugin, Object3DWidgetsPlugin, HierarchyUiPlugin, LoadingScreenPlugin],
  17. })
  18. const generator = viewer.addPluginSync(Object3DGeneratorPlugin)
  19. viewer.scene.setBackgroundColor('#444466')
  20. await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
  21. await viewer.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', {
  22. autoCenter: true,
  23. autoScale: true,
  24. })
  25. console.log(generator.generators)
  26. const object = generator.generate('light-directional', {color: 0x00ff00})
  27. console.log(object)
  28. viewer.getPlugin(PickingPlugin)?.setSelectedObject(object)
  29. const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))
  30. ui.setupPluginUi(Object3DGeneratorPlugin)!.expanded = true
  31. ui.setupPluginUi(HierarchyUiPlugin)
  32. ui.setupPluginUi(PickingPlugin)
  33. }
  34. _testStart()
  35. init().finally(_testFinish)