@operato/scene-visualizer 7.3.18 → 7.3.19

package/src/threed/common.ts

@@ -1,21 +0,0 @@
-import tinycolor from 'tinycolor2'
-
-export const SCALE_MIN = 0.001
-
-export function applyAlpha(material: any, alpha: number, fillStyle: any) {
-  var opacity = 1
-  if (!fillStyle || fillStyle == 'none' || fillStyle == 'transparent') {
-    opacity = 0
-  } else {
-    var fillAlpha = typeof fillStyle == 'string' ? tinycolor(fillStyle).getAlpha() : 1
-    opacity = alpha * fillAlpha
-  }
-
-  material.opacity = opacity
-  material.transparent = opacity < 1
-}
-
-export const UNIT_DIMENSION = { width: 1, height: 1, depth: 1 }
-export const UNIT_SCALE = { x: 1, y: 1, z: 1 }
-export const UNIT_TRANSLATE = { x: 0, y: 0, z: 0 }
-export const UNIT_ROTATE = { x: 0, y: 0, z: 0 }

package/src/threed/floor/floor.ts

@@ -1,62 +0,0 @@
-import * as THREE from 'three'
-import { Component } from '@hatiolab/things-scene'
-import { RealObject } from '../real-object'
-
-export function createFloor(component: Component): THREE.Mesh | undefined {
-  var { fillStyle } = component.state
-
-  if (!fillStyle || fillStyle == 'none') {
-    return
-  }
-
-  var floorGeometry = new THREE.BoxGeometry(1, 1, 1)
-  var floorMaterial: THREE.Material | THREE.Material[] | undefined
-
-  const texture = RealObject.buildFillStyleTexture(component)
-
-  if (texture) {
-    const color = '#424b57'
-
-    floorMaterial = [
-      new THREE.MeshStandardMaterial({
-        color
-      }),
-      new THREE.MeshStandardMaterial({
-        color
-      }),
-      new THREE.MeshStandardMaterial({
-        color
-      }),
-      new THREE.MeshStandardMaterial({
-        color
-      }),
-      new THREE.MeshStandardMaterial({
-        map: texture
-      }),
-      new THREE.MeshStandardMaterial({
-        color
-      })
-    ]
-  } else if (typeof fillStyle == 'string') {
-    floorMaterial = new THREE.MeshStandardMaterial({
-      color: fillStyle
-    })
-  }
-
-  if (!floorMaterial) {
-    return
-  }
-
-  const mesh = new THREE.Mesh(floorGeometry, floorMaterial)
-
-  var { width, height } = component.state
-
-  mesh.scale.set(width, height, 5)
-  mesh.rotation.x = -Math.PI / 2
-  mesh.position.y = -2
-
-  mesh.name = 'floor'
-  mesh.receiveShadow = true
-
-  return mesh
-}

package/src/threed/html/elements.ts

@@ -1,27 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-export var PIXEL_RATIO = (function () {
-  var ctx: any = document.createElement('canvas').getContext('2d'),
-    dpr = window.devicePixelRatio || 1,
-    bsr =
-      ctx.webkitBackingStorePixelRatio ||
-      ctx.mozBackingStorePixelRatio ||
-      ctx.msBackingStorePixelRatio ||
-      ctx.oBackingStorePixelRatio ||
-      ctx.backingStorePixelRatio ||
-      1
-  return dpr / bsr
-})()
-
-export function createCanvas(width: number, height: number): HTMLCanvasElement {
-  let canvas = document.createElement('canvas')
-
-  canvas.width = width
-  canvas.height = height
-  canvas.style.width = width + 'px'
-  canvas.style.height = height + 'px'
-
-  return canvas
-}

package/src/threed/index.ts

