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

package/src/threed/real-object-mesh.ts

@@ -1,74 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import * as THREE from 'three'
-
-import { applyAlpha } from './common'
-import { RealObject } from './real-object'
-
-export abstract class RealObjectMesh extends RealObject<THREE.Mesh> {
-  protected getObject3dInstance() {
-    return new THREE.Mesh()
-  }
-
-  build() {
-    super.build()
-
-    this.buildGeometry()
-    this.buildMaterial()
-  }
-
-  /* overide */
-
-  updateAlpha() {
-    var { alpha = 1, fillStyle } = this.component.state
-
-    applyAlpha(this.object3d.material, alpha, fillStyle)
-  }
-
-  updateHidden() {
-    this.object3d.visible = !this.component.state.hidden
-  }
-
-  updateFillStyle() {
-    var { fillStyle } = this.component.state
-    var material = this.object3d.material as THREE.MeshStandardMaterial
-    if (!material) {
-      return
-    }
-
-    const texture = RealObject.buildFillStyleTexture(this.component)
-
-    if (texture) {
-      texture.needsUpdate = true
-      material.map = texture
-    } else if (typeof fillStyle == 'string') {
-      if (fillStyle !== 'transparent') {
-        material.color.set(fillStyle)
-      } else {
-        material.opacity = 0
-      }
-    }
-  }
-
-  protected abstract buildGeometry(): void
-
-  buildMaterial(): void {
-    this.object3d.material = new THREE.MeshStandardMaterial({
-      transparent: true,
-      side: THREE.DoubleSide
-    })
-  }
-
-  clear() {
-    this.object3d.traverse((mesh: any) => {
-      if (mesh.isMesh) {
-        mesh.geometry.dispose()
-        ;(mesh.material.length ? mesh.material : [mesh.material]).forEach((m: any) => m.dispose && m.dispose())
-      }
-    })
-
-    return super.clear()
-  }
-}

package/src/threed/real-object-plane.ts

@@ -1,27 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-/* 
-  Inspired by http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/
-*/
-
-import * as THREE from 'three'
-
-import { RealObjectMesh } from './real-object-mesh'
-
-export class RealObjectPlane extends RealObjectMesh {
-  buildGeometry() {
-    var { width, height } = this.component.state.dimension
-
-    this.object3d.geometry = new THREE.PlaneGeometry(width, height)
-  }
-
-  buildMaterial() /* : THREE.MeshMaterialType | THREE.MeshMaterialType[] */ {
-    this.object3d.material = new THREE.MeshStandardMaterial({
-      opacity: 0,
-      side: THREE.DoubleSide,
-      blending: THREE.NoBlending
-    })
-  }
-}

package/src/threed/real-object-scene.ts

@@ -1,84 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import * as THREE from 'three'
-
-import { RealObject } from './real-object'
-import { createFloor } from './floor/floor'
-
-export class RealObjectScene extends RealObject<THREE.Scene> {
-  private _floor?: THREE.Mesh
-  private _animationMixer?: THREE.AnimationMixer
-
-  protected getObject3dInstance() {
-    return new THREE.Scene()
-  }
-
-  dispose() {
-    this.object3d.children.forEach(child => {
-      ;(child as any)['dispose'] && (child as any)['dispose']()
-
-      this.object3d.remove(child)
-    })
-  }
-
-  clear() {
-    if (this._floor) {
-      this.object3d.remove(this._floor)
-
-      if (this._floor.material instanceof Array) {
-        ;(this._floor.material as THREE.Material[]).forEach(material => material.dispose())
-      } else {
-        this._floor.material.dispose()
-      }
-      this._floor.geometry.dispose()
-
-      delete this._floor
-    }
-
-    return super.clear()
-  }
-
-  get floor(): THREE.Mesh {
-    return this._floor!
-  }
-
-  set floor(floor: THREE.Mesh | undefined) {
-    if (this._floor) {
-      this.object3d.remove(this._floor)
-      this._floor.clear()
-      delete this._floor
-    }
-
-    if (floor) {
-      this._floor = floor
-      this.object3d.add(floor)
-    }
-
-    this.component.invalidate()
-  }
-
-  build() {
-    super.build()
-
-    this.floor = createFloor(this.component)
-  }
-
-  updateTransform() {}
-  updateTransformReverse() {}
-  updateDimension() {}
-  updatePosition() {}
-  updateRotate() {}
-  updateScale() {}
-  updateAlpha() {}
-  updateHidden() {}
-
-  get animationMixer(): THREE.AnimationMixer {
-    if (!this._animationMixer) {
-      this._animationMixer = new THREE.AnimationMixer(this.object3d)
-    }
-
-    return this._animationMixer
-  }
-}

