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

script.ts 2.0KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. import {
  2. _testFinish,
  3. _testStart,
  4. IObject3D,
  5. LoadingScreenPlugin,
  6. RenderTargetPreviewPlugin,
  7. ThreeViewer,
  8. } from 'threepipe'
  9. import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
  10. const viewer = new ThreeViewer({
  11. canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
  12. msaa: false,
  13. rgbm: true,
  14. zPrepass: false,
  15. plugins: [LoadingScreenPlugin],
  16. })
  17. async function init() {
  18. const targetPreview = viewer.addPluginSync(RenderTargetPreviewPlugin)
  19. targetPreview.addTarget(()=>viewer.renderManager.composerTarget, 'composer-1', false, false)
  20. viewer.renderManager.renderPass.preserveTransparentTarget = true
  21. targetPreview.addTarget(()=>viewer.renderManager.renderPass.transparentTarget, 'transparent', true, true)
  22. targetPreview.addTarget(()=>viewer.renderManager.composerTarget2, 'composer-2', false, false)
  23. await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
  24. const [model, model2] = await Promise.all([
  25. viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/IridescenceLamp.glb', {
  26. autoCenter: true,
  27. autoScale: true,
  28. }),
  29. viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/IridescentDishWithOlives.glb', {
  30. autoCenter: true,
  31. autoScale: true,
  32. }),
  33. ])
  34. if (!model || !model2) {
  35. console.error('model not loaded')
  36. return
  37. }
  38. model.position.x = -1
  39. model2.position.x = 1
  40. model2.position.y = -1.2
  41. const ui = viewer.addPluginSync(new TweakpaneUiPlugin(false))
  42. const m1 = model?.getObjectByName('lamp_transmission')
  43. const m2 = model2?.getObjectByName('glassCover')
  44. const materials = [...m1?.materials || [], ...m2?.materials || []]
  45. for (const material of materials) {
  46. const config = material.uiConfig
  47. if (!config) continue
  48. ui.appendChild(config)
  49. }
  50. }
  51. _testStart()
  52. init().finally(_testFinish)