@operato/scene-visualizer 1.2.12 → 1.2.13

package/dist/wall.d.ts

@@ -1,10 +1,9 @@
 import { Shape } from '@hatiolab/things-scene';
-import * as THREE from 'three';
 import { RealObject } from './threed/real-object';
 import { RealObjectMesh } from './threed/real-object-mesh';
 export declare class Wall3D extends RealObjectMesh {
-    buildGeometry(): THREE.BoxGeometry;
-    buildMaterial(): THREE.MeshStandardMaterial;
+    buildGeometry(): void;
+    updateDimension(): void;
 }
 declare const Wall_base: typeof Shape;
 export declare class Wall extends Wall_base {

package/dist/wall.js

@@ -20,12 +20,11 @@ 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;
-        return new THREE.MeshStandardMaterial({ color: fillStyle, side: THREE.FrontSide });
+    updateDimension() {
+        var { width, height, depth = 1 } = this.component.state;
+        this.object3d.scale.set(width, depth, height);
     }
 }
 export class Wall extends RectPath(Shape) {

package/dist/wall.js.map

@@ -1 +1 @@
-{"version":3,"file":"wall.js","sourceRoot":"","sources":["../src/wall.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE1D,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,OAAO;SAClB;KACF;IACD,IAAI,EAAE,sBAAsB;CAC7B,CAAA;AAED,MAAM,OAAO,MAAO,SAAQ,cAAc;IACxC,aAAa;QACX,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QACvD,OAAO,IAAI,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;IACpD,CAAC;IAED,aAAa;QACX,IAAI,EAAE,SAAS,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QAEjD,OAAO,IAAI,KAAK,CAAC,oBAAoB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC,CAAA;IACpF,CAAC;CACF;AAED,MAAM,OAAO,IAAK,SAAQ,QAAQ,CAAC,KAAK,CAAC;IACvC,OAAO;QACL,OAAO,IAAI,CAAA;IACb,CAAC;IAED,eAAe;QACb,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,CAAA;IACzB,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, RectPath, Shape } from '@hatiolab/things-scene'\nimport * as THREE from 'three'\nimport { RealObject } from './threed/real-object'\nimport { RealObjectMesh } from './threed/real-object-mesh'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'depth',\n      name: 'depth',\n      property: 'depth'\n    }\n  ],\n  help: 'scene/component/wall'\n}\n\nexport class Wall3D extends RealObjectMesh {\n  buildGeometry() {\n    var { width, height, depth = 1 } = this.component.state\n    return new THREE.BoxGeometry(width, depth, height)\n  }\n\n  buildMaterial() {\n    var { fillStyle = 'gray' } = this.component.state\n\n    return new THREE.MeshStandardMaterial({ color: fillStyle, side: THREE.FrontSide })\n  }\n}\n\nexport class Wall extends RectPath(Shape) {\n  is3dish() {\n    return true\n  }\n\n  buildRealObject(): RealObject | undefined {\n    return new Wall3D(this)\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('wall', Wall)\n"]}
+{"version":3,"file":"wall.js","sourceRoot":"","sources":["../src/wall.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,SAAS,EAAc,QAAQ,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAC/E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE1D,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,OAAO;SAClB;KACF;IACD,IAAI,EAAE,sBAAsB;CAC7B,CAAA;AAED,MAAM,OAAO,MAAO,SAAQ,cAAc;IACxC,aAAa;QACX,IAAI,CAAC,QAAQ,CAAC,QAAQ,GAAG,IAAI,KAAK,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IACzD,CAAC;IAED,eAAe;QACb,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QAEvD,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;IAC/C,CAAC;CACF;AAED,MAAM,OAAO,IAAK,SAAQ,QAAQ,CAAC,KAAK,CAAC;IACvC,OAAO;QACL,OAAO,IAAI,CAAA;IACb,CAAC;IAED,eAAe;QACb,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,CAAA;IACzB,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, Properties, RectPath, Shape } from '@hatiolab/things-scene'\nimport * as THREE from 'three'\nimport { RealObject } from './threed/real-object'\nimport { RealObjectMesh } from './threed/real-object-mesh'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'depth',\n      name: 'depth',\n      property: 'depth'\n    }\n  ],\n  help: 'scene/component/wall'\n}\n\nexport class Wall3D extends RealObjectMesh {\n  buildGeometry() {\n    this.object3d.geometry = new THREE.BoxGeometry(1, 1, 1)\n  }\n\n  updateDimension(): void {\n    var { width, height, depth = 1 } = this.component.state\n\n    this.object3d.scale.set(width, depth, height)\n  }\n}\n\nexport class Wall extends RectPath(Shape) {\n  is3dish() {\n    return true\n  }\n\n  buildRealObject(): RealObject | undefined {\n    return new Wall3D(this)\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('wall', Wall)\n"]}

package/logs/.08636eb59927f12972f6774f5947c8507b3564c2-audit.json

@@ -6,29 +6,14 @@
     "auditLog": "logs/.08636eb59927f12972f6774f5947c8507b3564c2-audit.json",
     "files": [
         {
-            "date": 1677609045030,
-            "name": "logs/application-2023-03-01-03.log",
-            "hash": "cbb1c94289188b68ae183ae07ad473504bbe4a945b6cca05d72a119ea99bcb95"
+            "date": 1677986779847,
+            "name": "logs/application-2023-03-05-12.log",
+            "hash": "b1491e6040f9ae51f97238e436babcce355a8fcfb99640f0e6291efa2dcb4fa1"
         },
         {
-            "date": 1677645356970,
-            "name": "logs/application-2023-03-01-13.log",
-            "hash": "2e4fa8c5b0be391ddcf9ea0e3777d0d9879f750168ea0bcf14b686417166135d"
-        },
-        {
-            "date": 1677651216796,
-            "name": "logs/application-2023-03-01-15.log",
-            "hash": "0632ba06863b1caa1df0f1e955f7cd363f3b0b0f0a93ba8a45ee6eb66430813c"
-        },
-        {
-            "date": 1677769390251,
-            "name": "logs/application-2023-03-03-00.log",
-            "hash": "3fe90aa25fcc912b5b407fcc5e5daf3c95233a379872c3a4b66ad446b53417ff"
-        },
-        {
-            "date": 1677772961148,
-            "name": "logs/application-2023-03-03-01.log",
-            "hash": "604655a0040727b80c6c4b55aacdb4013b09a98256e273e47e8a8940c3053c53"
+            "date": 1678026248957,
+            "name": "logs/application-2023-03-05-23.log",
+            "hash": "d76e61c4122d462e689279e776a5adccb0d78492a54a2410e86c85f3cebdc37d"
         }
     ],
     "hashType": "sha256"

package/logs/.5e5d741d8b7784a2fbad65eedc0fd46946aaf6f2-audit.json

@@ -89,6 +89,16 @@
             "date": 1677772962126,
             "name": "logs/connections-2023-03-03-01.log",
             "hash": "fc5531e11c4749dfce844fbb20984c87511eb069cda9d105048aa09e4a5f50d9"
+        },
+        {
+            "date": 1677986781600,
+            "name": "logs/connections-2023-03-05-12.log",
+            "hash": "a49891708de1da2d8dd2aef1fdd7dacb049daa2a80973bf57d9ca3d6f42ea105"
+        },
+        {
+            "date": 1678026250498,
+            "name": "logs/connections-2023-03-05-23.log",
+            "hash": "f0755fba64d96b7ddaf4a77da762e735bed176f67a348c4b6079a55857543572"
         }
     ],
     "hashType": "sha256"

