@operato/scene-visualizer 1.2.37 → 1.2.39

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

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

package/logs/connections-2023-05-24-21.log

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

package/logs/connections-2023-05-25-00.log

@@ -0,0 +1,123 @@
+2023-05-25T00:03:32+09:00 info: Initializing ConnectionManager...
+2023-05-25T00:03:32+09:00 info: Connector 'echo-back-server' started to ready
+2023-05-25T00:03:32+09:00 info: Connector 'echo-back' started to ready
+2023-05-25T00:03:32+09:00 info: Connector 'http-connector' started to ready
+2023-05-25T00:03:32+09:00 info: Connector 'graphql-connector' started to ready
+2023-05-25T00:03:32+09:00 info: Connector 'sqlite-connector' started to ready
+2023-05-25T00:03:32+09:00 info: Connector 'postgresql-connector' started to ready
+2023-05-25T00:03:32+09:00 info: Connector 'mqtt-connector' started to ready
+2023-05-25T00:03:32+09:00 info: Connector 'mssql-connector' started to ready
+2023-05-25T00:03:32+09:00 info: Connector 'oracle-connector' started to ready
+2023-05-25T00:03:32+09:00 info: Connector 'mysql-connector' started to ready
+2023-05-25T00:03:32+09:00 info: Connector 'socket-server' started to ready
+2023-05-25T00:03:32+09:00 info: Connector 'msgraph-connector' started to ready
+2023-05-25T00:03:32+09:00 info: Connector 'openai-connector' started to ready
+2023-05-25T00:03:32+09:00 info: echo-back-servers are ready
+2023-05-25T00:03:32+09:00 info: echo-back connections are ready
+2023-05-25T00:03:32+09:00 info: http-connector connections are ready
+2023-05-25T00:03:32+09:00 info: graphql-connector connections are ready
+2023-05-25T00:03:32+09:00 info: sqlite-connector connections are ready
+2023-05-25T00:03:32+09:00 info: postgresql-connector connections are ready
+2023-05-25T00:03:32+09:00 info: mqtt-connector connections are ready
+2023-05-25T00:03:32+09:00 info: mssql-connector connections are ready
+2023-05-25T00:03:32+09:00 info: oracle-connector connections are ready
+2023-05-25T00:03:32+09:00 info: mysql-connector connections are ready
+2023-05-25T00:03:32+09:00 info: socket servers are ready
+2023-05-25T00:03:32+09:00 info: msgraph-connector connections are ready
+2023-05-25T00:03:32+09:00 info: openai-connector connections are ready
+2023-05-25T00:03:32+09:00 info: All connector for 'echo-back-server' ready
+2023-05-25T00:03:32+09:00 info: All connector for 'echo-back' ready
+2023-05-25T00:03:32+09:00 info: All connector for 'http-connector' ready
+2023-05-25T00:03:32+09:00 info: All connector for 'graphql-connector' ready
+2023-05-25T00:03:32+09:00 info: All connector for 'sqlite-connector' ready
+2023-05-25T00:03:32+09:00 info: All connector for 'postgresql-connector' ready
+2023-05-25T00:03:32+09:00 info: All connector for 'mqtt-connector' ready
+2023-05-25T00:03:32+09:00 info: All connector for 'mssql-connector' ready
+2023-05-25T00:03:32+09:00 info: All connector for 'oracle-connector' ready
+2023-05-25T00:03:32+09:00 info: All connector for 'mysql-connector' ready
+2023-05-25T00:03:32+09:00 info: All connector for 'socket-server' ready
+2023-05-25T00:03:32+09:00 info: All connector for 'msgraph-connector' ready
+2023-05-25T00:03:32+09:00 info: All connector for 'openai-connector' ready
+2023-05-25T00:03:32+09:00 info: ConnectionManager initialization done:
+2023-05-25T00:27:21+09:00 info: Initializing ConnectionManager...
+2023-05-25T00:27:21+09:00 info: Connector 'echo-back-server' started to ready
+2023-05-25T00:27:21+09:00 info: Connector 'echo-back' started to ready
+2023-05-25T00:27:21+09:00 info: Connector 'http-connector' started to ready
+2023-05-25T00:27:21+09:00 info: Connector 'graphql-connector' started to ready
+2023-05-25T00:27:21+09:00 info: Connector 'sqlite-connector' started to ready
+2023-05-25T00:27:21+09:00 info: Connector 'postgresql-connector' started to ready
+2023-05-25T00:27:21+09:00 info: Connector 'mqtt-connector' started to ready
+2023-05-25T00:27:21+09:00 info: Connector 'mssql-connector' started to ready
+2023-05-25T00:27:21+09:00 info: Connector 'oracle-connector' started to ready
+2023-05-25T00:27:21+09:00 info: Connector 'mysql-connector' started to ready
+2023-05-25T00:27:21+09:00 info: Connector 'socket-server' started to ready
+2023-05-25T00:27:21+09:00 info: Connector 'msgraph-connector' started to ready
+2023-05-25T00:27:21+09:00 info: Connector 'openai-connector' started to ready
+2023-05-25T00:27:21+09:00 info: echo-back-servers are ready
+2023-05-25T00:27:21+09:00 info: echo-back connections are ready
+2023-05-25T00:27:21+09:00 info: http-connector connections are ready
+2023-05-25T00:27:21+09:00 info: graphql-connector connections are ready
+2023-05-25T00:27:21+09:00 info: sqlite-connector connections are ready
+2023-05-25T00:27:21+09:00 info: postgresql-connector connections are ready
+2023-05-25T00:27:21+09:00 info: mqtt-connector connections are ready
+2023-05-25T00:27:21+09:00 info: mssql-connector connections are ready
+2023-05-25T00:27:21+09:00 info: oracle-connector connections are ready
+2023-05-25T00:27:21+09:00 info: mysql-connector connections are ready
+2023-05-25T00:27:21+09:00 info: socket servers are ready
+2023-05-25T00:27:21+09:00 info: msgraph-connector connections are ready
+2023-05-25T00:27:21+09:00 info: openai-connector connections are ready
+2023-05-25T00:27:21+09:00 info: All connector for 'echo-back-server' ready
+2023-05-25T00:27:21+09:00 info: All connector for 'echo-back' ready
+2023-05-25T00:27:21+09:00 info: All connector for 'http-connector' ready
+2023-05-25T00:27:21+09:00 info: All connector for 'graphql-connector' ready
+2023-05-25T00:27:21+09:00 info: All connector for 'sqlite-connector' ready
+2023-05-25T00:27:21+09:00 info: All connector for 'postgresql-connector' ready
+2023-05-25T00:27:21+09:00 info: All connector for 'mqtt-connector' ready
+2023-05-25T00:27:21+09:00 info: All connector for 'mssql-connector' ready
+2023-05-25T00:27:21+09:00 info: All connector for 'oracle-connector' ready
+2023-05-25T00:27:21+09:00 info: All connector for 'mysql-connector' ready
+2023-05-25T00:27:21+09:00 info: All connector for 'socket-server' ready
+2023-05-25T00:27:21+09:00 info: All connector for 'msgraph-connector' ready
+2023-05-25T00:27:21+09:00 info: All connector for 'openai-connector' ready
+2023-05-25T00:27:21+09:00 info: ConnectionManager initialization done:
+2023-05-25T00:28:40+09:00 info: Initializing ConnectionManager...
+2023-05-25T00:28:40+09:00 info: Connector 'echo-back-server' started to ready
+2023-05-25T00:28:40+09:00 info: Connector 'echo-back' started to ready
+2023-05-25T00:28:40+09:00 info: Connector 'http-connector' started to ready
+2023-05-25T00:28:40+09:00 info: Connector 'graphql-connector' started to ready
+2023-05-25T00:28:40+09:00 info: Connector 'sqlite-connector' started to ready
+2023-05-25T00:28:40+09:00 info: Connector 'postgresql-connector' started to ready
+2023-05-25T00:28:40+09:00 info: Connector 'mqtt-connector' started to ready
+2023-05-25T00:28:40+09:00 info: Connector 'mssql-connector' started to ready
+2023-05-25T00:28:40+09:00 info: Connector 'oracle-connector' started to ready
+2023-05-25T00:28:40+09:00 info: Connector 'mysql-connector' started to ready
+2023-05-25T00:28:40+09:00 info: Connector 'socket-server' started to ready
+2023-05-25T00:28:40+09:00 info: Connector 'msgraph-connector' started to ready
+2023-05-25T00:28:40+09:00 info: Connector 'openai-connector' started to ready
+2023-05-25T00:28:40+09:00 info: echo-back-servers are ready
+2023-05-25T00:28:40+09:00 info: echo-back connections are ready
+2023-05-25T00:28:40+09:00 info: http-connector connections are ready
+2023-05-25T00:28:40+09:00 info: graphql-connector connections are ready
+2023-05-25T00:28:40+09:00 info: sqlite-connector connections are ready
+2023-05-25T00:28:40+09:00 info: postgresql-connector connections are ready
+2023-05-25T00:28:40+09:00 info: mqtt-connector connections are ready
+2023-05-25T00:28:40+09:00 info: mssql-connector connections are ready
+2023-05-25T00:28:40+09:00 info: oracle-connector connections are ready
+2023-05-25T00:28:40+09:00 info: mysql-connector connections are ready
+2023-05-25T00:28:40+09:00 info: socket servers are ready
+2023-05-25T00:28:40+09:00 info: msgraph-connector connections are ready
+2023-05-25T00:28:40+09:00 info: openai-connector connections are ready
+2023-05-25T00:28:40+09:00 info: All connector for 'echo-back-server' ready
+2023-05-25T00:28:40+09:00 info: All connector for 'echo-back' ready
+2023-05-25T00:28:40+09:00 info: All connector for 'http-connector' ready
+2023-05-25T00:28:40+09:00 info: All connector for 'graphql-connector' ready
+2023-05-25T00:28:40+09:00 info: All connector for 'sqlite-connector' ready
+2023-05-25T00:28:40+09:00 info: All connector for 'postgresql-connector' ready
+2023-05-25T00:28:40+09:00 info: All connector for 'mqtt-connector' ready
+2023-05-25T00:28:40+09:00 info: All connector for 'mssql-connector' ready
+2023-05-25T00:28:40+09:00 info: All connector for 'oracle-connector' ready
+2023-05-25T00:28:40+09:00 info: All connector for 'mysql-connector' ready
+2023-05-25T00:28:40+09:00 info: All connector for 'socket-server' ready
+2023-05-25T00:28:40+09:00 info: All connector for 'msgraph-connector' ready
+2023-05-25T00:28:40+09:00 info: All connector for 'openai-connector' ready
+2023-05-25T00:28:40+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.37",
+  "version": "1.2.39",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "@hatiolab/prettier-config": "^1.0.0",
     "@things-factory/builder": "^6.0.0",
     "@things-factory/operato-board": "^6.0.0",