@@ -1,15 +0,0 @@
-export * from './common'
-export * from './three-dimensional-container'
-export * from './real-object'
-export * from './real-object-dummy'
-export * from './real-object-extrude'
-export * from './real-object-camera'
-export * from './real-object-dom-element'
-export * from './real-object-gltf'
-export * from './real-object-group'
-export * from './real-object-mesh'
-export * from './real-object-plane'
-export * from './real-object-scene'
-export * from './real-object-sprite-2d'
-export * from './real-object-sprite'
-export * from './real-object-text'

package/src/threed/real-object-camera-meshed.ts

@@ -1,67 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import * as THREE from 'three'
-
-import { RealObjectMesh } from './real-object-mesh'
-import { UNIT_DIMENSION } from './common'
-
-const DEFAULT = {
-  far: 100000,
-  fov: 80,
-  near: 1,
-  zoom: 1
-}
-
-export class RealObjectCamera extends RealObjectMesh {
-  protected _camera?: THREE.PerspectiveCamera
-
-  update() {
-    super.update()
-
-    this.updateCamera()
-  }
-
-  get camera(): THREE.PerspectiveCamera {
-    if (!this._camera) {
-      this._camera = this.createCamera()
-      this.updateCamera()
-    }
-
-    return this._camera
-  }
-
-  createCamera() {
-    return new THREE.PerspectiveCamera()
-  }
-
-  updateCamera() {
-    var { near = DEFAULT.near, far = DEFAULT.far, fov = DEFAULT.fov, zoom = DEFAULT.zoom } = this.component.state
-
-    this.camera.far = far
-    this.camera.fov = fov
-    this.camera.near = near
-    this.camera.zoom = zoom
-  }
-
-  build() {
-    super.build()
-
-    this.object3d.add(this.camera)
-  }
-
-  clear() {
-    delete this._camera
-
-    return super.clear()
-  }
-
-  buildGeometry() {
-    var { width = 1, height = 1, depth = 1 } = this.component.state.dimension || UNIT_DIMENSION
-
-    var radius = Math.min(width, height, depth) / 2
-
-    this.object3d.geometry = new THREE.SphereGeometry(radius, 32, 32)
-  }
-}

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

@@ -1,41 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import * as THREE from 'three'
-
-import { RealObject } from './real-object'
-
-const DEFAULT = {
-  far: 100000,
-  fov: 80,
-  near: 1,
-  zoom: 1
-}
-
-export class RealObjectCamera extends RealObject<THREE.PerspectiveCamera> {
-  protected _camera?: THREE.PerspectiveCamera
-
-  build() {
-    super.build()
-  }
-
-  update() {
-    super.update()
-
-    this.updateCamera()
-  }
-
-  protected getObject3dInstance() {
-    return new THREE.PerspectiveCamera()
-  }
-
-  updateCamera() {
-    var { near = DEFAULT.near, far = DEFAULT.far, fov = DEFAULT.fov, zoom = DEFAULT.zoom } = this.component.state
-
-    this.object3d.far = far
-    this.object3d.fov = fov
-    this.object3d.near = near
-    this.object3d.zoom = zoom
-  }
-}

package/src/threed/real-object-dom-element.ts

@@ -1,55 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { HTMLOverlayElement, HTMLOverlayContainer, DELTA } from '@hatiolab/things-scene'
-
-import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js'
-import { RealObject } from './real-object'
-
-export class RealObjectDomElement extends RealObject<CSS3DObject> {
-  protected getObject3dInstance() {
-    return new CSS3DObject((this.component as HTMLOverlayElement | HTMLOverlayContainer).element)
-  }
-
-  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
-  }
-
-  build() {
-    super.build()
-
-    var element = (this.component as HTMLOverlayElement | HTMLOverlayContainer).element
-
-    var { width, height } = this.component.bounds
-
-    element.style.width = width + 'px'
-    element.style.height = height + 'px'
-
-    element.style.left = ''
-    element.style.top = ''
-  }
-
-  updateDimension() {
-    super.updateDimension()
-
-    var dimension = this.dimension
-    ;(this.component as HTMLOverlayElement | HTMLOverlayContainer).element.style.width = dimension.width + 'px'
-    ;(this.component as HTMLOverlayElement | HTMLOverlayContainer).element.style.height = dimension.height + 'px'
-  }
-
-  updateAlpha() {
-    super.updateAlpha()
-
-    // material의 opacity는 항상 0으로 유지되어야 하며,
-    // dom element의 opacity에 alpha를 적용해야한다.
-    // 하지만, 컬러톤의 반영 외에 transparent 기능은 하지 못하므로, 뒤에 있는 오브젝트를 보여주지 못한다.
-    var { alpha = 1 } = this.component.state
-
-    ;(this.component as HTMLOverlayElement | HTMLOverlayContainer).element.style.opacity = alpha
-  }
-}

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