package/src/threed/real-object-sprite-2d.ts

@@ -1,54 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import * as THREE from 'three'
-import { RealObjectSprite } from './real-object-sprite'
-import { createCanvasTexture } from './texture/canvas-texture'
-
-export class RealObjectSprite2D extends RealObjectSprite {
-  buildMaterial() {
-    var material = this.object3d.material as THREE.SpriteMaterial
-    if (material) {
-      material.dispose()
-    }
-
-    this.object3d.material = new THREE.SpriteMaterial({
-      map: createCanvasTexture(this.component),
-      alphaTest: 0.01,
-      sizeAttenuation: false
-    })
-  }
-
-  get scale() {
-    const { width, height } = this.component.bounds
-    const { width: parentWidth, height: parentHeight } = this.threeContainer!.bounds
-    const { scale = 1 } = this.component.state
-
-    return {
-      x: (scale * width) / parentWidth,
-      y: (scale * height) / parentHeight,
-      z: scale
-    }
-  }
-
-  update() {
-    this.build()
-  }
-
-  updateFillStyle() {
-    this.update()
-  }
-
-  updateStrokeStyle() {
-    this.update()
-  }
-
-  updateAlpha() {
-    this.update()
-  }
-
-  updateText() {
-    this.update()
-  }
-}

package/src/threed/real-object-sprite.ts

@@ -1,64 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import * as THREE from 'three'
-import { applyAlpha } from './common'
-import { DELTA } from '@hatiolab/things-scene'
-
-import { RealObject } from './real-object'
-
-export abstract class RealObjectSprite extends RealObject<THREE.Sprite> {
-  protected getObject3dInstance() {
-    return new THREE.Sprite()
-  }
-
-  build() {
-    super.build()
-
-    this.buildMaterial()
-  }
-
-  abstract buildMaterial(): void
-
-  /* overide */
-
-  get cz() {
-    var { zPos = 0 } = this.component.state
-    var { height } = this.component.bounds
-    var { tz = 0 } = this.component.delta() as DELTA
-
-    return zPos + tz + height / 2
-  }
-
-  updateAlpha() {
-    var { alpha = 1, fillStyle } = this.component.state
-
-    applyAlpha(this.object3d.material, alpha, fillStyle)
-  }
-
-  updateHidden() {
-    this.object3d.visible = !this.component.state.hidden
-  }
-
-  updateFillStyle() {
-    var { fillStyle } = this.component.state
-    var material = this.object3d.material as THREE.SpriteMaterial
-    if (!material) {
-      return
-    }
-
-    const texture = RealObject.buildFillStyleTexture(this.component)
-
-    if (texture) {
-      texture.needsUpdate = true
-      material.map = texture
-    } else if (typeof fillStyle == 'string') {
-      if (fillStyle !== 'transparent') {
-        material.color.set(fillStyle)
-      } else {
-        material.opacity = 0
-      }
-    }
-  }
-}

package/src/threed/real-object-text.ts

@@ -1,86 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import * as THREE from 'three'
-import { applyAlpha } from './common'
-
-import { RealObjectMesh } from './real-object-mesh'
-import { textTexture } from './texture/text-texture'
-
-/**
- * RealObjectText
- */
-export class RealObjectText extends RealObjectMesh {
-  buildGeometry() {}
-
-  /* overide */
-
-  get rotation() {
-    const { rotationX = 0, rotationY = 0, rotation = 0 } = this.component.state
-
-    return {
-      x: rotationX - Math.PI / 2,
-      y: rotationY,
-      z: -rotation
-    }
-  }
-
-  updateDimension() {
-    var { width, height } = this.component.state
-
-    if (this.object3d.geometry) {
-      this.object3d.geometry.dispose()
-    }
-
-    /* scaling으로 해결되지 않기때문에, 새로 geometry를 만드는 방법을 사용한다 */
-    this.object3d.geometry = new THREE.PlaneGeometry(width, height)
-  }
-
-  updateText() {
-    var material = this.object3d.material as THREE.MeshStandardMaterial
-    if (!material) {
-      return
-    }
-
-    var {
-      width,
-      height,
-      bold = false,
-      italic = false,
-      fontFamily = 'Serif',
-      fontSize = 10,
-      fontColor = 'black',
-      fillStyle
-    } = this.component.state
-
-    var text = this.component.text
-
-    const texture = textTexture(text, width, height, {
-      bold,
-      italic,
-      fontFamily,
-      fontSize,
-      fontColor
-    })
-
-    if (texture) {
-      material.map = texture
-      texture.needsUpdate = true
-    } else if (typeof fillStyle == 'string') {
-      if (fillStyle !== 'transparent') {
-        material.color.set(fillStyle)
-      } else {
-        material.opacity = 0
-      }
-    }
-  }
-
-  updateAlpha() {
-    // material의 transparency는 항상 true으로 유지되어야 한다.
-    var { alpha = 1, fontColor } = this.component.state
-
-    applyAlpha(this.object3d.material, alpha, fontColor)
-    ;(this.object3d.material as any).transparent = true
-  }
-}

