@operato/scene-visualizer 8.0.0-beta.1 → 8.0.0

package/src/three-container.ts

@@ -1,724 +0,0 @@
-/*
- * 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: ComponentNature = {
-  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: '3dmode',
-      name: 'threed',
-      property: 'threed'
-    },
-    {
-      type: 'checkbox',
-      label: 'auto-rotate',
-      name: 'autoRotate',
-      property: 'autoRotate'
-    },
-    {
-      type: 'checkbox',
-      label: 'debug',
-      name: 'debug',
-      property: 'debug'
-    }
-  ],
-  help: 'scene/component/three-container'
-}
-
-const WEBGL_NO_SUPPORT_TEXT = 'WebGL no support'
-
-export class ThreeContainer 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)
-
-    this.scene3d!.add(_hemiLight)
-
-    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 (floor) {
-      this._scene3d.add(floor)
-    }
-
-    // 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'
-    div.setAttribute('scene', 'three-container:css3d-renderer')
-
-    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.getState('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-container', ThreeContainer)