@operato/scene-visualizer 1.2.29 → 1.2.31

package/src/three-container-editor.ts

@@ -0,0 +1,187 @@
+import * as THREE from 'three'
+
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js'
+
+export class ThreeContainerEditor {
+  private ortho: THREE.OrthographicCamera
+  private persp: THREE.PerspectiveCamera
+
+  private scene: THREE.Scene
+  private camera: THREE.Camera
+  private renderer: THREE.Renderer
+
+  private orbit?: OrbitControls
+  private transform?: TransformControls
+
+  constructor(
+    scene: THREE.Scene,
+    ortho: THREE.OrthographicCamera,
+    persp: THREE.PerspectiveCamera,
+    camera: THREE.Camera,
+    renderer: THREE.Renderer
+  ) {
+    this.ortho = ortho
+    this.persp = persp
+
+    this.scene = scene
+    this.camera = camera
+    this.renderer = renderer
+  }
+
+  dispose() {
+    this.orbit?.dispose()
+    this.transform?.dispose()
+  }
+
+  get orbitControls(): OrbitControls {
+    if (!this.orbit) {
+      this.orbit = new OrbitControls(this.camera!, this.renderer.domElement)
+      this.orbit.update()
+
+      this.orbit.addEventListener('change', this.render)
+    }
+
+    return this.orbit
+  }
+
+  get transformControls(): TransformControls {
+    if (!this.transform) {
+      this.transform = new TransformControls(this.camera!, this.renderer.domElement)
+      this.transform.addEventListener('change', this.render)
+
+      this.transform.addEventListener('dragging-changed', event => {
+        this.orbitControls.enabled = !event.value
+      })
+    }
+
+    return this.transform
+  }
+
+  attach(target: THREE.Object3D) {
+    this.transform?.attach(target)
+    this.scene.add(this.transformControls)
+  }
+
+  detach() {
+    this.scene.remove(this.transformControls)
+  }
+
+  onKeyDown(e: KeyboardEvent) {
+    switch (e.code) {
+      case 'KeyQ':
+        this.transformControls.setSpace(this.transformControls.space === 'local' ? 'world' : 'local')
+        break
+
+      case 'ShiftLeft':
+      case 'ShiftRight':
+        this.transformControls.setTranslationSnap(100)
+        this.transformControls.setRotationSnap(THREE.MathUtils.degToRad(15))
+        this.transformControls.setScaleSnap(0.25)
+        break
+
+      case 'KeyW':
+        this.transformControls.setMode('translate')
+        break
+
+      case 'KeyE':
+        this.transformControls.setMode('rotate')
+        break
+
+      case 'KeyR':
+        this.transformControls.setMode('scale')
+        break
+
+      case 'KeyC':
+        const position = this.camera.position.clone()
+
+        this.camera = (this.camera as THREE.PerspectiveCamera).isPerspectiveCamera ? this.ortho : this.persp
+        this.camera.position.copy(position)
+
+        this.orbitControls.object = this.camera
+        this.transformControls.camera = this.camera
+
+        this.camera.lookAt(this.orbitControls.target.x, this.orbitControls.target.y, this.orbitControls.target.z)
+
+        this.onWindowResize()
+
+        break
+
+      case 'KeyV':
+        const randomFoV = Math.random() + 0.1
+        const randomZoom = Math.random() + 0.1
+
+        this.persp.fov = randomFoV * 160
+        this.ortho.bottom = -randomFoV * 500
+        this.ortho.top = randomFoV * 500
+
+        this.persp.zoom = randomZoom * 5
+        this.ortho.zoom = randomZoom * 5
+
+        this.onWindowResize()
+
+        break
+
+      case 'Equal':
+      case 'NumpadAdd':
+      case 'NumpadEqual':
+        this.transformControls.setSize(this.transformControls.size + 0.1)
+        break
+
+      case 'Minus': // -
+      case 'IntlRo': // _
+      case 'NumpadSubtract': // num-
+        this.transformControls.setSize(Math.max(this.transformControls.size - 0.1, 0.1))
+        break
+
+      case 'KeyX':
+        this.transformControls.showX = !this.transformControls.showX
+        break
+
+      case 'KeyY':
+        this.transformControls.showY = !this.transformControls.showY
+        break
+
+      case 'KeyZ':
+        this.transformControls.showZ = !this.transformControls.showZ
+        break
+
+      case 'Space':
+        this.transformControls.enabled = !this.transformControls.enabled
+        break
+
+      case 'Esc':
+        this.transformControls.reset()
+        break
+    }
+  }
+
+  onKeyUp(e: KeyboardEvent) {
+    switch (e.code) {
+      case 'Shift':
+        this.transformControls.setTranslationSnap(null)
+        this.transformControls.setRotationSnap(null)
+        this.transformControls.setScaleSnap(null)
+        break
+    }
+  }
+
+  onWindowResize() {
+    const aspect = window.innerWidth / window.innerHeight
+
+    this.persp.aspect = aspect
+    this.persp.updateProjectionMatrix()
+
+    this.ortho.left = this.ortho.bottom * aspect
+    this.ortho.right = this.ortho.top * aspect
+    this.ortho.updateProjectionMatrix()
+
+    this.renderer.setSize(window.innerWidth, window.innerHeight)
+
+    this.render()
+  }
+
+  render() {
+    this.renderer.render(this.scene, this.camera)
+  }
+}