-    "@types/three": "^0.151.0",
+    "@types/three": "^0.152.0",
     "@types/tinycolor2": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
@@ -62,5 +62,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "a98649c72912eb41db840d6a5442ad8ef6b855e1"
+  "gitHead": "b9e52c76a2cd160a6f7341aa26694c928ed1051a"
 }

package/src/index.ts

@@ -26,3 +26,4 @@ export * from './sphere'
 export * from './visualizer'
 export * from './three-container'
 export * from './wall'
+export * from './light'

package/src/light.ts

@@ -0,0 +1,155 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Anchor, Component, ComponentNature, Ellipse } from '@hatiolab/things-scene'
+import * as THREE from 'three'
+import { RealObject } from './threed/real-object'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'select',
+      label: 'light-type',
+      name: 'lightType',
+      property: {
+        options: ['', 'point', 'directional']
+      }
+    },
+    {
+      type: 'number',
+      label: 'intensity',
+      name: 'intensity'
+    },
+    {
+      type: 'number',
+      label: 'distance',
+      name: 'distance'
+    },
+    {
+      type: 'number',
+      label: 'decay',
+      name: 'decay'
+    },
+    {
+      type: 'checkbox',
+      label: 'cast-shadow',
+      name: 'castShadow'
+    },
+    {
+      type: 'number',
+      label: 'near',
+      name: 'near',
+      placeholder: '0.5'
+    },
+    {
+      type: 'number',
+      label: 'far',
+      name: 'far',
+      placeholder: '1000'
+    },
+    {
+      type: 'number',
+      label: 'fov',
+      name: 'fov',
+      placeholder: '90'
+    },
+    {
+      type: 'number',
+      label: 'zoom',
+      name: 'zoom',
+      placeholder: '1'
+    },
+    {
+      type: 'checkbox',
+      label: 'show-helper',
+      name: 'showHelper'
+    }
+  ],
+  help: 'scene/component/light'
+}
+
+export class LightObject extends RealObject<THREE.Light> {
+  helper?: THREE.CameraHelper
+
+  updatePointLight() {
+    var {
+      lightType = 'point',
+      distance = 0, // unlimited
+      intensity = 10,
+      decay = 1,
+      fillStyle: color = 'white',
+      castShadow,
+      near = 0.5,
+      far = 1000,
+      fov = 90,
+      zoom = 1,
+      showHelper
+    } = this.component.state
+
+    this.object3d!.color = new THREE.Color(color)
+    if (lightType == 'point') {
+      ;(this.object3d as THREE.PointLight)!.distance = distance
+      ;(this.object3d as THREE.PointLight)!.decay = decay
+    }
+    this.object3d!.intensity = intensity
+    this.object3d!.castShadow = castShadow
+    if (castShadow) {
+      const camera = this.object3d!.shadow?.camera as THREE.PerspectiveCamera
+      camera.far = far
+      camera.near = near
+      camera.fov = fov
+      camera.zoom = zoom
+    }
+
+    if (showHelper) {
+      const camera = this.object3d!.shadow?.camera as THREE.PerspectiveCamera
+
+      if (!this.helper) {
+        this.helper = new THREE.CameraHelper(camera!)
+        this.object3d.add(this.helper)
+      }
+    } else if (this.helper) {
+      this.object3d.remove(this.helper)
+      delete this.helper
+    }
+  }
+
+  protected getObject3dInstance(): THREE.Light {
+    var { lightType = 'point' } = this.component.state
+
+    return lightType == 'point' ? new THREE.PointLight() : new THREE.DirectionalLight()
+  }
+
+  update() {
+    this.clear()
+    this.build()
+
+    this.updateDimension()
+    this.updateHidden()
+
+    this.updatePointLight()
+  }
+}
+
+export class PointLight extends Ellipse {
+  is3dish() {
+    return true
+  }
+
+  buildRealObject(): RealObject | undefined {
+    return new LightObject(this)
+  }
+
+  get anchors(): Array<Anchor> {
+    return []
+  }
+
+  get nature(): ComponentNature {
+    return NATURE
+  }
+}
+
+Component.register('light', PointLight)