@@ -1,13 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import * as THREE from 'three'
-import { RealObject } from './real-object'
-
-export class RealObjectDummy extends RealObject<THREE.Object3D> {
-  build() {
-    super.build()
-  }
-  update() {}
-}

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

@@ -1,210 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import * as THREE from 'three'
-
-import { RealObject } from './real-object'
-
-import { BoundUVGenerator } from './utils/bound-uv-generator'
-import { createCanvas } from './html/elements'
-import { applyAlpha } from './common'
-
-export class RealObjectExtrude extends RealObject {
-  _boundUVGenerator?: BoundUVGenerator
-  private _mainMesh?: THREE.Mesh
-  private _sideMesh?: THREE.Mesh
-
-  get shape(): any {
-    return null
-  }
-
-  get sideShape() {
-    return null
-  }
-
-  get boundUVGenerator() {
-    if (!this._boundUVGenerator) this._boundUVGenerator = new BoundUVGenerator()
-
-    return this._boundUVGenerator
-  }
-
-  build() {
-    super.build()
-
-    var { depth = 1 } = this.component.state
-
-    // 다각형 그리기
-    var shape = this.shape
-    if (!shape) {
-      return
-    }
-
-    var boundUVGenerator = this.boundUVGenerator
-
-    if (boundUVGenerator) {
-      boundUVGenerator.setShape({
-        extrudedShape: shape,
-        extrudedOptions: {
-          depth
-        }
-      })
-    }
-
-    var geometry = this.createGeometry(shape)
-
-    var material = this.createMainMaterial()
-    this._mainMesh = this.createMainMesh(geometry, material as THREE.Material)
-    this._mainMesh.castShadow = true
-
-    this.object3d.add(this._mainMesh)
-
-    this._sideMesh = this.createSideMesh(geometry, shape /* FIXME , extrudeSettings */)
-    this._sideMesh.castShadow = true
-
-    this.object3d.add(this._sideMesh)
-
-    this.updateFillStyle()
-    this.updateStrokeStyle()
-  }
-
-  createGeometry(shape: THREE.Shape): THREE.BufferGeometry {
-    const { depth = 1 } = this.component.state
-
-    const extrudeSettings = {
-      steps: 1,
-      depth,
-      bevelEnabled: false,
-      UVGenerator: this.boundUVGenerator
-    } as THREE.ExtrudeGeometryOptions
-
-    var geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings)
-    geometry.center()
-
-    return geometry as any
-  }
-
-  createMainMaterial() {
-    return new THREE.MeshStandardMaterial({
-      metalness: 0.5,
-      roughness: 0.5
-    })
-  }
-
-  createMainMesh(geometry: THREE.BufferGeometry, material: THREE.Material) {
-    var mesh = new THREE.Mesh(geometry, material)
-    mesh.rotation.x = -Math.PI / 2
-    mesh.rotation.y = -Math.PI
-    mesh.rotation.z = -Math.PI
-
-    return mesh
-  }
-
-  createSideMesh(geometry: THREE.BufferGeometry, shape: THREE.Shape) {
-    var { depth = 1, lineWidth = 0 } = this.component.state
-
-    var hole = new THREE.Path()
-    hole.setFromPoints(shape.getPoints())
-
-    var sideMaterial = new THREE.MeshStandardMaterial({
-      metalness: 0.5,
-      roughness: 0.5,
-      // prevent overlapped layers flickering
-      polygonOffset: true,
-      polygonOffsetFactor: -0.1
-    })
-
-    shape = this.sideShape || shape
-    shape.holes.push(hole)
-
-    var sideExtrudeSettings = {
-      steps: 1,
-      depth: depth + 1,
-      bevelEnabled: true,
-      bevelThickness: 0,
-      bevelSize: lineWidth,
-      bevelSizeSegments: 5
-    }
-
-    var sideGeometry = new THREE.ExtrudeGeometry(shape, sideExtrudeSettings)
-    sideGeometry.center()
-
-    var sideMesh = new THREE.Mesh(sideGeometry, sideMaterial)
-    sideMesh.rotation.x = -Math.PI / 2
-    sideMesh.rotation.y = -Math.PI
-    sideMesh.rotation.z = -Math.PI
-
-    return sideMesh
-  }
-
-  createTexture() {
-    function nextPowerOf2(n: number) {
-      var count = 0
-
-      if (n && !(n & (n - 1))) {
-        return n
-      }
-
-      while (n != 0) {
-        n >>= 1
-        count += 1
-      }
-
-      return 1 << count
-    }
-
-    var { width, height } = this.component.bounds
-
-    var poweredWidth = nextPowerOf2(width)
-    var poweredHeight = nextPowerOf2(height)
-
-    let canvas = createCanvas(poweredWidth, poweredHeight)
-    this.component.render(canvas.getContext('2d')!)
-
-    var texture = new THREE.CanvasTexture(canvas)
-
-    texture.needsUpdate = true
-    texture.wrapS = THREE.RepeatWrapping
-    texture.wrapT = THREE.RepeatWrapping
-    texture.offset.set(0, 1 - height / poweredHeight)
-    texture.repeat.set(width / poweredWidth, height / poweredHeight)
-    texture.minFilter = THREE.LinearFilter
-
-    return texture
-  }
-
-  updateAlpha() {
-    var { alpha = 1, fillStyle, strokeStyle } = this.component.state
-
-    this._mainMesh && applyAlpha(this._mainMesh.material, alpha, fillStyle)
-    this._sideMesh && applyAlpha(this._sideMesh.material, alpha, strokeStyle)
-  }
-
-  updateStrokeStyle() {
-    const material = this._sideMesh?.material as THREE.MeshStandardMaterial
-    if (!material) {
-      return
-    }
-
-    var { strokeStyle } = this.component.state
-
-    material.color.set(strokeStyle)
-  }
-
-  updateFillStyle() {
-    var { fillStyle, alpha = 1 } = this.component.state
-
-    var material = this._mainMesh?.material as THREE.MeshStandardMaterial
-    if (!material) {
-      return
-    }
-
-    const texture = RealObject.buildFillStyleTexture(this.component)
-
-    if (texture) {
-      material.map = texture
-    } else {
-      material.color.set(fillStyle)
-    }
-  }
-}

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

