@operato/scene-visualizer 9.1.1 → 10.0.0-beta.1

package/dist/three-container.js

@@ -3,13 +3,9 @@
  */
 import { __decorate } from "tslib";
 import { Container, error, FPS, Layout, sceneComponent } from '@hatiolab/things-scene';
-import * as THREE from 'three';
-import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
-import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
-import ThreeControls from './three-controls.js';
 import './three-layout.js';
-import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
-import { createFloor } from './threed/floor/floor.js';
+import { createRealObjectFor } from './threed/real-object-registry.js';
+import { SceneManager, CameraManager, RendererManager, LightManager, ControlsManager, EventManager3D } from './threed/managers/index.js';
 const NATURE = {
     mutable: false,
     resizable: true,
@@ -21,45 +17,16 @@ const NATURE = {
             name: 'precision',
             property: {
                 options: [
-                    {
-                        display: 'High',
-                        value: 'highp'
-                    },
-                    {
-                        display: 'Medium',
-                        value: 'mediump'
-                    },
-                    {
-                        display: 'Low',
-                        value: 'lowp'
-                    }
+                    { display: 'High', value: 'highp' },
+                    { display: 'Medium', value: 'mediump' },
+                    { display: 'Low', value: 'lowp' }
                 ]
             }
         },
-        {
-            type: 'checkbox',
-            label: 'anti-alias',
-            name: 'antialias',
-            property: 'antialias'
-        },
-        {
-            type: 'checkbox',
-            label: '3dmode',
-            name: 'threed',
-            property: 'threed'
-        },
-        {
-            type: 'checkbox',
-            label: 'auto-rotate',
-            name: 'autoRotate',
-            property: 'autoRotate'
-        },
-        {
-            type: 'checkbox',
-            label: 'debug',
-            name: 'debug',
-            property: 'debug'
-        }
+        { type: 'checkbox', label: 'anti-alias', name: 'antialias', property: 'antialias' },
+        { type: 'checkbox', label: '3dmode', name: 'threed', property: 'threed' },
+        { type: 'checkbox', label: 'auto-rotate', name: 'autoRotate', property: 'autoRotate' },
+        { type: 'checkbox', label: 'debug', name: 'debug', property: 'debug' }
     ],
     help: 'scene/component/three-container'
 };