package/logs/application-2023-03-05-12.log

@@ -0,0 +1,6 @@
+2023-03-05T12:26:20+09:00 info: File Storage is Ready.
+2023-03-05T12:26:21+09:00 error: oracledb module loading failed
+2023-03-05T12:26:22+09:00 info: Default DataSource established
+2023-03-05T12:26:22+09:00 info: Transaction DataSource established
+2023-03-05T12:26:23+09:00 info: 🚀 Server ready at http://0.0.0.0:3000/graphql
+2023-03-05T12:26:23+09:00 info: 🚀 Subscriptions ready at ws://0.0.0.0:3000/graphql

package/logs/application-2023-03-05-23.log

@@ -0,0 +1,6 @@
+2023-03-05T23:24:09+09:00 info: File Storage is Ready.
+2023-03-05T23:24:10+09:00 error: oracledb module loading failed
+2023-03-05T23:24:11+09:00 info: Default DataSource established
+2023-03-05T23:24:11+09:00 info: Transaction DataSource established
+2023-03-05T23:24:12+09:00 info: 🚀 Server ready at http://0.0.0.0:3000/graphql
+2023-03-05T23:24:12+09:00 info: 🚀 Subscriptions ready at ws://0.0.0.0:3000/graphql

package/logs/connections-2023-03-05-12.log

