@operato/scene-visualizer 1.2.11 → 1.2.13

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

@@ -8,8 +8,6 @@ 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

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

@@ -2,51 +2,47 @@
  * Copyright © HatioLab Inc. All rights reserved.
  */
 
-import { RealObjectMesh } from './real-object-mesh'
-
 import * as THREE from 'three'
+import { applyAlpha } from './common'
 
-import { textTexture, textBounds } from './texture/text-texture'
+import { RealObjectMesh } from './real-object-mesh'
+import { textTexture } from './texture/text-texture'
 
 /**
  * RealObjectText
  */
 export class RealObjectText extends RealObjectMesh {
-  buildGeometry() {
-    // TODO component.text의 heavy한 로직을 반복적으로 실행하지 않도록, 캐싱하자.
-    var {
-      bold = false,
-      italic = false,
-      fontFamily = 'Serif',
-      fontSize = 10,
-      fontColor = 'black'
-    } = this.component.state
+  buildGeometry() {}
 
-    var text = this.component.text
-    let { width, height } = textBounds(text, {
-      bold,
-      italic,
-      fontFamily,
-      fontSize,
-      fontColor
-    })
+  /* overide */
 
-    // FIXME
-    // ;(this.component as any).dimension = {
-    //   width,
-    //   height,
-    //   depth: 1
-    // }
-    this.component.setState({
-      width,
-      depth: 1,
-      height
-    })
+  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
 
-    return new THREE.PlaneGeometry(width, height)
+    if (this.object3d.geometry) {
+      this.object3d.geometry.dispose()
+    }
+
+    /* scaling으로 해결되지 않기때문에, 새로 geometry를 만드는 방법을 사용한다 */
+    this.object3d.geometry = new THREE.PlaneGeometry(width, height)
   }
 
-  buildMaterial() {
+  updateText() {
+    var material = this.object3d.material as THREE.MeshStandardMaterial
+    if (!material) {
+      return
+    }
+
     var {
       width,
       height,
@@ -54,44 +50,37 @@ export class RealObjectText extends RealObjectMesh {
       italic = false,
       fontFamily = 'Serif',
       fontSize = 10,
-      fontColor = 'black'
+      fontColor = 'black',
+      fillStyle
     } = this.component.state
 
-    // TODO component.text의 heavy한 로직을 반복적으로 실행하지 않도록, 캐싱하자.
     var text = this.component.text
 
-    return new THREE.MeshBasicMaterial({
-      map: textTexture(text, width, height, {
-        bold,
-        italic,
-        fontFamily,
-        fontSize,
-        fontColor
-      }),
-      transparent: true,
-      alphaTest: 0.2,
-      side: THREE.DoubleSide
+    const texture = textTexture(text, width, height, {
+      bold,
+      italic,
+      fontFamily,
+      fontSize,
+      fontColor
     })
-  }
 
-  /* overide */
-  updateDimension() {
-    // Intentionally do nothing
-  }
-
-  get rotation() {
-    const { rotationX = 0, rotationY = 0, rotation = 0 } = this.component.state
-
-    return {
-      x: rotationX - Math.PI / 2,
-      y: rotationY,
-      z: rotation
+    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으로 유지되어야 한다.
-    super.updateAlpha()
+    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

@@ -28,6 +28,7 @@ export abstract class RealObject<T extends THREE.Object3D = THREE.Object3D> {
           texture.minFilter = THREE.LinearFilter
           texture.encoding = THREE.sRGBEncoding
           texture.repeat.set(1, 1)
+          texture.needsUpdate = true
 
           component.invalidate()
         },
@@ -49,9 +50,13 @@ export abstract class RealObject<T extends THREE.Object3D = THREE.Object3D> {
     this.clear()
     this.build()
 
+    this.updateDimension()
     this.updateTransform()
+    this.updateFillStyle()
+    this.updateStrokeStyle()
     this.updateAlpha()
     this.updateHidden()
+    this.updateText()
   }
 
   protected getObject3dInstance(): T {
@@ -243,7 +248,8 @@ export abstract class RealObject<T extends THREE.Object3D = THREE.Object3D> {
   }
 
   updateDimension() {
-    this.update()
+    var { width, height, depth } = this.dimension
+    this.object3d.scale.set(width, height, depth)
   }
 
   updateAlpha() {
@@ -270,32 +276,23 @@ export abstract class RealObject<T extends THREE.Object3D = THREE.Object3D> {
     this.object3d.visible = !this.component.state.hidden
   }
 
-  updateStrokeStyle() {
-    this.update()
-  }
-
-  updateFillStyle() {
-    this.update()
-  }
-
-  updateText() {
-    this.update()
-  }
+  updateStrokeStyle() {}
+  updateFillStyle() {}
+  updateText() {}
 
   onchange(after: Properties, before: Properties) {
-    if (hasProperties(this.rebuildingProperties, after)) {
-      this.update()
-      return
-    }
-
     if (hasProperties(['cx', 'cy', 'cz', 'zPos', 'left', 'top'], after)) {
-      this.updateDimension()
+      this.updatePosition()
     }
 
     if (hasProperties(['width', 'height', 'depth'], after)) {
       this.updateDimension()
     }
 
+    if (hasProperties(['rotationX', 'rotationY', 'rotation'], after)) {
+      this.updateRotate()
+    }
+
     if ('scale' in after) {
       this.updateScale()
     }
@@ -320,8 +317,4 @@ export abstract class RealObject<T extends THREE.Object3D = THREE.Object3D> {
       this.updateText()
     }
   }
-
-  get rebuildingProperties(): string[] {
-    return ['width', 'height', 'depth', 'fillStyle', 'strokeStyle', 'text', 'path']
-  }
 }

package/src/wall.ts

@@ -1,7 +1,7 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
-import { Component, RectPath, Shape } from '@hatiolab/things-scene'
+import { Component, Properties, RectPath, Shape } from '@hatiolab/things-scene'
 import * as THREE from 'three'
 import { RealObject } from './threed/real-object'
 import { RealObjectMesh } from './threed/real-object-mesh'
@@ -23,14 +23,13 @@ const NATURE = {
 
 export class Wall3D extends RealObjectMesh {
   buildGeometry() {
-    var { width, height, depth = 1 } = this.component.state
-    return new THREE.BoxGeometry(width, depth, height)
+    this.object3d.geometry = new THREE.BoxGeometry(1, 1, 1)
   }
 
-  buildMaterial() {
-    var { fillStyle = 'gray' } = this.component.state
+  updateDimension(): void {
+    var { width, height, depth = 1 } = this.component.state
 
-    return new THREE.MeshStandardMaterial({ color: fillStyle, side: THREE.FrontSide })
+    this.object3d.scale.set(width, depth, height)
   }
 }