package/src/threed/real-object.ts

@@ -1,326 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import * as THREE from 'three'
-import { Component, Properties, DELTA } from '@hatiolab/things-scene'
-
-import { SCALE_MIN } from './common'
-import { ThreeDimensionalContainer } from './three-dimensional-container'
-
-function hasProperties(props: string[], obj: object) {
-  return props.findIndex(prop => prop in obj) !== -1
-}
-
-function isIn3DSpace() {
-  return true
-}
-
-export abstract class RealObject<T extends THREE.Object3D = THREE.Object3D> {
-  protected _component: Component
-  protected _focused: boolean = false
-
-  public object3d: T
-
-  static buildFillStyleTexture(component: Component) {
-    const { fillStyle } = component.state
-
-    if (typeof fillStyle == 'object' && fillStyle.type == 'pattern' && fillStyle.image) {
-      return new THREE.TextureLoader(THREE.DefaultLoadingManager).load(
-        component.app.url(fillStyle.image),
-        texture => {
-          texture.minFilter = THREE.LinearFilter
-          // @ts-ignore
-          texture.colorSpace = THREE.SRGBColorSpace
-          texture.repeat.set(1, 1)
-          texture.needsUpdate = true
-
-          component.invalidate()
-        },
-        e => {
-          console.error(e)
-        }
-      )
-    }
-  }
-
-  constructor(component: Component) {
-    this._component = component
-    this.object3d = this.getObject3dInstance()
-    this.component.isIn3DSpace = isIn3DSpace
-
-    this.component.on('change', this.onchange, this)
-  }
-
-  update() {
-    this.clear()
-    this.build()
-
-    this.updateDimension()
-    this.updateTransform()
-    this.updateFillStyle()
-    this.updateStrokeStyle()
-    this.updateAlpha()
-    this.updateHidden()
-    this.updateText()
-  }
-
-  protected getObject3dInstance(): T {
-    return new THREE.Object3D() as T
-  }
-
-  build() {
-    this.object3d.userData.context = this
-    this.object3d.castShadow = true
-    this.object3d.name = this.component.state.id
-  }
-
-  get component(): Component {
-    return this._component!
-  }
-
-  get threeContainer(): ThreeDimensionalContainer | undefined {
-    var component = this.component
-
-    while (component) {
-      if ('is3dContainer' in component && (component as ThreeDimensionalContainer).is3dContainer()) {
-        return component as ThreeDimensionalContainer
-      }
-      component = component.parent
-    }
-  }
-
-  get focused(): boolean {
-    return this._focused
-  }
-
-  set focused(focused: boolean) {
-    this._focused = focused
-  }
-
-  dispose() {
-    this.component.off('change', this.onchange, this)
-    delete this.component._realObject
-
-    this.clear()
-  }
-
-  clear() {
-    this.object3d.children.slice().forEach((child: 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.object3d.remove(child)
-    })
-
-    this.object3d.userData = {}
-    return this.object3d.clear()
-  }
-
-  /**
-   * Component의 상태값의 변화를 Object3D에 반영 - translate, rotation, scale
-   */
-  updateTransform() {
-    // var {
-    //   scale: { x: sx = 1, y: sy = 1, z: sz = 1 } = UNIT_SCALE,
-    //   translate: { x: tx = 0, y: ty = 0, z: tz = 0 } = UNIT_TRANSLATE,
-    //   rotate: { x: rx = 0, y: ry = 0, z: rz = 0 } = UNIT_ROTATE
-    // } = this.component.state
-
-    var { x: tx, y: ty, z: tz } = this.position
-    var { x: rx, y: ry, z: rz } = this.rotation
-    var { x: sx, y: sy, z: sz } = this.scale
-
-    this.object3d.position.set(tx, ty, tz)
-    this.object3d.rotation.set(rx, ry, rz)
-    this.object3d.scale.set(Math.max(sx, SCALE_MIN), Math.max(sy, SCALE_MIN), Math.max(sz, SCALE_MIN))
-  }
-
-  get position() {
-    const { x, y, z } = this.center
-    return {
-      x,
-      y: z,
-      z: y
-    }
-  }
-
-  get rotation() {
-    const { rotationX = 0, rotationY = 0, rotation = 0 } = this.component.state
-
-    return {
-      x: rotationX,
-      y: -rotation,
-      z: rotationY
-    }
-  }
-
-  get scale() {
-    const { scale = 1 } = this.component.state
-
-    return {
-      x: scale,
-      y: scale,
-      z: scale
-    }
-  }
-
-  get cx() {
-    var { x = 0 } = this.component.center
-    var { width: parentWidth = 0 } = this.component.parent.bounds
-    var { tx = 0 } = this.component.delta() as DELTA
-
-    return x + tx - parentWidth / 2
-  }
-
-  get cy() {
-    var { y = 0 } = this.component.center
-    var { height: parentHeight = 0 } = this.component.parent.bounds
-    var { ty = 0 } = this.component.delta() as DELTA
-
-    return y + ty - parentHeight / 2
-  }
-
-  get cz() {
-    var { zPos = 0, depth = 1 } = this.component.state
-    var { tz = 0 } = this.component.delta() as DELTA
-
-    return zPos + tz + depth / 2
-  }
-
-  get center() {
-    var { x = 0, y = 0 } = this.component.center
-    var { width: parentWidth = 0, height: parentHeight = 0 } = this.component.parent.bounds
-
-    var { tx = 0, ty = 0, tz = 0 } = this.component.delta() as DELTA
-
-    return {
-      x: x + tx - parentWidth / 2,
-      y: y + ty - parentHeight / 2,
-      z: this.cz
-    }
-  }
-
-  get dimension() {
-    const { width, height } = this.component.bounds
-    const { depth } = this.component.state
-    return {
-      width,
-      height,
-      depth
-    }
-  }
-
-  /**
-   * Object3D 모델의 변화를 Component의 모델값에 반영
-   */
-  // updateTransformReverse() {
-  //   var { rotation, position, scale } = this.object3d
-
-  //   this.component.set({
-  //     rotate: {
-  //       x: rotation.x,
-  //       y: rotation.y,
-  //       z: rotation.z
-  //     },
-  //     translate: {
-  //       x: position.x,
-  //       y: position.y,
-  //       z: position.z
-  //     },
-  //     scale: {
-  //       x: scale.x,
-  //       y: scale.y,
-  //       z: scale.z
-  //     }
-  //   })
-  // }
-
-  /* update functions - 전체적인 rebuilding이 필요하지 않은 update 기능 들임 */
-  updatePosition() {
-    var { x = 0, y = 0, z = 0 } = this.position
-    this.object3d.position.set(x, y, z)
-  }
-
-  updateRotate() {
-    var { x = 0, y = 0, z = 0 } = this.rotation
-    this.object3d.rotation.set(x, y, z)
-  }
-
-  updateScale() {
-    var { x = 1, y = 1, z = 1 } = this.scale
-    this.object3d.scale.set(Math.max(x, SCALE_MIN), Math.max(y, SCALE_MIN), Math.max(z, SCALE_MIN))
-  }
-
-  updateDimension() {
-    var { width, height, depth } = this.dimension
-    this.object3d.scale.set(width, height, depth)
-  }
-
-  updateAlpha() {
-    var { alpha } = this.component.state
-
-    alpha = alpha == undefined ? 1 : alpha
-
-    this.object3d.traverse((o: any) => {
-      var materials = o.material
-      if (!o.material) return
-
-      if (!Array.isArray(materials)) {
-        materials = [materials]
-      }
-
-      materials.forEach((m: any) => {
-        m.opacity *= alpha
-        m.transparent = alpha < 1
-      })
-    })
-  }
-
-  updateHidden() {
-    this.object3d.visible = !this.component.state.hidden
-  }
-
-  updateStrokeStyle() {}
-  updateFillStyle() {}
-  updateText() {}
-
-  onchange(after: Properties, before: Properties) {
-    if (hasProperties(['cx', 'cy', 'cz', 'zPos', 'left', 'top'], after)) {
-      this.updatePosition()
-    }
-
-    if (hasProperties(['width', 'height', 'depth'], after)) {
-      this.updateDimension()
-    }
-
-    if (hasProperties(['rotationX', 'rotationY', 'rotation'], after)) {
-      this.updateRotate()
-    }
-
-    if ('scale' in after) {
-      this.updateScale()
-    }
-
-    if ('hidden' in after) {
-      this.updateHidden()
-    }
-
-    if ('alpha' in after) {
-      this.updateAlpha()
-    }
-
-    if ('strokeStyle' in after) {
-      this.updateStrokeStyle()
-    }
-
-    if ('fillStyle' in after) {
-      this.updateFillStyle()
-    }
-
-    if ('text' in after) {
-      this.updateText()
-    }
-  }
-}