@@ -0,0 +1,35 @@
+2023-03-05T12:26:23+09:00 info: Initializing ConnectionManager...
+2023-03-05T12:26:23+09:00 info: Connector 'echo-back-server' started to ready
+2023-03-05T12:26:23+09:00 info: Connector 'echo-back' started to ready
+2023-03-05T12:26:23+09:00 info: Connector 'http-connector' started to ready
+2023-03-05T12:26:23+09:00 info: Connector 'graphql-connector' started to ready
+2023-03-05T12:26:23+09:00 info: Connector 'sqlite-connector' started to ready
+2023-03-05T12:26:23+09:00 info: Connector 'postgresql-connector' started to ready
+2023-03-05T12:26:23+09:00 info: Connector 'mqtt-connector' started to ready
+2023-03-05T12:26:23+09:00 info: Connector 'mssql-connector' started to ready
+2023-03-05T12:26:23+09:00 info: Connector 'oracle-connector' started to ready
+2023-03-05T12:26:23+09:00 info: Connector 'mysql-connector' started to ready
+2023-03-05T12:26:23+09:00 info: Connector 'socket-server' started to ready
+2023-03-05T12:26:23+09:00 info: echo-back-servers are ready
+2023-03-05T12:26:23+09:00 info: echo-back connections are ready
+2023-03-05T12:26:23+09:00 info: http-connector connections are ready
+2023-03-05T12:26:23+09:00 info: graphql-connector connections are ready
+2023-03-05T12:26:23+09:00 info: sqlite-connector connections are ready
+2023-03-05T12:26:23+09:00 info: postgresql-connector connections are ready
+2023-03-05T12:26:23+09:00 info: mqtt-connector connections are ready
+2023-03-05T12:26:23+09:00 info: mssql-connector connections are ready
+2023-03-05T12:26:23+09:00 info: oracle-connector connections are ready
+2023-03-05T12:26:23+09:00 info: mysql-connector connections are ready
+2023-03-05T12:26:23+09:00 info: socket servers are ready
+2023-03-05T12:26:23+09:00 info: All connector for 'echo-back-server' ready
+2023-03-05T12:26:23+09:00 info: All connector for 'echo-back' ready
+2023-03-05T12:26:23+09:00 info: All connector for 'http-connector' ready
+2023-03-05T12:26:23+09:00 info: All connector for 'graphql-connector' ready
+2023-03-05T12:26:23+09:00 info: All connector for 'sqlite-connector' ready
+2023-03-05T12:26:23+09:00 info: All connector for 'postgresql-connector' ready
+2023-03-05T12:26:23+09:00 info: All connector for 'mqtt-connector' ready
+2023-03-05T12:26:23+09:00 info: All connector for 'mssql-connector' ready
+2023-03-05T12:26:23+09:00 info: All connector for 'oracle-connector' ready
+2023-03-05T12:26:23+09:00 info: All connector for 'mysql-connector' ready
+2023-03-05T12:26:23+09:00 info: All connector for 'socket-server' ready
+2023-03-05T12:26:23+09:00 info: ConnectionManager initialization done:

package/logs/connections-2023-03-05-23.log