@@ -1,136 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import * as THREE from 'three'
-import { error } from '@hatiolab/things-scene'
-
-import { RealObject } from './real-object'
-
-import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
-import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
-import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader'
-// @ts-ignore
-import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js'
-import { Properties } from '@hatiolab/things-scene'
-
-export class RealObjectGLTF extends RealObject {
-  private static _GLTFLoader = new GLTFLoader()
-
-  private pivot?: THREE.Object3D
-  private objectSize?: THREE.Vector3 = new THREE.Vector3()
-
-  static get GLTFLoader() {
-    return RealObjectGLTF._GLTFLoader
-  }
-
-  build() {
-    super.build()
-
-    var { src: source } = this.component.state
-
-    if (!source) {
-      this.clear()
-      return
-    }
-
-    let gltfLoader = new GLTFLoader()
-
-    // Optional: Provide a DRACOLoader instance to decode compressed mesh data
-    const dracoLoader = new DRACOLoader()
-    dracoLoader.setDecoderPath('/node_modules/three/examples/jsm/libs/draco/')
-    gltfLoader.setDRACOLoader(dracoLoader)
-
-    const ktx2Loader = new KTX2Loader()
-    ktx2Loader.setTranscoderPath(`/node_modules/three/examples/jsm/libs/basis/`)
-    ktx2Loader.detectSupport(this.threeContainer!.renderer3d!)
-    gltfLoader.setKTX2Loader(ktx2Loader)
-
-    gltfLoader.setMeshoptDecoder(MeshoptDecoder)
-
-    var fullsource = this.component.app.url(source)
-    gltfLoader.setCrossOrigin('use-credentials')
-
-    gltfLoader.load(
-      fullsource,
-      gltf => {
-        this.gltfLoaded(gltf)
-      },
-      xhr => {
-        console.log(Math.round((xhr.loaded / xhr.total) * 100) + '% loaded')
-      },
-      err => {
-        error('GLTFLoader.load', err)
-        this.clear()
-      }
-    )
-  }
-
-  private gltfLoaded(gltf: GLTF) {
-    let scene = gltf.scene
-
-    var animations = gltf.animations
-    var object = scene.clone()
-    object.userData.context = this
-
-    object.traverse((child: THREE.Object3D) => {
-      if ((child as any).isMesh) {
-        child.castShadow = true
-      }
-    })
-
-    var boundingBox = new THREE.Box3().setFromObject(object)
-    var center = boundingBox.getCenter(object.position)
-    this.objectSize = boundingBox.getSize(this.objectSize!)
-
-    center.multiplyScalar(-1)
-
-    // 오브젝트 공백을 최소로 하기위해서 clear() 를 최대한 pending함.
-    this.clear()
-
-    this.pivot = new THREE.Object3D()
-    this.object3d.add(this.pivot)
-    this.pivot.add(object)
-
-    this.updateDimension()
-
-    if (animations && animations.length) {
-      for (var i = 0; i < animations.length; i++) {
-        var animation = animations[i]
-        var action = this.threeContainer!.mixer!.clipAction(animation)
-        action.play()
-      }
-    } else {
-      console.log('no animations..')
-    }
-  }
-
-  clear() {
-    // TODO gltf object 리소스 해제가 필요하면, 여기에 추가.
-    // 반복적으로 로딩하면 WebGL 리소스 부족으로 오류 발생.
-
-    return super.clear()
-  }
-
-  updateDimension() {
-    var { width = 1, height = 1, depth = 1 } = this.component.state
-
-    var { x = 1, y = 1, z = 1 } = this.objectSize || {}
-
-    this.pivot && this.pivot.scale.set(width / x, depth / y, height / z)
-
-    this.component.invalidate()
-  }
-
-  updateSource() {
-    this.build()
-  }
-
-  onchange(after: Properties, before: Properties) {
-    super.onchange(after, before)
-
-    if ('src' in after) {
-      this.updateSource()
-    }
-  }
-}

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

@@ -1,35 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import * as THREE from 'three'
-import { RealObject } from './real-object'
-
-export class RealObjectGroup extends RealObject<THREE.Group> {
-  protected getObject3dInstance() {
-    return new THREE.Group()
-  }
-
-  // build() {
-  // super.build()
-
-  //   var { left = 0, top = 0, width = 0, height = 0 } = this.component.bounds
-
-  //   let cx = left + width / 2 - canvasSize.width / 2
-  //   let cy = top + height / 2 - canvasSize.height / 2
-  //   // let cz = this.state.rx
-
-  //   this.object3d.position.x = cx
-  //   this.object3d.position.z = cy
-  // }
-
-  // createChildrenObject() {
-  //   var { components } = this._model
-
-  //   components.forEach((component: Model) => {
-  //     var item = component.getRealObject()
-  //     if (item) {
-  //       this.object3d.add(item.object3d)
-  //     }
-  //   })
-  // }
-}