@things-factory/scene-visualizer 6.0.5 → 6.0.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@things-factory/scene-visualizer",
   "description": "The visualizer component for things-scene.",
-  "version": "6.0.5",
+  "version": "6.0.7",
   "things-scene": true,
   "browser": "src/index.js",
   "author": "heartyoh <heartyoh@hatiolab.com>",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@hatiolab/things-scene": "^3.2.0",
     "lit": "^2.5.0",
-    "three": "^0.122.0"
+    "three": "^0.149.0"
   },
-  "gitHead": "af75b451e62cdeeab8b42ff3c49a213cd1ad1ea5"
+  "gitHead": "5af6d8613bd6eab6feaa69df942ef3ddfae764fe"
 }

package/src/banner.js

@@ -52,7 +52,7 @@ export default class Banner extends Object3D {
   createCube(w, h, d) {
     var { boxColor = '#ccaa76' } = this.model
 
-    var geometry = new THREE.BoxBufferGeometry(w, d, h)
+    var geometry = new THREE.BoxGeometry(w, d, h)
     var material = new THREE.MeshStandardMaterial({
       color: boxColor,
       side: THREE.FrontSide
@@ -88,7 +88,7 @@ export default class Banner extends Object3D {
       })
     }
 
-    var boardGeometry = new THREE.PlaneBufferGeometry(w, h, 1, 1)
+    var boardGeometry = new THREE.PlaneGeometry(w, h, 1, 1)
     var board = new THREE.Mesh(boardGeometry, boardMaterial)
 
     return board

package/src/cube.js

@@ -48,7 +48,7 @@ export default class Cube extends Mesh {
   createCube(w, h, d) {
     let { fillStyle = 'lightgray' } = this.model
 
-    this.geometry = new THREE.BoxBufferGeometry(w, d, h)
+    this.geometry = new THREE.BoxGeometry(w, d, h)
     this.material = new THREE.MeshStandardMaterial({ color: fillStyle, side: THREE.FrontSide })
   }
 

package/src/cylinder.js

@@ -54,7 +54,7 @@ export default class Cylinder extends Mesh {
   createCylinder(rx, rz) {
     let { fillStyle = 'lightgray' } = this.model
 
-    this.geometry = new THREE.CylinderBufferGeometry(rx, rx, rz, 25)
+    this.geometry = new THREE.CylinderGeometry(rx, rx, rz, 25)
     this.material = new THREE.MeshStandardMaterial({ color: fillStyle, side: THREE.FrontSide })
 
     // this.castShadow = true

package/src/desk.js

@@ -71,7 +71,7 @@ export default class Desk extends Object3D {
     var posZ = -1
 
     for (var i = 0; i < 4; i++) {
-      var geometry = new THREE.BoxBufferGeometry(legThickness, d, legThickness)
+      var geometry = new THREE.BoxGeometry(legThickness, d, legThickness)
       var material = new THREE.MeshStandardMaterial({
         color: this.model.legColor || '#252525'
       })
@@ -103,7 +103,7 @@ export default class Desk extends Object3D {
     var boardMaterial = new THREE.MeshStandardMaterial({
       color: this.model.fillStyle || '#ccaa76'
     })
-    var boardGeometry = new THREE.BoxBufferGeometry(w, h, d, 1, 1)
+    var boardGeometry = new THREE.BoxGeometry(w, h, d, 1, 1)
     var board = new THREE.Mesh(boardGeometry, boardMaterial)
 
     return board

package/src/ellipse-extrude.js

@@ -32,11 +32,19 @@ export default class EllipseExtrude extends Extrude {
 
   get shape() {
     var { cx = 0, cy = 0, rx = 1, ry = 1, startAngle = 0, endAngle = 2 * Math.PI, anticlockwise = false } = this.model
-    var shape = new THREE.Shape()
 
-    shape.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, startAngle, endAngle, anticlockwise)
-
-    return shape
+    const curve = new THREE.EllipseCurve(
+      cx,
+      cy, // ax, aY
+      Math.abs(rx),
+      Math.abs(ry), // xRadius, yRadius
+      startAngle,
+      endAngle, // aStartAngle, aEndAngle
+      anticlockwise, // aClockwise
+      0 // aRotation
+    )
+
+    return new THREE.Shape(curve.getPoints(50))
   }
 }
 

package/src/extrude.js

@@ -33,7 +33,7 @@ export default class Extrude extends Object3D {
     return this._boundingUVGenerator
   }
 
-async createObject() {
+  async createObject() {
     var { fillStyle = 0xffffff, strokeStyle = 0x636363, lineWidth = 1, alpha = 1 } = this.model
 
     // 다각형 그리기
@@ -65,7 +65,7 @@ async createObject() {
   }
 
   createGeometry(shape, extrudeSettings) {
-    var geometry = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings)
+    var geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings)
     geometry.center()
 
     return geometry
@@ -145,7 +145,7 @@ async createObject() {
       bevelSizeSegments: 5
     }
 
-    var sideGeometry = new THREE.ExtrudeBufferGeometry(shape, sideExtrudeSettings)
+    var sideGeometry = new THREE.ExtrudeGeometry(shape, sideExtrudeSettings)
     sideGeometry.center()
 
     var sideMesh = new THREE.Mesh(sideGeometry, sideMaterial)

package/src/gltf-object.js

@@ -5,6 +5,7 @@
 import { Component, RectPath, Shape } from '@hatiolab/things-scene'
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
 import GLTFLogo from '../assets/canvasicon-gltf.png'
 import Component3d from './component-3d'
 import Object3D from './object3d'
@@ -48,6 +49,11 @@ export default class GLTFObject extends Object3D {
 
     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)
+
     var fullSrc = this._visualizer.app.url(src)
     gltfLoader.setCrossOrigin('use-credentials')
 

package/src/rack.js

@@ -34,13 +34,13 @@ export default class Rack extends Object3D {
   }
 
   static get rackFrameGeometry() {
-    if (!Rack._rackFrameGeometry) Rack._rackFrameGeometry = new THREE.BoxBufferGeometry(1, 1, 1)
+    if (!Rack._rackFrameGeometry) Rack._rackFrameGeometry = new THREE.BoxGeometry(1, 1, 1)
 
     return Rack._rackFrameGeometry
   }
 
   static get boardGeometry() {
-    if (!Rack._boardGeometry) Rack._boardGeometry = new THREE.PlaneBufferGeometry(1, 1, 1, 1)
+    if (!Rack._boardGeometry) Rack._boardGeometry = new THREE.PlaneGeometry(1, 1, 1, 1)
 
     return Rack._boardGeometry
   }
@@ -110,10 +110,7 @@ export default class Rack extends Object3D {
       for (var i = 0; i < shelves; i++) shelfLocIds.push(i + 1)
     } else shelfLocIds = shelfLocations.split(/\s*,\s*/)
 
-    var shelfBins = binLocations
-      .trim()
-      .split('\n')
-      .reverse()
+    var shelfBins = binLocations.trim().split('\n').reverse()
 
     for (var i = 0; i < shelves; i++) {
       let bottom = -depth * shelves * 0.5

package/src/sphere.js

@@ -54,7 +54,7 @@ export default class Sphere extends Mesh {
   createSphere(rx) {
     let { fillStyle = 'lightgray' } = this.model
 
-    this.geometry = new THREE.SphereBufferGeometry(rx, 20, 20)
+    this.geometry = new THREE.SphereGeometry(rx, 20, 20)
     this.material = new THREE.MeshStandardMaterial({
       color: fillStyle,
       side: THREE.FrontSide

package/src/stock.js

@@ -29,7 +29,8 @@ export default class Stock extends Mesh {
         this._visualizer.legendTarget &&
         this._visualizer.legendTarget.get('status')
       )
-    ) return this.userDefineDefaultMaterial
+    )
+      return this.userDefineDefaultMaterial
 
     var stockStatus = this._visualizer.legendTarget.get('status')
     var range = stockStatus.ranges[index]
@@ -42,9 +43,9 @@ export default class Stock extends Mesh {
         roughness: 0.7
       })
     }
-    
-    var alpha=range.color.replace(/^.*,(.+)\)/,'$1')
-    if(alpha>0 && alpha<1){
+
+    var alpha = range.color.replace(/^.*,(.+)\)/, '$1')
+    if (alpha > 0 && alpha < 1) {
       this.stockMaterials[index].opacity = alpha
       this.stockMaterials[index].transparent = true
     }
@@ -53,7 +54,7 @@ export default class Stock extends Mesh {
   }
 
   static get stockGeometry() {
-    if (!Stock._geometry) Stock._geometry = new THREE.BoxBufferGeometry(1, 1, 1)
+    if (!Stock._geometry) Stock._geometry = new THREE.BoxGeometry(1, 1, 1)
 
     return Stock._geometry
   }
@@ -86,8 +87,8 @@ export default class Stock extends Mesh {
         side: THREE.FrontSide,
         roughness: 0.7
       })
-      var alpha=defaultColor.replace(/^.*,(.+)\)/,'$1')
-      if(alpha>0 && alpha<1){
+      var alpha = defaultColor.replace(/^.*,(.+)\)/, '$1')
+      if (alpha > 0 && alpha < 1) {
         this._visualizer._default_material.opacity = alpha
         this._visualizer._default_material.transparent = true
       }
@@ -111,11 +112,11 @@ export default class Stock extends Mesh {
       this._visualizer._empty_material = new THREE.MeshStandardMaterial({
         color: defaultColor
       })
-      var alpha=defaultColor.replace(/^.*,(.+)\)/,'$1')
-      if(alpha>0 && alpha<1){
+      var alpha = defaultColor.replace(/^.*,(.+)\)/, '$1')
+      if (alpha > 0 && alpha < 1) {
         this._visualizer._empty_material.opacity = alpha
         this._visualizer._empty_material.transparent = true
-      }else{
+      } else {
         this._visualizer._empty_material.opacity = 0.33
         this._visualizer._empty_material.transparent = true
       }
@@ -208,7 +209,7 @@ export default class Stock extends Mesh {
           this.material = this._hideEmptyStock ? this.emptyMaterial : this.userDefineDefaultMaterial
         }
       })
-      if(!isInRanges){
+      if (!isInRanges) {
         this.material = this.userDefineDefaultMaterial
       }
     }

package/src/text-texture-object.js

@@ -42,7 +42,7 @@ export default class TextTextureObject extends Object3D {
     var canvas = this._createOffcanvas(width, height)
     this._drawTextTexture(canvas, { fontColor, fontSize, font, text, lineHeight, bold, italic })
 
-    var geometry = new THREE.BoxBufferGeometry()
+    var geometry = new THREE.BoxGeometry()
     var texture = new THREE.CanvasTexture(canvas)
     texture.needsUpdate = true
 

package/src/three-controls.js

@@ -17,7 +17,7 @@
 //    Pan - right mouse, or arrow keys / touch: three finger swipe
 import * as THREE from 'three'
 
-var ThreeControls = function(object, component) {
+var ThreeControls = function (object, component) {
   this.object = object
 
   this.component = component
@@ -90,21 +90,21 @@ var ThreeControls = function(object, component) {
   // public methods
   //
 
-  this.getPolarAngle = function() {
+  this.getPolarAngle = function () {
     return spherical.phi
   }
 
-  this.getAzimuthalAngle = function() {
+  this.getAzimuthalAngle = function () {
     return spherical.theta
   }
 
-  this.saveState = function() {
+  this.saveState = function () {
     scope.target0.copy(scope.target)
     scope.position0.copy(scope.object.position)
     scope.zoom0 = scope.object.zoom
   }
 
-  this.reset = function() {
+  this.reset = function () {
     scope.target.copy(scope.target0)
     scope.object.position.copy(scope.position0)
     scope.object.zoom = scope.zoom0
@@ -118,12 +118,12 @@ var ThreeControls = function(object, component) {
   }
 
   // this method is exposed, but perhaps it would be better if we can make it private...
-  this.update = (function() {
+  this.update = (function () {
     var offset = new THREE.Vector3()
 
     // so camera.up is the orbit axis
     var quat = new THREE.Quaternion().setFromUnitVectors(object.up, new THREE.Vector3(0, 1, 0))
-    var quatInverse = quat.clone().inverse()
+    var quatInverse = quat.clone().invert()
 
     var lastPosition = new THREE.Vector3()
     var lastQuaternion = new THREE.Quaternion()
@@ -216,19 +216,19 @@ var ThreeControls = function(object, component) {
     }
   })()
 
-  this.dispose = function() {}
+  this.dispose = function () {}
 
   //
   // event handlers - FSM: listen for events and reset state
   //
 
-  this.onMouseDown = function(event) {}
+  this.onMouseDown = function (event) {}
 
-  this.onMouseMove = function(event) {}
+  this.onMouseMove = function (event) {}
 
-  this.onMouseUp = function(event) {}
+  this.onMouseUp = function (event) {}
 
-  this.onDragStart = function(event) {
+  this.onDragStart = function (event) {
     if (this.enabled === false || this.enableRotate === false) return
 
     scope.component.stop()
@@ -252,7 +252,7 @@ var ThreeControls = function(object, component) {
     }
   }
 
-  this.onDragMove = function(event) {
+  this.onDragMove = function (event) {
     if (!this.enabled) return
 
     if (event.altKey === true) state = STATE.PAN
@@ -273,7 +273,7 @@ var ThreeControls = function(object, component) {
     }
   }
 
-  this.onDragEnd = function(event) {
+  this.onDragEnd = function (event) {
     if (this.enabled === false || this.enableRotate === false) return
 
     state = STATE.NONE
@@ -285,13 +285,13 @@ var ThreeControls = function(object, component) {
     // scope.update();
   }
 
-  this.onKeyDown = function(event) {
+  this.onKeyDown = function (event) {
     if (this.enabled === false || this.enableKeys === false || this.enablePan === false) return
 
     handleKeyDown(event)
   }
 
-  this.onTouchStart = function(event) {
+  this.onTouchStart = function (event) {
     if (this.enabled === false) return
 
     switch (event.touches.length) {
@@ -324,7 +324,7 @@ var ThreeControls = function(object, component) {
     }
   }
 
-  this.onTouchMove = function(event) {
+  this.onTouchMove = function (event) {
     if (this.enabled === false) return
 
     switch (event.touches.length) {
@@ -357,7 +357,7 @@ var ThreeControls = function(object, component) {
     }
   }
 
-  this.onTouchEnd = function(event) {
+  this.onTouchEnd = function (event) {
     if (this.enabled === false) return
     this.lastScale = 1
 
@@ -366,7 +366,7 @@ var ThreeControls = function(object, component) {
     state = STATE.NONE
   }
 
-  this.doAutoRotate = function(autoRotate) {
+  this.doAutoRotate = function (autoRotate) {
     START_TIME = null
     this.cameraChanged = true
     this.autoRotate = autoRotate
@@ -439,7 +439,7 @@ var ThreeControls = function(object, component) {
     sphericalDelta.phi -= angle
   }
 
-  var panLeft = (function() {
+  var panLeft = (function () {
     var v = new THREE.Vector3()
 
     return function panLeft(distance, objectMatrix) {
@@ -450,7 +450,7 @@ var ThreeControls = function(object, component) {
     }
   })()
 
-  var panUp = (function() {
+  var panUp = (function () {
     var v = new THREE.Vector3()
 
     return function panUp(distance, objectMatrix) {
@@ -462,7 +462,7 @@ var ThreeControls = function(object, component) {
   })()
 
   // deltaX and deltaY are in pixels; right and down are positive
-  var pan = (function() {
+  var pan = (function () {
     var offset = new THREE.Vector3()
 
     return function pan(deltaX, deltaY) {
@@ -705,7 +705,7 @@ ThreeControls.prototype = {} //Object.create( THREE.EventDispatcher.prototype );
 ThreeControls.prototype.constructor = ThreeControls
 Object.defineProperties(ThreeControls.prototype, {
   center: {
-    get: function() {
+    get: function () {
       console.warn('THREE.OrbitControls: .center has been renamed to .target')
       return this.target
     }
@@ -714,72 +714,72 @@ Object.defineProperties(ThreeControls.prototype, {
   // backward compatibility
 
   noZoom: {
-    get: function() {
+    get: function () {
       console.warn('THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.')
       return !this.enableZoom
     },
 
-    set: function(value) {
+    set: function (value) {
       console.warn('THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.')
       this.enableZoom = !value
     }
   },
 
   noRotate: {
-    get: function() {
+    get: function () {
       console.warn('THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.')
       return !this.enableRotate
     },
 
-    set: function(value) {
+    set: function (value) {
       console.warn('THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.')
       this.enableRotate = !value
     }
   },
 
   noPan: {
-    get: function() {
+    get: function () {
       console.warn('THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.')
       return !this.enablePan
     },
 
-    set: function(value) {
+    set: function (value) {
       console.warn('THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.')
       this.enablePan = !value
     }
   },
 
   noKeys: {
-    get: function() {
+    get: function () {
       console.warn('THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.')
       return !this.enableKeys
     },
 
-    set: function(value) {
+    set: function (value) {
       console.warn('THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.')
       this.enableKeys = !value
     }
   },
 
   staticMoving: {
-    get: function() {
+    get: function () {
       console.warn('THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.')
       return !this.enableDamping
     },
 
-    set: function(value) {
+    set: function (value) {
       console.warn('THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.')
       this.enableDamping = !value
     }
   },
 
   dynamicDampingFactor: {
-    get: function() {
+    get: function () {
       console.warn('THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.')
       return this.dampingFactor
     },
 
-    set: function(value) {
+    set: function (value) {
       console.warn('THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.')
       this.dampingFactor = value
     }

package/src/visualizer.js

@@ -298,7 +298,7 @@ export default class Visualizer extends ContainerAbstract {
   }
 
   _createFloor(floorMaterial, width, height, resolve) {
-    var floorGeometry = new THREE.BoxBufferGeometry(1, 1, 1)
+    var floorGeometry = new THREE.BoxGeometry(1, 1, 1)
     var floor = new THREE.Mesh(floorGeometry, floorMaterial)
 
     floor.scale.set(width, height, 5)
@@ -408,7 +408,6 @@ export default class Visualizer extends ContainerAbstract {
         cameraX,
         cameraY,
         cameraZ,
-        gammaFactor = 2,
         legendTarget,
         exposure = 2.5
       } = this.model
@@ -452,20 +451,20 @@ export default class Visualizer extends ContainerAbstract {
           context,
           precision: precision,
           alpha: true,
-          antialias: antialias
+          antialias
         })
       } catch (e) {
         this._noSupportWebgl = true
       }
 
-      if (this._noSupportWebgl) return
+      if (this._noSupportWebgl) {
+        return
+      }
 
       this._renderer.autoClear = true
 
-      if (gammaFactor) {
-        this._renderer.outputEncoding = THREE.GammaEncoding
-        this._renderer.gammaFactor = gammaFactor
-      }
+      this._renderer.outputEncoding = THREE.sRGBEncoding
+
       this._renderer.physicallyCorrectLights = true
       this._renderer.toneMappingExposure = Math.pow(exposure, 5.0)
 

package/src/wall.js

@@ -39,7 +39,7 @@ export default class Wall extends Mesh {
   createWall(w, h, d) {
     let { fillStyle = 'gray' } = this.model
 
-    this.geometry = new THREE.BoxBufferGeometry(w, d, h)
+    this.geometry = new THREE.BoxGeometry(w, d, h)
     this.material = new THREE.MeshStandardMaterial({ color: fillStyle, side: THREE.FrontSide })
 
     this.castShadow = true