@@ -67,26 +34,33 @@ const WEBGL_NO_SUPPORT_TEXT = 'WebGL no support';
 let ThreeContainer = class ThreeContainer extends Container {
     constructor() {
         super(...arguments);
-        this._noSupportWebgl = false;
-        this._raycaster = new THREE.Raycaster();
+        this.sceneManager = new SceneManager();
+        this.cameraManager = new CameraManager();
+        this.rendererManager = new RendererManager();
+        this.lightManager = new LightManager();
+        this.controlsManager = new ControlsManager();
+        this.eventManager = new EventManager3D();
     }
     containable(component) {
-        return component.is3dish();
+        return true;
     }
     is3dContainer() {
         return true;
     }
     /* THREE Object related .. */
     createObjects(components) {
-        for (let component of components) {
+        for (const component of components) {
             try {
-                var item = component.realObject;
+                const item = createRealObjectFor(component);
                 if (item) {
+                    component._realObject = item;
+                    item.update();
+                    item.updateTransform();
                     if (component.isHTMLElement()) {
-                        this.css3DScene.add(item.object3d);
+                        this.rendererManager.css3DScene.add(item.object3d);
                     }
                     else {
-                        this._scene3d.add(item.object3d);
+                        this.sceneManager.scene.add(item.object3d);
                     }
                 }
             }
@@ -96,248 +70,141 @@ let ThreeContainer = class ThreeContainer extends Container {
         }
     }
     destroy_scene3d() {
-        var _a;
         this.stop();
         window.removeEventListener('focus', this._onFocus);
         window.removeEventListener('resize', this._onResize);
-        if (this._renderer3d)
-            this._renderer3d.clear();
-        if ((_a = this._controls) === null || _a === void 0 ? void 0 : _a.autoRotate) {
-            this._controls.doAutoRotate(false);
-        }
-        delete this._renderer3d;
-        delete this._camera;
-        delete this._controls;
-        if (this._scene3d) {
-            let children = this._scene3d.children.slice();
-            for (let i in children) {
-                let child = children[i];
-                if (child.dispose)
-                    child.dispose();
-                if (child.geometry && child.geometry.dispose)
-                    child.geometry.dispose();
-                if (child.material && child.material.dispose)
-                    child.material.dispose();
-                if (child.texture && child.texture.dispose)
-                    child.texture.dispose();
-                this._scene3d.remove(child);
-            }
-        }
-        delete this._scene3d;
+        this.controlsManager.destroy();
+        this.lightManager.destroy();
+        this.rendererManager.destroy();
+        this.cameraManager.destroy();
+        this.sceneManager.destroy();
+        this.eventManager.destroy();
+    }
+    getLightingConfig() {
+        return {
+            hemisphere: { skyColor: 0xdddddd, groundColor: 0x333333, intensity: 0.035 }
+        };
+    }
+    getCss3DSceneAttribute() {
+        return 'three-container:css3d-renderer';
     }
     update() {
-        var { width, height } = this.bounds;
-        var { fov = 45, near = 0.1, far = 20000, antialias = true, precision = 'highp', cameraX, cameraY, cameraZ, exposure = 2.5 } = this.state;
-        var components = this.components || [];
+        const { width, height } = this.bounds;
+        const { fov = 45, near = 0.1, far = 20000, antialias = true, precision = 'highp', cameraX, cameraY, cameraZ, exposure = 2.5 } = this.state;
+        const components = this.components || [];
         // SCENE
-        this._scene3d = new THREE.Scene();
+        const scene = this.sceneManager.setup();
         // CAMERA
-        var aspect = width / height;
-        this._camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
-        var cameraXPos = height * 0.8, cameraYPos = width * 0.8, cameraZPos = Math.min(500, Math.floor(Math.min(width, height)));
-        // cameraZPos = Math.floor(Math.min(width, height))
-        if (cameraX != undefined)
-            cameraXPos = cameraX * width;
-        if (cameraY != undefined)
-            cameraYPos = cameraY * height;
-        if (cameraZ != undefined)
-            cameraZPos = cameraZ * Math.floor(Math.min(width, height));
-        this._camera.position.set(cameraXPos, cameraZPos, cameraYPos);
-        this._scene3d.add(this._camera);
-        this._camera.lookAt(this._scene3d.position);
-        this._camera.zoom = this.getState('zoom') * 0.01;
-        try {
-            const canvas = document.createElement('canvas');
-            let context = canvas.getContext('webgl2');
-            var renderer3d = new THREE.WebGLRenderer({
-                canvas,
-                context,
-                precision,
-                alpha: true,
-                antialias
-            });
-        }
-        catch (e) {
-            this._noSupportWebgl = true;
+        const camera = this.cameraManager.setup(width, height, {
+            fov, near, far, zoom: this.getState('zoom'), cameraX, cameraY, cameraZ
+        });
+        this.cameraManager.addToScene(scene);
+        // RENDERER (WebGL)
+        if (!this.rendererManager.setupWebGL(width, height, { precision, antialias, exposure })) {
             return;
         }
-        this._renderer3d = renderer3d;
-        renderer3d.autoClear = true;
-        // @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;
-        renderer3d.shadowMap.enabled = true;
-        renderer3d.setClearColor(0xffffff, 0); // transparent
-        renderer3d.setSize(width, height);
         // CONTROLS
-        this._controls = new ThreeControls(this._camera, this);
-        this._controls.cameraChanged = true;
-        // Lights
-        var _hemiLight = new THREE.HemisphereLight(0xdddddd, 0x333333, 0.035);
-        this.scene3d.add(_hemiLight);
-        this._mouse = new THREE.Vector2();
-        this._clock = new THREE.Clock(true);
-        this._mixer = new THREE.AnimationMixer(this.scene3d);
+        this.controlsManager.setup(camera, this);
+        // LIGHTS
+        this.lightManager.setup(scene, camera, this.getLightingConfig());
+        // MIXER
+        this.sceneManager.setupMixer();
+        // CREATE 3D OBJECTS
         this.createObjects(components);
-        this._camera.updateProjectionMatrix();
-        const floor = createFloor(this);
-        if (floor) {
-            this._scene3d.add(floor);
-        }
-        // postprocessing
-        var composer = (this.composer = new EffectComposer(renderer3d));
-        composer.setSize(width, height);
-        const renderPass = new RenderPass(this._scene3d, this._camera);
-        composer.addPass(renderPass);
-        this._onFocus = (e) => {
-            this.render_threed();
-        };
-        this._onResize = (e) => {
-            this.resize();
-        };
+        camera.updateProjectionMatrix();
+        // FLOOR
+        this.sceneManager.addFloor(this);
+        // POSTPROCESSING
+        this.rendererManager.setupComposer(scene, camera, width, height);
+        // CSS3D
+        this.rendererManager.setupCSS3D(this.app.isViewMode, this.getCss3DSceneAttribute());
+        // EVENT LISTENERS
+        this._onFocus = () => this.render_threed();
+        this._onResize = () => this.resize();
         window.addEventListener('resize', this._onResize);
         window.addEventListener('focus', this._onFocus);
         this.buildOverlays();
         this.resize();
     }
     resize() {
-        var _a;
         const { width, height } = this.bounds;
-        this._camera.aspect = width / height;
-        this.renderer3d.setSize(width, height);
-        this.css3DRenderer.setSize(width, height);
-        (_a = this.composer) === null || _a === void 0 ? void 0 : _a.setSize(width, height);
-        this._camera.updateProjectionMatrix();
+        this.cameraManager.updateAspect(width, height);
+        this.rendererManager.resize(width, height);
     }
     init_scene3d() {
         this.root.on('redraw', this.onredraw, this);
-        if (this._scene3d) {
+        if (this.sceneManager.scene) {
             this.destroy_scene3d();
         }
         this.update();
         this.onchangeData && this.onchangeData(this.data, this.data);
     }
     threed_animate() {
-        if (!this._controls) {
+        if (!this.controlsManager.isActive) {
             return;
         }
-        if (this._mixer) {
-            this._mixer.update(this._clock.getDelta());
-        }
-        this._controls.update();
-        if (this.state.autoRotate) {
-            this.invalidate();
-        }
+        this.sceneManager.updateAnimation();
+        this.controlsManager.update();
         this.render_threed();
     }
     stop() { }
     get scene3d() {
-        if (!this._scene3d) {
+        if (!this.sceneManager.scene) {
             this.init_scene3d();
         }
-        return this._scene3d;
+        return this.sceneManager.scene;
     }
     get renderer3d() {
-        return this._renderer3d;
+        return this.rendererManager.renderer;
     }
     get mixer() {
-        return this._mixer;
+        return this.sceneManager.mixer;
     }
     get zoom() {
-        var _a;
-        return (_a = this._camera) === null || _a === void 0 ? void 0 : _a.zoom;
+        return this.cameraManager.zoom;
     }
-    /**
-     * CSS3DRenderer용 THREE.Scene을 제공
-     */
     get css3DScene() {
-        if (!this._css3DScene) {
-            this._css3DScene = this.buildCSS3DScene();
-        }
-        return this._css3DScene;
+        return this.rendererManager.css3DScene;
     }
-    buildCSS3DScene() {
-        return new THREE.Scene();
-    }
-    disposeCSS3DScene() {
-        var children = [...this.css3DScene.children];
-        children.forEach(child => this.css3DScene.remove(child));
-    }
-    /* css3d-renderer */
-    /**
-     * css3d-renderer getter
-     */
     get css3DRenderer() {
-        if (!this._css3DRenderer) {
-            this._css3DRenderer = this.createCSS3DRenderer();
-        }
-        return this._css3DRenderer;
-    }
-    createCSS3DRenderer() {
-        var renderer = new CSS3DRenderer();
-        var div = renderer.domElement;
-        div.style.position = 'absolute';
-        div.style.top = '0';
-        div.style.pointerEvents = 'none';
-        div.setAttribute('scene', 'three-container:css3d-renderer');
-        if (this.app.isViewMode) {
-            // disableAllUserEvents(div)
-        }
-        else {
-            div.style.pointerEvents = 'none';
-        }
-        return renderer;
-    }
-    disposeCSS3DRenderer() {
-        // Nothing to do
+        return this.rendererManager.css3DRenderer;
     }
-    /**
-     * element내부에 필요한 overlay들을 생성
-     * ViewRenderer에서는 CSS3DRenderer와 GLRendering을 위한 canvas를 오버레이로 만든다.
-     * Warn: this.element는 아직 만들어지지 않은 상태에 buildOverlays가 호출됨.
-     * @param into
-     */
     buildOverlays() {
         this.element.appendChild(this.css3DRenderer.domElement);
     }
     render_threed() {
-        if (this.composer) {
-            this.composer.render();
-        }
+        this.rendererManager.render();
     }
-    /* Container Overides .. */
+    /* Container Overrides */
     render(ctx) {
         if (this.app.isViewMode) {
             this.setState('threed', true);
         }
-        if (this.state.threed && !this._noSupportWebgl && this._camera) {
-            this.css3DRenderer.render(this.css3DScene, this._camera);
+        if (this.state.threed && !this.rendererManager.noSupportWebgl && this.cameraManager.camera) {
+            this.rendererManager.renderCSS3D(this.cameraManager.camera);
             return;
         }
         super.render(ctx);
     }
     postrender(ctx) {
-        var { left, top, debug, threed } = this.state;
-        var { width, height } = this.bounds;
-        // ios에서 width, height에 소수점이 있으면 3d를 표현하지 못하는 문제가 있어 정수화
+        const { left, top, debug, threed } = this.state;
+        let { width, height } = this.bounds;
         width = Math.floor(width);
         height = Math.floor(height);
         if (threed) {
-            if (!this._scene3d) {
+            if (!this.sceneManager.scene) {
                 this.init_scene3d();
                 this.render_threed();
             }
-            if (this._noSupportWebgl) {
+            if (this.rendererManager.noSupportWebgl) {
                 this._showWebglNoSupportText(ctx);
                 return;
             }
-            if (!this._renderer3d) {
+            if (!this.rendererManager.renderer) {
                 return;
             }
-            var { width: rendererWidth, height: rendererHeight } = this._renderer3d.getSize(new THREE.Vector2());
-            ctx.drawImage(this._renderer3d.domElement, 0, 0, rendererWidth, rendererHeight, left, top, width, height);
+            const { width: rw, height: rh } = this.rendererManager.getSize();
+            ctx.drawImage(this.rendererManager.domElement, 0, 0, rw, rh, left, top, width, height);
             if (debug) {
                 ctx.font = 100 + 'px Arial';
                 ctx.textAlign = 'center';
@@ -351,10 +218,8 @@ let ThreeContainer = class ThreeContainer extends Container {
         }
     }
     dispose() {
-        var _a;
         this.root.off('redraw', this.onredraw, this);
-        this.disposeCSS3DScene();
-        (_a = this.composer) === null || _a === void 0 ? void 0 : _a.dispose();
+        this.rendererManager.disposeCSS3DScene();
         this.destroy_scene3d();
         super.dispose();
     }
@@ -365,29 +230,18 @@ let ThreeContainer = class ThreeContainer extends Container {
         return NATURE;
     }
     getObjectByRaycast() {
-        var intersects = this.getObjectsByRaycast();
-        if (intersects && intersects.length > 0) {
-            var object = intersects[0].object;
-            while (object) {
-                if (object.userData.context) {
-                    return object;
-                }
-                object = object.parent;
-            }
-        }
+        if (!this.cameraManager.camera || !this.sceneManager.scene)
+            return;
+        return this.eventManager.getObjectByRaycast(this.cameraManager.camera, this.sceneManager.scene);
     }
     getObjectsByRaycast() {
-        var vector = this._mouse;
-        if (!this._camera) {
+        if (!this.cameraManager.camera || !this.sceneManager.scene)
             return;
-        }
-        this._raycaster.setFromCamera(vector, this._camera);
-        var intersects = this._raycaster.intersectObjects(this._scene3d.children, true);
-        return intersects;
+        return this.eventManager.getObjectsByRaycast(this.cameraManager.camera, this.sceneManager.scene);
     }
     _showWebglNoSupportText(context) {
         context.save();
-        var { width, height } = this.state;
+        const { width, height } = this.state;
         context.font = width / 20 + 'px Arial';
         context.textAlign = 'center';
         context.fillText(WEBGL_NO_SUPPORT_TEXT, width / 2 - width / 40, height / 2);
@@ -398,141 +252,95 @@ let ThreeContainer = class ThreeContainer extends Container {
         if (after.hasOwnProperty('width') || after.hasOwnProperty('height') || after.hasOwnProperty('threed'))
             this.destroy_scene3d();
         if (after.hasOwnProperty('autoRotate')) {
-            if (this._controls) {
-                this._controls.doAutoRotate(after.autoRotate);
-            }
+            this.controlsManager.setAutoRotate(after.autoRotate);
         }
         if (after.hasOwnProperty('fov') ||
             after.hasOwnProperty('near') ||
             after.hasOwnProperty('far') ||
             after.hasOwnProperty('zoom')) {
-            if (this._camera) {
-                const { near, far, zoom, fov } = this.state;
-                this._camera.near = near;
-                this._camera.far = far;
-                this._camera.zoom = zoom * 0.01;
-                this._camera.fov = fov;
-                this._camera.updateProjectionMatrix();
-                this._controls.cameraChanged = true;
-            }
-        }
-    }
-    onmousedown(e) {
-        if (this._controls) {
-            this._controls.onMouseDown(e);
+            const { near, far, zoom, fov } = this.state;
+            this.cameraManager.updateProperties({ near, far, zoom, fov });
+            this.controlsManager.markCameraChanged();
         }
     }
+    onmousedown(e) { }
     onmouseup(e) {
-        var _a;
-        if (this._controls) {
-            if (this._lastFocused) {
-                ;
-                this._lastFocused._focused = false;
-            }
+        if (this.controlsManager.isActive) {
             const { left, top, width, height } = this.state;
-            var pointer = this.transcoordC2S(e.offsetX, e.offsetY);
-            this._mouse.x = ((pointer.x - left) / width) * 2 - 1;
-            this._mouse.y = -((pointer.y - top) / height) * 2 + 1;
-            var object = this.getObjectByRaycast();
-            var realObject = object === null || object === void 0 ? void 0 : object.userData.context;
-            if (realObject) {
-                ;
-                realObject._focused = true;
-                realObject._focusedAt = performance.now();
-                this._lastFocused = realObject;
-                (_a = realObject.component) === null || _a === void 0 ? void 0 : _a.trigger('click', e);
-            }
+            const pointer = this.transcoordC2S(e.offsetX, e.offsetY);
+            this.eventManager.updateMouseNDC(pointer.x, pointer.y, left, top, width, height);
+            this.eventManager.handleClick(this.cameraManager.camera, this.sceneManager.scene, e);
             e.stopPropagation();
         }
     }
     onmousemove(e) {
-        var _a, _b;
-        if (this._controls) {
+        if (this.controlsManager.isActive) {
             const { left, top, width, height } = this.state;
-            var pointer = this.transcoordC2S(e.offsetX, e.offsetY);
-            this._mouse.x = ((pointer.x - left) / width) * 2 - 1;
-            this._mouse.y = -((pointer.y - top) / height) * 2 + 1;
-            var object = this.getObjectByRaycast();
-            var realObject = object === null || object === void 0 ? void 0 : object.userData.context;
-            if (realObject !== this._lastHovered) {
-                if (this._lastHovered) {
-                    (_a = this._lastHovered.component) === null || _a === void 0 ? void 0 : _a.trigger('mouseleave', e);
-                    delete this._lastHovered;
-                }
-                if (realObject) {
-                    this._lastHovered = realObject;
-                    (_b = this._lastHovered.component) === null || _b === void 0 ? void 0 : _b.trigger('mouseenter', e);
-                }
-            }
-            this._controls.onMouseMove(e);
+            const pointer = this.transcoordC2S(e.offsetX, e.offsetY);
+            this.eventManager.updateMouseNDC(pointer.x, pointer.y, left, top, width, height);
+            this.eventManager.handleHover(this.cameraManager.camera, this.sceneManager.scene, e);
             e.stopPropagation();
         }
     }
     onmouseleave(e) { }
     onwheel(e) {
-        if (this._controls) {
+        if (this.controlsManager.isActive) {
             this.handleMouseWheel(e);
             e.stopPropagation();
         }
     }
     ondblclick(e) {
-        if (this._controls) {
+        if (this.controlsManager.isActive) {
             this.setState('zoom', this.getState('zoom'));
-            this._controls.reset();
+            this.controlsManager.reset();
             e.stopPropagation();
         }
     }
+    // things-scene 이벤트 → ControlsManager (orbit/pan 처리)
     ondragstart(e) {
-        if (this._controls) {
-            var pointer = this.transcoordC2S(e.offsetX, e.offsetY);
-            var { left, top, width, height } = this.bounds;
-            this._mouse.x = ((pointer.x - left) / width) * 2 - 1;
-            this._mouse.y = -((pointer.y - top) / height) * 2 + 1;
-            this._controls.onDragStart(e);
+        if (this.controlsManager.isActive) {
+            this.controlsManager.onDragStart(e);
             e.stopPropagation();
         }
     }
     ondragmove(e) {
-        if (this._controls) {
-            this._controls.cameraChanged = true;
-            this._controls.onDragMove(e);
+        if (this.controlsManager.isActive) {
+            this.controlsManager.onDragMove(e);
             e.stopPropagation();
         }
     }
     ondragend(e) {
-        if (this._controls) {
-            this._controls.cameraChanged = true;
-            this._controls.onDragEnd(e);
+        if (this.controlsManager.isActive) {
+            this.controlsManager.onDragEnd(e);
             e.stopPropagation();
         }
     }
     ontouchstart(e) {
-        if (this._controls) {
-            this._controls.onTouchStart(e);
+        if (this.controlsManager.isActive) {
+            this.controlsManager.onTouchStart(e);
             e.stopPropagation();
         }
     }
     onpan(e) {
-        if (this._controls) {
-            this._controls.cameraChanged = true;
-            this._controls.onTouchMove(e);
+        if (this.controlsManager.isActive) {
+            this.controlsManager.onTouchMove(e);
             e.stopPropagation();
         }
     }
     ontouchend(e) {
-        if (this._controls) {
-            this._controls.onTouchEnd(e);
+        if (this.controlsManager.isActive) {
+            this.controlsManager.onTouchEnd(e);
             e.stopPropagation();
         }
     }
     onkeydown(e) {
-        if (this._controls) {
-            this._controls.onKeyDown(e);
+        if (this.controlsManager.isActive) {
+            this.controlsManager.onKeyDown(e);
             e.stopPropagation();
         }
     }
     onpinch(e) {
-        if (this._controls) {
+        if (this.controlsManager.isActive) {
             var zoom = this.getState('zoom');
             //@ts-ignore
             zoom *= e.scale;
@@ -543,13 +351,11 @@ let ThreeContainer = class ThreeContainer extends Container {
         }
     }
     ondoubletap() {
-        this._controls.reset();
+        this.controlsManager.reset();
     }
     handleMouseWheel(event) {
-        var delta = 0;
         var zoom = this.getState('zoom');
-        delta = -event.deltaY;
-        zoom += delta * 0.1;
+        zoom += -event.deltaY * 0.1;
         if (zoom < 100)
             zoom = 100;
         this.setState('zoom', zoom);