@operato/scene-visualizer 1.2.31 → 1.2.37

package/src/three-space.ts

@@ -0,0 +1,732 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { Component, ComponentNature, Container, error, FPS, Layout, Properties } from '@hatiolab/things-scene'
+import * as THREE from 'three'
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
+import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
+
+import ThreeControls from './three-controls'
+import './three-layout'
+import { RealObject } from './threed/real-object'
+import { ThreeDimensionalContainer } from './threed/three-dimensional-container'
+import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer'
+import { createFloor } from './threed/floor/floor'
+import { RealObjectDomElement } from './threed'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'select',
+      label: 'precision',
+      name: 'precision',
+      property: {
+        options: [
+          {
+            display: 'High',
+            value: 'highp'
+          },
+          {
+            display: 'Medium',
+            value: 'mediump'
+          },
+          {
+            display: 'Low',
+            value: 'lowp'
+          }
+        ]
+      }
+    },
+    {
+      type: 'checkbox',
+      label: 'anti-alias',
+      name: 'antialias',
+      property: 'antialias'
+    },
+    {
+      type: 'checkbox',
+      label: 'controller',
+      name: 'controller',
+      property: 'controller'
+    }
+  ],
+  help: 'scene/component/three-space'
+}
+
+const WEBGL_NO_SUPPORT_TEXT = 'WebGL no support'
+
+export class ThreeSpace extends Container implements ThreeDimensionalContainer {
+  _scene3d?: THREE.Scene
+  _initalizeComplete?: Promise<void>
+
+  _mixer?: THREE.AnimationMixer
+
+  _camera?: THREE.PerspectiveCamera
+  _renderer3d?: THREE.WebGLRenderer
+
+  _mouse?: THREE.Vector2
+
+  _clock?: THREE.Clock
+
+  _controls?: any
+  _onFocus?: (e: FocusEvent) => void
+  _onResize?: (e: Event) => void
+  _noSupportWebgl: boolean = false
+
+  _raycaster = new THREE.Raycaster()
+
+  _lastFocused?: RealObject
+  _lastHovered?: RealObject
+
+  private _css3DScene?: THREE.Scene
+  private _css3DRenderer?: CSS3DRenderer
+
+  composer?: EffectComposer
+
+  containable(component: Component) {
+    return component.is3dish()
+  }
+
+  is3dContainer() {
+    return true
+  }
+
+  /* THREE Object related .. */
+
+  createObjects(components: Component[]) {
+    for (let component of components) {
+      try {
+        var item = component.realObject
+
+        if (item) {
+          if (component.isHTMLElement()) {
+            this.css3DScene.add((item as RealObjectDomElement).object3d)
+          } else {
+            this._scene3d!.add(item.object3d)
+          }
+        }
+      } catch (err) {
+        error(err)
+      }
+    }
+  }
+
+  destroy_scene3d() {
+    this.stop()
+
+    window.removeEventListener('focus', this._onFocus!)
+    window.removeEventListener('resize', this._onResize!)
+
+    if (this._renderer3d) this._renderer3d.clear()
+
+    if (this._controls?.autoRotate) {
+      this._controls.doAutoRotate(false)
+    }
+
+    delete this._renderer3d
+    delete this._camera
+    delete this._controls
+
+    if (this._scene3d) {
+      let children = this._scene3d.children.slice()
+      for (let i in children) {
+        let child = children[i] as any
+        if (child.dispose) child.dispose()
+        if (child.geometry && child.geometry.dispose) child.geometry.dispose()
+        if (child.material && child.material.dispose) child.material.dispose()
+        if (child.texture && child.texture.dispose) child.texture.dispose()
+        this._scene3d.remove(child)
+      }
+    }
+
+    delete this._scene3d
+  }
+
+  update() {
+    var { width, height } = this.bounds
+
+    var {
+      fov = 45,
+      near = 0.1,
+      far = 20000,
+      antialias = true,
+      precision = 'highp',
+      cameraX,
+      cameraY,
+      cameraZ,
+      exposure = 2.5
+    } = this.state
+
+    var components = this.components || []
+
+    // SCENE
+    this._scene3d = new THREE.Scene()
+
+    // CAMERA
+    var aspect = width / height
+
+    this._camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
+
+    var cameraXPos = height * 0.8,
+      cameraYPos = width * 0.8,
+      cameraZPos = Math.min(500, Math.floor(Math.min(width, height)))
+    // cameraZPos = Math.floor(Math.min(width, height))
+
+    if (cameraX != undefined) cameraXPos = cameraX * width
+    if (cameraY != undefined) cameraYPos = cameraY * height
+    if (cameraZ != undefined) cameraZPos = cameraZ * Math.floor(Math.min(width, height))
+
+    this._camera.position.set(cameraXPos, cameraZPos, cameraYPos)
+
+    this._scene3d.add(this._camera)
+    this._camera.lookAt(this._scene3d.position)
+    this._camera.zoom = this.getState('zoom') * 0.01
+
+    try {
+      const canvas = document.createElement('canvas')
+      let context = canvas!.getContext('webgl2')!
+
+      var renderer3d = new THREE.WebGLRenderer({
+        canvas,
+        context,
+        precision,
+        alpha: true,
+        antialias
+      })
+    } catch (e) {
+      this._noSupportWebgl = true
+      return
+    }
+
+    this._renderer3d = renderer3d
+
+    renderer3d!.autoClear = true
+    // @ts-ignore for three@0.150.1
+    renderer3d!.outputColorSpace = THREE.SRGBColorSpace
+    renderer3d!.useLegacyLights = false
+    renderer3d!.toneMappingExposure = Math.pow(exposure, 5.0)
+    renderer3d!.toneMapping = THREE.LinearToneMapping
+    renderer3d!.shadowMap.enabled = true
+    renderer3d!.setClearColor(0xffffff, 0) // transparent
+    renderer3d!.setSize(width, height)
+
+    // CONTROLS
+    this._controls = new (ThreeControls as any)(this._camera, this)
+    this._controls.cameraChanged = true
+
+    // Lights
+    var _hemiLight = new THREE.HemisphereLight(0xdddddd, 0x333333, 0.035)
+    var _directionalLight = new THREE.DirectionalLight(0xd6e1ff, 0.01)
+    var _pointLight1 = new THREE.PointLight(0xd6e1ff, 1, undefined, 2)
+
+    _pointLight1.power = cameraZPos * 50
+    _pointLight1.castShadow = true
+    _pointLight1.position.set(0, cameraZPos, 0)
+    _pointLight1.shadow.camera.near = 0.1
+    _pointLight1.shadow.camera.far = cameraZPos * 2
+
+    // const helper = new THREE.CameraHelper(_pointLight1.shadow.camera)
+    // this._scene3d?.add(helper)
+
+    this.scene3d!.add(_hemiLight)
+    this.scene3d!.add(_pointLight1)
+    this._camera.add(_directionalLight)
+
+    this._mouse = new THREE.Vector2()
+
+    this._clock = new THREE.Clock(true)
+    this._mixer = new THREE.AnimationMixer(this.scene3d!)
+
+    this.createObjects(components)
+
+    this._camera.updateProjectionMatrix()
+
+    const floor = createFloor(this)
+    // if (this._floor) {
+    //   this.object3d.remove(this._floor)
+    //   this._floor.clear()
+    //   delete this._floor
+    // }
+
+    if (floor) {
+      // this._floor = floor
+      this._scene3d.add(floor)
+    }
+
+    // this.invalidate()
+
+    // postprocessing
+
+    var composer = (this.composer = new EffectComposer(renderer3d!))
+    composer.setSize(width, height)
+
+    const renderPass = new RenderPass(this._scene3d, this._camera)
+    composer.addPass(renderPass)
+
+    this._onFocus = (e: FocusEvent) => {
+      this.render_threed()
+    }
+
+    this._onResize = (e: Event) => {
+      this.resize()
+    }
+
+    window.addEventListener('resize', this._onResize)
+    window.addEventListener('focus', this._onFocus)
+
+    this.buildOverlays()
+    this.resize()
+  }
+
+  resize() {
+    const { width, height } = this.bounds
+
+    this._camera!.aspect = width / height
+
+    this.renderer3d!.setSize(width, height)
+    this.css3DRenderer.setSize(width, height)
+
+    this.composer?.setSize(width, height)
+    this._camera!.updateProjectionMatrix()
+  }
+
+  init_scene3d() {
+    this.root.on('redraw', this.onredraw, this)
+
+    if (this._scene3d) {
+      this.destroy_scene3d()
+    }
+
+    this.update()
+
+    this.onchangeData && this.onchangeData(this.data, this.data)
+  }
+
+  threed_animate() {
+    if (!this._controls) {
+      return
+    }
+
+    if (this._mixer) {
+      this._mixer.update(this._clock!.getDelta())
+    }
+
+    this._controls.update()
+
+    if (this.state.autoRotate) {
+      this.invalidate()
+    }
+
+    this.render_threed()
+  }
+
+  stop() {}
+
+  get scene3d() {
+    if (!this._scene3d) {
+      this.init_scene3d()
+    }
+
+    return this._scene3d
+  }
+
+  get renderer3d() {
+    return this._renderer3d
+  }
+
+  get mixer() {
+    return this._mixer
+  }
+
+  get zoom() {
+    return this._camera?.zoom
+  }
+
+  /**
+   * CSS3DRenderer용 THREE.Scene을 제공
+   */
+  get css3DScene() {
+    if (!this._css3DScene) {
+      this._css3DScene = this.buildCSS3DScene()
+    }
+    return this._css3DScene
+  }
+
+  protected buildCSS3DScene() {
+    return new THREE.Scene()
+  }
+
+  protected disposeCSS3DScene() {
+    var children = [...this.css3DScene.children]
+    children.forEach(child => this.css3DScene.remove(child))
+  }
+
+  /* css3d-renderer */
+
+  /**
+   * css3d-renderer getter
+   */
+  get css3DRenderer() {
+    if (!this._css3DRenderer) {
+      this._css3DRenderer = this.createCSS3DRenderer()
+    }
+
+    return this._css3DRenderer
+  }
+
+  protected createCSS3DRenderer() {
+    var renderer = new CSS3DRenderer()
+    var div = renderer.domElement
+    div.style.position = 'absolute'
+    div.style.top = '0'
+    div.style.pointerEvents = 'none'
+
+    if (this.app.isViewMode) {
+      // disableAllUserEvents(div)
+    } else {
+      div.style.pointerEvents = 'none'
+    }
+
+    return renderer
+  }
+
+  protected disposeCSS3DRenderer() {
+    // Nothing to do
+  }
+
+  /**
+   * element내부에 필요한 overlay들을 생성
+   * ViewRenderer에서는 CSS3DRenderer와 GLRendering을 위한 canvas를 오버레이로 만든다.
+   * Warn: this.element는 아직 만들어지지 않은 상태에 buildOverlays가 호출됨.
+   * @param into
+   */
+  buildOverlays() {
+    this.element.appendChild(this.css3DRenderer.domElement)
+  }
+
+  render_threed() {
+    if (this.composer) {
+      this.composer.render()
+    }
+  }
+
+  /* Container Overides .. */
+  render(ctx: CanvasRenderingContext2D) {
+    if (this.app.isViewMode) {
+      this.setState('threed', true)
+    }
+
+    if (this.state.threed && !this._noSupportWebgl && this._camera) {
+      this.css3DRenderer.render(this.css3DScene, this._camera!)
+      return
+    }
+
+    super.render(ctx)
+  }
+
+  postrender(ctx: CanvasRenderingContext2D) {
+    var { left, top, debug, threed } = this.state
+
+    var { width, height } = this.bounds
+
+    // ios에서 width, height에 소수점이 있으면 3d를 표현하지 못하는 문제가 있어 정수화
+    width = Math.floor(width)
+    height = Math.floor(height)
+
+    if (threed) {
+      if (!this._scene3d) {
+        this.init_scene3d()
+        this.render_threed()
+      }
+
+      if (this._noSupportWebgl) {
+        this._showWebglNoSupportText(ctx)
+        return
+      }
+
+      if (!this._renderer3d) {
+        return
+      }
+
+      var { width: rendererWidth, height: rendererHeight } = this._renderer3d.getSize(new THREE.Vector2())
+
+      ctx.drawImage(this._renderer3d.domElement, 0, 0, rendererWidth, rendererHeight, left, top, width, height)
+
+      if (debug) {
+        ctx.font = 100 + 'px Arial'
+        ctx.textAlign = 'center'
+        ctx.fillStyle = 'black'
+        ctx.globalAlpha = 0.5
+        ctx.fillText(String(FPS()), 100, 100)
+      }
+    } else {
+      super.postrender(ctx)
+    }
+  }
+
+  dispose() {
+    this.root.off('redraw', this.onredraw, this)
+
+    this.disposeCSS3DScene()
+
+    this.composer?.dispose()
+    this.destroy_scene3d()
+
+    super.dispose()
+  }
+
+  get layout() {
+    return Layout.get('three')
+  }
+
+  get nature(): ComponentNature {
+    return NATURE
+  }
+
+  getObjectByRaycast(): THREE.Object3D | undefined {
+    var intersects = this.getObjectsByRaycast()
+
+    if (intersects && intersects.length > 0) {
+      var object: THREE.Object3D | null = intersects[0].object
+      while (object) {
+        if (object.userData.context) {
+          return object
+        }
+
+        object = object.parent
+      }
+    }
+  }
+
+  getObjectsByRaycast() {
+    var vector = this._mouse
+    if (!this._camera) {
+      return
+    }
+
+    this._raycaster.setFromCamera(vector!, this._camera)
+
+    var intersects = this._raycaster.intersectObjects(this._scene3d!.children, true)
+
+    return intersects
+  }
+
+  _showWebglNoSupportText(context: CanvasRenderingContext2D) {
+    context.save()
+
+    var { width, height } = this.state
+
+    context.font = width / 20 + 'px Arial'
+    context.textAlign = 'center'
+    context.fillText(WEBGL_NO_SUPPORT_TEXT, width / 2 - width / 40, height / 2)
+
+    context.restore()
+  }
+
+  /* Event Handlers */
+
+  onchange(after: Properties, before: Properties) {
+    if (after.hasOwnProperty('width') || after.hasOwnProperty('height') || after.hasOwnProperty('threed'))
+      this.destroy_scene3d()
+
+    if (after.hasOwnProperty('autoRotate')) {
+      if (this._controls) {
+        this._controls.doAutoRotate(after.autoRotate)
+      }
+    }
+
+    if (
+      after.hasOwnProperty('fov') ||
+      after.hasOwnProperty('near') ||
+      after.hasOwnProperty('far') ||
+      after.hasOwnProperty('zoom')
+    ) {
+      if (this._camera) {
+        const { near, far, zoom, fov } = this.state
+
+        this._camera.near = near
+        this._camera.far = far
+        this._camera.zoom = zoom * 0.01
+        this._camera.fov = fov
+        this._camera.updateProjectionMatrix()
+
+        this._controls.cameraChanged = true
+      }
+    }
+  }
+
+  onmousedown(e: MouseEvent) {
+    if (this._controls) {
+      this._controls.onMouseDown(e)
+    }
+  }
+
+  onmouseup(e: MouseEvent) {
+    if (this._controls) {
+      if (this._lastFocused) {
+        ;(this._lastFocused as any)._focused = false
+      }
+
+      const { left, top, width, height } = this.state
+
+      var pointer = this.transcoordC2S(e.offsetX, e.offsetY)
+
+      this._mouse!.x = ((pointer.x - left) / width) * 2 - 1
+      this._mouse!.y = -((pointer.y - top) / height) * 2 + 1
+
+      var object = this.getObjectByRaycast()
+      var realObject = object?.userData.context as RealObject
+
+      if (realObject) {
+        ;(realObject as any)._focused = true
+        ;(realObject as any)._focusedAt = performance.now()
+        this._lastFocused = realObject
+        realObject.component?.trigger('click', e)
+      }
+
+      e.stopPropagation()
+    }
+  }
+
+  onmousemove(e: MouseEvent) {
+    if (this._controls) {
+      const { left, top, width, height } = this.state
+
+      var pointer = this.transcoordC2S(e.offsetX, e.offsetY)
+
+      this._mouse!.x = ((pointer.x - left) / width) * 2 - 1
+      this._mouse!.y = -((pointer.y - top) / height) * 2 + 1
+
+      var object = this.getObjectByRaycast()
+      var realObject = object?.userData.context as RealObject
+
+      if (realObject !== this._lastHovered) {
+        if (this._lastHovered) {
+          this._lastHovered.component?.trigger('mouseleave', e)
+          delete this._lastHovered
+        }
+
+        if (realObject) {
+          this._lastHovered = realObject
+          this._lastHovered.component?.trigger('mouseenter', e)
+        }
+      }
+
+      this._controls.onMouseMove(e)
+
+      e.stopPropagation()
+    }
+  }
+
+  onmouseleave(e: MouseEvent) {}
+
+  onwheel(e: WheelEvent) {
+    if (this._controls) {
+      this.handleMouseWheel(e)
+      e.stopPropagation()
+    }
+  }
+
+  ondblclick(e: MouseEvent) {
+    if (this._controls) {
+      this.setState('zoom', this.get('zoom'))
+      this._controls.reset()
+      e.stopPropagation()
+    }
+  }
+
+  ondragstart(e: DragEvent) {
+    if (this._controls) {
+      var pointer = this.transcoordC2S(e.offsetX, e.offsetY)
+      var { left, top, width, height } = this.bounds
+
+      this._mouse!.x = ((pointer.x - left) / width) * 2 - 1
+      this._mouse!.y = -((pointer.y - top) / height) * 2 + 1
+
+      this._controls.onDragStart(e)
+      e.stopPropagation()
+    }
+  }
+
+  ondragmove(e: DragEvent) {
+    if (this._controls) {
+      this._controls.cameraChanged = true
+      this._controls.onDragMove(e)
+      e.stopPropagation()
+    }
+  }
+
+  ondragend(e: DragEvent) {
+    if (this._controls) {
+      this._controls.cameraChanged = true
+      this._controls.onDragEnd(e)
+      e.stopPropagation()
+    }
+  }
+
+  ontouchstart(e: TouchEvent) {
+    if (this._controls) {
+      this._controls.onTouchStart(e)
+      e.stopPropagation()
+    }
+  }
+
+  onpan(e: TouchEvent) {
+    if (this._controls) {
+      this._controls.cameraChanged = true
+      this._controls.onTouchMove(e)
+      e.stopPropagation()
+    }
+  }
+  ontouchend(e: TouchEvent) {
+    if (this._controls) {
+      this._controls.onTouchEnd(e)
+      e.stopPropagation()
+    }
+  }
+
+  onkeydown(e: KeyboardEvent) {
+    if (this._controls) {
+      this._controls.onKeyDown(e)
+      e.stopPropagation()
+    }
+  }
+
+  onpinch(e: TouchEvent) {
+    if (this._controls) {
+      var zoom = this.getState('zoom')
+      //@ts-ignore
+      zoom *= e.scale
+
+      if (zoom < 100) zoom = 100
+
+      this.setState('zoom', zoom)
+      e.stopPropagation()
+    }
+  }
+
+  ondoubletap() {
+    this._controls.reset()
+  }
+
+  handleMouseWheel(event: WheelEvent) {
+    var delta = 0
+    var zoom = this.getState('zoom')
+
+    delta = -event.deltaY
+    zoom += delta * 0.1
+    if (zoom < 100) zoom = 100
+
+    this.setState('zoom', zoom)
+  }
+
+  onredraw() {
+    this.threed_animate()
+  }
+}
+
+Component.register('3d-space', ThreeSpace)