@operato/scene-visualizer 1.2.12 → 1.2.14

package/src/sphere.ts

@@ -18,16 +18,7 @@ export class Sphere3D extends RealObjectMesh {
   buildGeometry() {
     var { rx = 0 } = this.component.state
 
-    return new THREE.SphereGeometry(rx, 20, 20)
-  }
-
-  buildMaterial() {
-    var { fillStyle = 'gray' } = this.component.state
-
-    return new THREE.MeshStandardMaterial({
-      color: fillStyle,
-      side: THREE.FrontSide
-    })
+    this.object3d.geometry = new THREE.SphereGeometry(rx, 20, 20)
   }
 }
 

package/src/sprite.ts

@@ -22,14 +22,6 @@ export class Sprite extends RectPath(Shape) {
     return new RealObjectSprite2D(this)
   }
 
-  // ready() {
-  //   super.ready()
-
-  //   setInterval(() => {
-  //     this.text = String(Math.random())
-  //   }, 1000)
-  // }
-
   get nature() {
     return NATURE
   }

package/src/stock.ts

@@ -32,10 +32,6 @@ export class Stock extends RealObject<THREE.Mesh> {
     return new THREE.Mesh()
   }
 
-  updateTransform() {
-    // intentionally empty. important!
-  }
-
   getMaterial(index: number) {
     var visualizer = this.visualizer
 
@@ -157,8 +153,6 @@ export class Stock extends RealObject<THREE.Mesh> {
     }
   }
 
-  updateAlpha() {}
-
   onchangeStockData(data: any) {
     var visualizer = this.visualizer
 
@@ -256,4 +250,13 @@ export class Stock extends RealObject<THREE.Mesh> {
       })
     }
   }
+
+  // all update functions should be intentionally empty. important!
+  updateTransform() {}
+  updateDimension() {}
+  updateAlpha() {}
+  updateFillStyle() {}
+  updateStrokeStyle() {}
+  updateHidden() {}
+  updateText() {}
 }

package/src/threed/common.ts

@@ -4,14 +4,15 @@ export const SCALE_MIN = 0.001
 
 export function applyAlpha(material: any, alpha: number, fillStyle: any) {
   var opacity = 1
-  if (!fillStyle || fillStyle == 'none') {
-    opacity = alpha
+  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 }

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

@@ -62,6 +62,6 @@ export class RealObjectCamera extends RealObjectMesh {
 
     var radius = Math.min(width, height, depth) / 2
 
-    return new THREE.SphereGeometry(radius, 32, 32)
+    this.object3d.geometry = new THREE.SphereGeometry(radius, 32, 32)
   }
 }

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

@@ -15,32 +15,6 @@ export class RealObjectDomElement extends RealObject<CSS3DObject> {
     return new CSS3DObject((this.component as HTMLOverlayElement | HTMLOverlayContainer).element)
   }
 