@@ -0,0 +1,35 @@
+2023-03-05T23:24:12+09:00 info: Initializing ConnectionManager...
+2023-03-05T23:24:12+09:00 info: Connector 'echo-back-server' started to ready
+2023-03-05T23:24:12+09:00 info: Connector 'echo-back' started to ready
+2023-03-05T23:24:12+09:00 info: Connector 'http-connector' started to ready
+2023-03-05T23:24:12+09:00 info: Connector 'graphql-connector' started to ready
+2023-03-05T23:24:12+09:00 info: Connector 'sqlite-connector' started to ready
+2023-03-05T23:24:12+09:00 info: Connector 'postgresql-connector' started to ready
+2023-03-05T23:24:12+09:00 info: Connector 'mqtt-connector' started to ready
+2023-03-05T23:24:12+09:00 info: Connector 'mssql-connector' started to ready
+2023-03-05T23:24:12+09:00 info: Connector 'oracle-connector' started to ready
+2023-03-05T23:24:12+09:00 info: Connector 'mysql-connector' started to ready
+2023-03-05T23:24:12+09:00 info: Connector 'socket-server' started to ready
+2023-03-05T23:24:12+09:00 info: echo-back-servers are ready
+2023-03-05T23:24:12+09:00 info: echo-back connections are ready
+2023-03-05T23:24:12+09:00 info: http-connector connections are ready
+2023-03-05T23:24:12+09:00 info: graphql-connector connections are ready
+2023-03-05T23:24:12+09:00 info: sqlite-connector connections are ready
+2023-03-05T23:24:12+09:00 info: postgresql-connector connections are ready
+2023-03-05T23:24:12+09:00 info: mqtt-connector connections are ready
+2023-03-05T23:24:12+09:00 info: mssql-connector connections are ready
+2023-03-05T23:24:12+09:00 info: oracle-connector connections are ready
+2023-03-05T23:24:12+09:00 info: mysql-connector connections are ready
+2023-03-05T23:24:12+09:00 info: socket servers are ready
+2023-03-05T23:24:12+09:00 info: All connector for 'echo-back-server' ready
+2023-03-05T23:24:12+09:00 info: All connector for 'echo-back' ready
+2023-03-05T23:24:12+09:00 info: All connector for 'http-connector' ready
+2023-03-05T23:24:12+09:00 info: All connector for 'graphql-connector' ready
+2023-03-05T23:24:12+09:00 info: All connector for 'sqlite-connector' ready
+2023-03-05T23:24:12+09:00 info: All connector for 'postgresql-connector' ready
+2023-03-05T23:24:12+09:00 info: All connector for 'mqtt-connector' ready
+2023-03-05T23:24:12+09:00 info: All connector for 'mssql-connector' ready
+2023-03-05T23:24:12+09:00 info: All connector for 'oracle-connector' ready
+2023-03-05T23:24:12+09:00 info: All connector for 'mysql-connector' ready
+2023-03-05T23:24:12+09:00 info: All connector for 'socket-server' ready
+2023-03-05T23:24:12+09:00 info: ConnectionManager initialization done:

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/scene-visualizer",
   "description": "visualizer component for operato-scene",
   "author": "heartyoh",
-  "version": "1.2.12",
+  "version": "1.2.13",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "things-scene": true,
@@ -61,5 +61,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "423f23b929f9f4f0121cc3a740613858a7110015"
+  "gitHead": "d76930ef9a26e55feee352511f6a7c5c0e74ed90"
 }

package/src/cube.ts

@@ -18,13 +18,7 @@ export class Cube3D extends RealObjectMesh {
   buildGeometry() {
     var { width = 0, height = 0, depth = 0 } = this.component.state
 
-    return new THREE.BoxGeometry(width, depth, height)
-  }
-
-  buildMaterial() {
-    var { fillStyle = 'lightgray' } = this.component.state
-
-    return new THREE.MeshStandardMaterial({ color: fillStyle, side: THREE.FrontSide })
+    this.object3d.geometry = new THREE.BoxGeometry(width, depth, height)
   }
 }
 

package/src/cylinder.ts

@@ -18,13 +18,7 @@ export class Cylinder3D extends RealObjectMesh {
   buildGeometry() {
     var { depth = 0, rx = 0 } = this.component.state
 
-    return new THREE.CylinderGeometry(rx, rx, depth, 25)
-  }
-
-  buildMaterial() {
-    var { fillStyle = 'lightgray' } = this.component.state
-
-    return new THREE.MeshStandardMaterial({ color: fillStyle, side: THREE.FrontSide })
+    this.object3d.geometry = new THREE.CylinderGeometry(rx, rx, depth, 25)
   }
 }
 

package/src/rack.ts

@@ -55,11 +55,10 @@ export class Rack extends RealObject {
     if (!Rack._boardMaterial) {
       Rack._boardMaterial = new THREE.MeshStandardMaterial({
         color: '#dedede',
-        side: THREE.DoubleSide
+        side: THREE.DoubleSide,
+        polygonOffset: true,
+        polygonOffsetFactor: -0.1
       })
-
-      Rack._boardMaterial.polygonOffset = true
-      Rack._boardMaterial.polygonOffsetFactor = -0.1
     }
 
     return Rack._boardMaterial

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/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']
-  }
 }