package/src/templates/index.ts

@@ -9,6 +9,7 @@ import sprite from './sprite'
 import wall from './wall'
 import desk from './desk'
 import camera from './camera'
+import light from './light'
 import GLTFObject from './gltf-object'
 
 export default [
@@ -16,6 +17,7 @@ export default [
   visualizer,
   rackTable,
   camera,
+  light,
   cube,
   cylinder,
   sphere,

package/src/templates/light.ts

@@ -0,0 +1,23 @@
+const icon = new URL('../../icons/light.png', import.meta.url).href
+
+export default {
+  type: 'light',
+  description: 'Light',
+  group: '3D' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
+  icon,
+  model: {
+    type: 'light',
+    rx: 10,
+    ry: 10,
+    cx: 150,
+    cy: 150,
+    zPos: 1000,
+    fillStyle: '#fff',
+    strokeStyle: '#000',
+    alpha: 1,
+    hidden: false,
+    lineWidth: 1,
+    lineDash: 'solid',
+    lineCap: 'butt'
+  }
+}

package/src/templates/sprite.ts

@@ -11,7 +11,7 @@ export default {
     left: 100,
     width: 200,
     height: 80,
-    zPos: 1,
+    zPos: 40,
     depth: 10,
     fillStyle: '#ffffff',
     strokeStyle: '#999',

package/src/three-container.ts

@@ -232,21 +232,8 @@ export class ThreeContainer extends Container implements ThreeDimensionalContain
 
     // Lights
     var _hemiLight = new THREE.HemisphereLight(0xdddddd, 0x333333, 0.035)
-    var _directionalLight = new THREE.DirectionalLight(0xd6e1ff, 0.01)
-    var _pointLight1 = new THREE.PointLight(0xd6e1ff, 1, undefined, 2)
-
-    _pointLight1.power = cameraZPos * 50
-    _pointLight1.castShadow = true
-    _pointLight1.position.set(0, cameraZPos, 0)
-    _pointLight1.shadow.camera.near = 0.1
-    _pointLight1.shadow.camera.far = cameraZPos * 2
-
-    // const helper = new THREE.CameraHelper(_pointLight1.shadow.camera)
-    // this._scene3d?.add(helper)
 
     this.scene3d!.add(_hemiLight)
-    this.scene3d!.add(_pointLight1)
-    this._camera.add(_directionalLight)
 
     this._mouse = new THREE.Vector2()
 
@@ -258,19 +245,11 @@ export class ThreeContainer extends Container implements ThreeDimensionalContain
     this._camera.updateProjectionMatrix()
 
     const floor = createFloor(this)
-    // if (this._floor) {
-    //   this.object3d.remove(this._floor)
-    //   this._floor.clear()
-    //   delete this._floor
-    // }
 
     if (floor) {
-      // this._floor = floor
       this._scene3d.add(floor)
     }
 
-    // this.invalidate()
-
     // postprocessing
 
     var composer = (this.composer = new EffectComposer(renderer3d!))

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

@@ -2,19 +2,24 @@
  * Copyright © HatioLab Inc. All rights reserved.
  */
 
-import * as THREE from 'three'
-import { HTMLOverlayElement, HTMLOverlayContainer } from '@hatiolab/things-scene'
+import { HTMLOverlayElement, HTMLOverlayContainer, DELTA } from '@hatiolab/things-scene'
 
-import { RealObjectMesh } from './real-object-mesh'
 import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js'
 import { RealObject } from './real-object'
-import { SCALE_MIN } from './common'
 
 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()
 

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

@@ -4,6 +4,7 @@
 
 import * as THREE from 'three'
 import { applyAlpha } from './common'
+import { DELTA } from '@hatiolab/things-scene'
 
 import { RealObject } from './real-object'
 
@@ -22,6 +23,14 @@ export abstract class RealObjectSprite extends RealObject<THREE.Sprite> {
 
   /* 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
 

package/src/threed/texture/canvas-texture.ts

@@ -3,14 +3,36 @@ import { Component } from '@hatiolab/things-scene'
 
 import { createCanvas } from '../html/elements'
 
+function nextPowerOf2(n: number) {
+  var count = 0
+
+  if (n && !(n & (n - 1))) {
+    return n
+  }
+
+  while (n != 0) {
+    n >>= 1
+    count += 1
+  }
+
+  return 1 << count
+}
+
 export function createCanvasTexture(component: Component): THREE.Texture {
+  var { lineWidth } = component.state
   var { width, height } = component.bounds
 
+  width += lineWidth
+  height += lineWidth
+
   // Factor for increasing image resolution.
   // TODO to be able to redraw according to the change in zoom value.
-  const scale = (component.realObject?.threeContainer?.zoom as number) * 2
+  const scale = 2 // component.realObject?.threeContainer?.zoom as number
 
-  let canvas = createCanvas(width * scale, height * scale)
+  var poweredWidth = nextPowerOf2(width * scale)
+  var poweredHeight = nextPowerOf2(height * scale)
+
+  let canvas = createCanvas(poweredWidth, poweredHeight)
 
   var texture = new THREE.CanvasTexture(canvas)
 
@@ -19,19 +41,23 @@ export function createCanvasTexture(component: Component): THREE.Texture {
   texture.needsUpdate = true
   texture.wrapS = THREE.RepeatWrapping
   texture.wrapT = THREE.RepeatWrapping
-  texture.offset.set(0, 0)
-  texture.repeat.set(1, 1)
+  texture.offset.set(0, 1 - (height * scale) / poweredHeight)
+  texture.repeat.set((width * scale) / poweredWidth, (height * scale) / poweredHeight)
   texture.magFilter = THREE.NearestFilter
-  texture.minFilter = THREE.LinearMipMapLinearFilter
-  // @ts-ignore
+  texture.minFilter = THREE.LinearFilter
+  // texture.minFilter = THREE.LinearMipMapLinearFilter
   texture.colorSpace = THREE.SRGBColorSpace
 
   return texture
 }
 
 export function renderCanvasTexture(canvas: HTMLCanvasElement, component: Component, scale: number) {
+  var { lineWidth } = component.state
   var { left, top } = component.bounds
 
+  left -= lineWidth / 2
+  top -= lineWidth / 2
+
   let context = canvas.getContext('2d')
 
   context!.scale(scale, scale)

package/translations/en.json

@@ -8,5 +8,10 @@
   "label.section-digits": "section digits",
   "label.shelf-locations": "shelf locations",
   "label.unit-digits": "unit digits",
-  "label.popup-position": "popup position"
+  "label.popup-position": "popup position",
+  "label.light-type": "light type",
+  "label.intensity": "intensity",
+  "label.distance": "distance",
+  "label.decay": "decay",
+  "label.cast-shadow": "cast shadow"
 }

package/translations/ko.json

@@ -8,5 +8,10 @@
   "label.section-digits": "section digits",
   "label.shelf-locations": "shelf locations",
   "label.unit-digits": "unit digits",
-  "label.popup-position": "팝업 위치"
+  "label.popup-position": "팝업 위치",
+  "label.light-type": "조명 타입",
+  "label.intensity": "intensity",
+  "label.distance": "distance",
+  "label.decay": "decay",
+  "label.cast-shadow": "cast shadow"
 }

package/translations/ms.json

@@ -8,5 +8,10 @@
   "label.section-digits": "[ms] section digits",
   "label.shelf-locations": "[ms] shelf locations",
   "label.unit-digits": "[ms] unit digits",
-  "label.popup-position": "[ms] popup position"
+  "label.popup-position": "[ms] popup position",
+  "label.light-type": "light type",
+  "label.intensity": "intensity",
+  "label.distance": "distance",
+  "label.decay": "decay",
+  "label.cast-shadow": "cast shadow"
 }

package/translations/zh.json

@@ -8,5 +8,10 @@
   "label.section-digits": "段数字",
   "label.shelf-locations": "货架位置",
   "label.unit-digits": "单位数字",
-  "label.popup-position": "弹出位置"
+  "label.popup-position": "弹出位置",
+  "label.light-type": "light type",
+  "label.intensity": "intensity",
+  "label.distance": "distance",
+  "label.decay": "decay",
+  "label.cast-shadow": "cast shadow"
 }