package/src/three-container.ts

@@ -135,6 +135,10 @@ export class ThreeContainer extends Container implements ThreeDimensionalContain
 
     if (this._renderer3d) this._renderer3d.clear()
 
+    if (this._controls?.autoRotate) {
+      this._controls.doAutoRotate(false)
+    }
+
     delete this._renderer3d
     delete this._camera
     delete this._controls
@@ -194,11 +198,6 @@ export class ThreeContainer extends Container implements ThreeDimensionalContain
     this._camera.lookAt(this._scene3d.position)
     this._camera.zoom = this.getState('zoom') * 0.01
 
-    if (this.state.showAxis) {
-      var axisHelper = new THREE.AxesHelper(width)
-      this._scene3d.add(axisHelper)
-    }
-
     try {
       const canvas = document.createElement('canvas')
       let context = canvas!.getContext('webgl2')!
@@ -218,8 +217,8 @@ export class ThreeContainer extends Container implements ThreeDimensionalContain
     this._renderer3d = renderer3d
 
     renderer3d!.autoClear = true
-    renderer3d!.outputEncoding = THREE.sRGBEncoding
     // @ts-ignore for three@0.150.1
+    renderer3d!.outputColorSpace = THREE.SRGBColorSpace
     renderer3d!.useLegacyLights = false
     renderer3d!.toneMappingExposure = Math.pow(exposure, 5.0)
     renderer3d!.toneMapping = THREE.LinearToneMapping
@@ -329,6 +328,11 @@ export class ThreeContainer extends Container implements ThreeDimensionalContain
     }
 
     this._controls.update()
+
+    if (this.state.autoRotate) {
+      this.invalidate()
+    }
+
     this.render_threed()
   }
 

package/src/three-controls.ts

@@ -144,13 +144,7 @@ var ThreeControls = function (this: any, object: THREE.Camera, component: Compon
       spherical.setFromVector3(offset)
 
       if (scope.autoRotate && state === STATE.NONE) {
-        // theta = getAutoRotationAngle();
-        // thetaDelta = - getAutoRotationAngle();
-        // theta = 0;
-
         rotateLeft(getAutoRotationAngle())
-        scope.component.invalidate()
-        // spherical.theta = getAutoRotationAngle();
       }
 
       spherical.theta += sphericalDelta.theta
@@ -213,9 +207,6 @@ var ThreeControls = function (this: any, object: THREE.Camera, component: Compon
         return true
       }
 
-      // if (this.autoRotate) {
-      //   scope.component.invalidate()
-      // }
       return false
     }
   })()

package/src/threed/real-object.ts

@@ -26,7 +26,8 @@ export abstract class RealObject<T extends THREE.Object3D = THREE.Object3D> {
         component.app.url(fillStyle.image),
         texture => {
           texture.minFilter = THREE.LinearFilter
-          texture.encoding = THREE.sRGBEncoding
+          // @ts-ignore
+          texture.colorSpace = THREE.SRGBColorSpace
           texture.repeat.set(1, 1)
           texture.needsUpdate = true
 

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

@@ -23,7 +23,8 @@ export function createCanvasTexture(component: Component): THREE.Texture {
   texture.repeat.set(1, 1)
   texture.magFilter = THREE.NearestFilter
   texture.minFilter = THREE.LinearMipMapLinearFilter
-  texture.encoding = THREE.sRGBEncoding
+  // @ts-ignore
+  texture.colorSpace = THREE.SRGBColorSpace
 
   return texture
 }

package/src/visualizer.ts

@@ -87,12 +87,6 @@ const NATURE = {
       name: 'autoRotate',
       property: 'autoRotate'
     },
-    {
-      type: 'checkbox',
-      label: 'show-axis',
-      name: 'showAxis',
-      property: 'showAxis'
-    },
     {
       type: 'checkbox',
       label: '3dmode',