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

script.ts 1.4KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. import {_testFinish, BoxGeometry, Color, Mesh, PhysicalMaterial, ThreeViewer, TonemapPlugin} from 'threepipe'
  2. import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
  3. async function init() {
  4. const viewer = new ThreeViewer({
  5. canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
  6. rgbm: false,
  7. })
  8. viewer.scene.backgroundColor = new Color().set('black')
  9. viewer.getPlugin(TonemapPlugin)!.exposure = 0.04
  10. // viewer.renderManager.screenPass.outputColorSpace = LinearSRGBColorSpace
  11. const box = new BoxGeometry(0.5, 0.5, 0.5)
  12. const material = new PhysicalMaterial({
  13. color: 'white',
  14. emissive: 'white',
  15. emissiveIntensity: 1,
  16. })
  17. const n = 5
  18. for (let i = 0; i < n * n; i++) {
  19. const mesh = new Mesh()
  20. const mat = material.clone()
  21. mat.emissiveIntensity = (1 - i / (n * n)) * 16
  22. mesh.material = mat
  23. mesh.geometry = box
  24. mesh.position.x = Math.floor(n / 2) - Math.floor(i % n)
  25. mesh.position.y = Math.floor(i / n) - Math.floor(n / 2)
  26. mesh.position.multiplyScalar(0.5)
  27. viewer.scene.addObject(mesh)
  28. console.log(mat.emissiveIntensity)
  29. }
  30. const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))
  31. ui.setupPluginUi(TonemapPlugin)
  32. ui.appendChild(viewer.renderManager.screenPass.uiConfig)
  33. }
  34. init().then(_testFinish)