-  // private _cssObject3d?: THREE.Object3D
-
-  // buildGeometry() {
-  //   var { width, height } = this.component.bounds
-
-  //   return new THREE.PlaneGeometry(width, height)
-  // }
-
-  // buildMaterial() /* : THREE.MeshMaterialType | THREE.MeshMaterialType[] */ {
-  //   var material = new THREE.MeshBasicMaterial()
-
-  //   material.color.set('black')
-  //   material.opacity = 0
-  //   material.side = THREE.DoubleSide
-  //   material.blending = THREE.NoBlending
-
-  //   return material
-  // }
-
-  // get cssObject3d(): THREE.Object3D {
-  //   if (!this._cssObject3d) {
-  //     this._cssObject3d = this.buildCSS3DObject()
-  //   }
-  //   return this._cssObject3d
-  // }
-
   build() {
     super.build()
 
@@ -53,53 +27,8 @@ export class RealObjectDomElement extends RealObject<CSS3DObject> {
 
     element.style.left = ''
     element.style.top = ''
-
-    // this.object3d.add()
-
-    // const cssobj = new CSS3DObject(element)
-    // cssobj.position.set(-1, -1, 0)
-
-    // this.object3d.add(cssobj)
-
-    // return cssobj
   }
 
-  /**
-   * Component의 상태값의 변화를 Object3D에 반영 - translate, rotation, scale
-   */
-  // updateTransform() {
-  //   super.updateTransform()
-
-  //   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.cssObject3d.position.set(tx, ty, tz)
-  //   this.cssObject3d.rotation.set(rx, ry, rz)
-  //   this.cssObject3d.scale.set(Math.max(sx, SCALE_MIN), Math.max(sy, SCALE_MIN), Math.max(sz, SCALE_MIN))
-  // }
-
-  // updatePosition() {
-  //   super.updatePosition()
-
-  //   var { x: tx, y: ty, z: tz } = this.position
-  //   this.cssObject3d.position.set(tx, ty, tz)
-  // }
-
-  // updateRotate() {
-  //   super.updateRotate()
-
-  //   var { x: rx, y: ry, z: rz } = this.rotation
-  //   this.cssObject3d.rotation.set(rx, ry, rz)
-  // }
-
-  // updateScale() {
-  //   super.updateScale()
-
-  //   var { x: sx, y: sy, z: sz } = this.scale
-  //   this.cssObject3d.scale.set(Math.max(sx, SCALE_MIN), Math.max(sy, SCALE_MIN), Math.max(sz, SCALE_MIN))
-  // }
-
   updateDimension() {
     super.updateDimension()
 

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

@@ -3,7 +3,6 @@
  */
 
 import * as THREE from 'three'
-import tinycolor from 'tinycolor2'
 
 import { RealObject } from './real-object'
 
@@ -33,7 +32,7 @@ export class RealObjectExtrude extends RealObject {
   build() {
     super.build()
 
-    var { depth = 1, fillStyle = 0xffffff, strokeStyle = 0x636363, lineWidth = 1, alpha = 1 } = this.component.state
+    var { depth = 1 } = this.component.state
 
     // 다각형 그리기
     var shape = this.shape
@@ -54,20 +53,19 @@ export class RealObjectExtrude extends RealObject {
 
     var geometry = this.createGeometry(shape)
 
-    if (fillStyle && fillStyle != 'none') {
-      var material = this.createMaterial()
-      this._mainMesh = this.createMesh(geometry, material as THREE.Material)
-      this._mainMesh.castShadow = true
+    var material = this.createMainMaterial()
+    this._mainMesh = this.createMainMesh(geometry, material as THREE.Material)
+    this._mainMesh.castShadow = true
 
-      this.object3d.add(this._mainMesh)
-    }
+    this.object3d.add(this._mainMesh)
 
-    if (strokeStyle && strokeStyle != 'transparent' && lineWidth > 0) {
-      this._sideMesh = this.createSideMesh(geometry, shape /* FIXME , extrudeSettings */)
-      this._sideMesh.castShadow = true
+    this._sideMesh = this.createSideMesh(geometry, shape /* FIXME , extrudeSettings */)
+    this._sideMesh.castShadow = true
 
-      this.object3d.add(this._sideMesh)
-    }
+    this.object3d.add(this._sideMesh)
+
+    this.updateFillStyle()
+    this.updateStrokeStyle()
   }
 
   createGeometry(shape: THREE.Shape): THREE.BufferGeometry {
@@ -86,37 +84,14 @@ export class RealObjectExtrude extends RealObject {
     return geometry as any
   }
 
-  createMaterial() {
-    var { fillStyle = 'black', alpha = 1 } = this.component.state
-
-    var params = {} as any
-    var opacity = alpha
-    const texture = RealObject.buildFillStyleTexture(this.component)
-
-    if (texture) {
-      params = {
-        map: texture,
-        side: THREE.FrontSide
-      }
-    } else if (typeof fillStyle == 'string') {
-      if (fillStyle !== 'transparent') {
-        params.color = fillStyle
-        opacity *= tinycolor(fillStyle).getAlpha()
-      } else {
-        opacity = 0
-      }
-    }
-
+  createMainMaterial() {
     return new THREE.MeshStandardMaterial({
-      ...params,
-      opacity,
-      transparent: opacity < 1,
       metalness: 0.5,
       roughness: 0.5
     })
   }
 
-  createMesh(geometry: THREE.BufferGeometry, material: THREE.Material) {
+  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
@@ -126,26 +101,19 @@ export class RealObjectExtrude extends RealObject {
   }
 
   createSideMesh(geometry: THREE.BufferGeometry, shape: THREE.Shape) {
-    var { strokeStyle = 0x000000, depth = 1, lineWidth = 0, alpha = 1 } = this.component.state
+    var { depth = 1, lineWidth = 0 } = this.component.state
 
     var hole = new THREE.Path()
     hole.setFromPoints(shape.getPoints())
 
     var sideMaterial = new THREE.MeshStandardMaterial({
-      color: strokeStyle,
       metalness: 0.5,
-      roughness: 0.5
+      roughness: 0.5,
+      // prevent overlapped layers flickering
+      polygonOffset: true,
+      polygonOffsetFactor: -0.1
     })
 
-    var tinyStrokeStyle = tinycolor(strokeStyle)
-    var strokeAlpha = tinyStrokeStyle.getAlpha()
-    sideMaterial.opacity = alpha * strokeAlpha
-    sideMaterial.transparent = alpha < 1 || strokeAlpha < 1
-
-    // prevent overlapped layers flickering
-    sideMaterial.polygonOffset = true
-    sideMaterial.polygonOffsetFactor = -0.1
-
     shape = this.sideShape || shape
     shape.holes.push(hole)
 
@@ -187,7 +155,6 @@ export class RealObjectExtrude extends RealObject {
 
     var { width, height } = this.component.bounds
 
-    // TODO component.text의 heavy한 로직을 반복적으로 실행하지 않도록, 캐싱하자.
     var poweredWidth = nextPowerOf2(width)
     var poweredHeight = nextPowerOf2(height)
 
@@ -207,23 +174,27 @@ export class RealObjectExtrude extends RealObject {
   }
 
   updateAlpha() {
-    var { alpha = 1, fillStyle, lineStyle } = this.component.state
+    var { alpha = 1, fillStyle, strokeStyle } = this.component.state
 
     this._mainMesh && applyAlpha(this._mainMesh.material, alpha, fillStyle)
-    this._sideMesh && applyAlpha(this._sideMesh.material, alpha, lineStyle && lineStyle.strokeStyle)
+    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
 
-    if (typeof strokeStyle == 'string') {
-      ;(this._sideMesh?.material as THREE.MeshStandardMaterial).color.set(strokeStyle)
-    }
+    material.color.set(strokeStyle)
   }
 
   updateFillStyle() {
-    var { fillStyle } = this.component.state
-    var material = this._mainMesh?.material as THREE.MeshLambertMaterial
+    var { fillStyle, alpha = 1 } = this.component.state
+
+    var material = this._mainMesh?.material as THREE.MeshStandardMaterial
     if (!material) {
       return
     }
@@ -232,17 +203,8 @@ export class RealObjectExtrude extends RealObject {
 
     if (texture) {
       material.map = texture
-    } else if (typeof fillStyle == 'string') {
-      if (fillStyle !== 'transparent') {
-        material.color.set(fillStyle)
-      } else {
-        // material.color.set(fillStyle)
-        material.opacity = 0
-      }
+    } else {
+      material.color.set(fillStyle)
     }
   }
-
-  get rebuildingProperties(): string[] {
-    return ['width', 'height', 'depth', 'text', 'path']
-  }
 }

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

@@ -91,7 +91,7 @@ export class RealObjectGLTF extends RealObject {
     this.object3d.add(this.pivot)
     this.pivot.add(object)
 
-    this._rescale()
+    this.updateDimension()
 
     if (animations && animations.length) {
       for (var i = 0; i < animations.length; i++) {
@@ -111,7 +111,7 @@ export class RealObjectGLTF extends RealObject {
     return super.clear()
   }
 
-  _rescale() {
+  updateDimension() {
     var { width = 1, height = 1, depth = 1 } = this.component.state
 
     var { x = 1, y = 1, z = 1 } = this.objectSize || {}
@@ -120,12 +120,4 @@ export class RealObjectGLTF extends RealObject {
 
     this.component.invalidate()
   }
-
-  updateDimension() {
-    this._rescale()
-  }
-
-  get rebuildingProperties(): string[] {
-    return ['fillStyle', 'lineStyle', 'text']
-  }
 }

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

@@ -15,8 +15,8 @@ export abstract class RealObjectMesh extends RealObject<THREE.Mesh> {
   build() {
     super.build()
 
-    this.object3d.geometry = this.buildGeometry()
-    this.object3d.material = this.buildMaterial()
+    this.buildGeometry()
+    this.buildMaterial()
   }
 
   /* overide */
@@ -31,27 +31,34 @@ export abstract class RealObjectMesh extends RealObject<THREE.Mesh> {
     this.object3d.visible = !this.component.state.hidden
   }
 
-  protected abstract buildGeometry(): THREE.BufferGeometry
-
-  buildMaterial(): THREE.Material {
+  updateFillStyle() {
     var { fillStyle } = this.component.state
+    var material = this.object3d.material as THREE.MeshStandardMaterial
+    if (!material) {
+      return
+    }
 
-    var params: any = {}
     const texture = RealObject.buildFillStyleTexture(this.component)
 
     if (texture) {
-      params = {
-        map: texture
-      }
-    } else {
-      params = {
-        color: fillStyle || '#FFF'
+      texture.needsUpdate = true
+      material.map = texture
+    } else if (typeof fillStyle == 'string') {
+      if (fillStyle !== 'transparent') {
+        material.color.set(fillStyle)
+      } else {
+        material.opacity = 0
       }
     }
+  }
 
-    const material = new THREE.MeshLambertMaterial(params)
+  protected abstract buildGeometry(): void
 
-    return material
+  buildMaterial(): void {
+    this.object3d.material = new THREE.MeshStandardMaterial({
+      transparent: true,
+      side: THREE.DoubleSide
+    })
   }
 
   clear() {

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

@@ -14,17 +14,14 @@ export class RealObjectPlane extends RealObjectMesh {
   buildGeometry() {
     var { width, height } = this.component.state.dimension
 
-    return new THREE.PlaneGeometry(width, height)
+    this.object3d.geometry = new THREE.PlaneGeometry(width, height)
   }
 
   buildMaterial() /* : THREE.MeshMaterialType | THREE.MeshMaterialType[] */ {
-    var material = new THREE.MeshBasicMaterial()
-
-    material.color.set('black')
-    material.opacity = 0
-    material.side = THREE.DoubleSide
-    material.blending = THREE.NoBlending
-
-    return material
+    this.object3d.material = new THREE.MeshStandardMaterial({
+      opacity: 0,
+      side: THREE.DoubleSide,
+      blending: THREE.NoBlending
+    })
   }
 }

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

@@ -7,18 +7,7 @@ import { RealObjectSprite } from './real-object-sprite'
 import { createCanvasTexture } from './texture/canvas-texture'
 
 export class RealObjectSprite2D extends RealObjectSprite {
-  buildMaterial() {
-    var { fillStyle } = this.component.state
-
-    var material = new THREE.SpriteMaterial({
-      map: createCanvasTexture(this.component),
-      alphaTest: 0.1
-    })
-
-    material.sizeAttenuation = false
-
-    return material
-  }
+  buildMaterial() {}
 
   get scale() {
     const { width, height } = this.component.bounds
@@ -31,4 +20,18 @@ export class RealObjectSprite2D extends RealObjectSprite {
       z: scale
     }
   }
+
+  updateFillStyle() {
+    var material = this.object3d.material as THREE.SpriteMaterial
+    if (material) {
+      material.dispose()
+    }
+
+    this.object3d.material = new THREE.SpriteMaterial({
+      map: createCanvasTexture(this.component),
+      alphaTest: 0.1
+    })
+
+    this.object3d.material.sizeAttenuation = false
+  }
 }

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

@@ -3,6 +3,7 @@
  */
 
 import * as THREE from 'three'
+import { applyAlpha } from './common'
 
 import { RealObject } from './real-object'
 
@@ -14,8 +15,41 @@ export abstract class RealObjectSprite extends RealObject<THREE.Sprite> {
   build() {
     super.build()
 
-    this.object3d.material = this.buildMaterial()
+    this.buildMaterial()
   }
 
-  abstract buildMaterial(): THREE.SpriteMaterial
+  abstract buildMaterial(): void
+
+  /* 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.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
+      }
+    }
+  }
 }