[Frontend] loading 基礎程序建置 | forgemodel.js 3D 電梯物件化 | launchViewer 增加 option 參數補上 | 3D 圖換上三台電梯 urn

Frontend/_sysElevator.html

@@ -898,6 +898,9 @@
     var subSeviceData = [];    //每個設備訂閱點位值
     var floList = [];          //每個樓層
     var elevObj = null;        //左側 2D 電梯物件
+    var viewer3DNodeIds = [223, 228, 233];
+    var elev3DBind = {};
+    var elev3DOption = {};
     var subOrdPath = {
         "building_tag": pageAct.buiTag,
         "system_tag": pageAct.sysMainTag,
@@ -1069,9 +1072,15 @@
             elevObj.curElevFloor[matchDevice.device_number] = subData["CP"];
             elevObj.redraw();
         } else {
-            
             elevObj.setElevFloor(matchDevice.device_number, subData["CP"]);
         }
+
+        // 左側 3D 電梯 nodeID 與 device_number match
+        if (Object.keys(elev3DBind).indexOf(matchDevice.device_number) == -1) {
+            elev3DBind[matchDevice.device_number] = viewer3DNodeIds[elev3DBind.length];
+        }
+
+
         elevObj.setEleMovStatus(matchDevice.device_number, subData["RD"] == "UP" ? 1 : subData["RD"] == "DOWN" ? 2 : 0);
         //現在樓層
         if (subData["CP"]) {
@@ -2337,11 +2346,27 @@
 
     //載入3D模型
     function load3DModel() {
+        let option = {
+            nodes: [223, 228, 233],
+            element: "#forgeViewer",
+            floorHeight: [
+                { floor: 1, height: 15 },
+                { floor: 2, height: 24.5 },
+                { floor: 3, height: 34 },
+            ]
+        }
+        
+
+        launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDLm53ZA==', option, () => {
+            console.log($("#forgeViewer"))
+            let elevator = $("#forgeViewer")[0]._elevator3D[0];
+            elevator.obj.setElevatorFloor(3)
+            elevator.obj.movElevator()
+            //setElevatorSpeed(0.2)
+            //setElevatorFloor(2)
+            //requestAnimationFrame(movElevator);
+        });
         
-        launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MFRFU1QlRTMlODAlOTEubndk');
-        setElevatorSpeed(0.2)
-        setElevatorFloor(3)
-        movElevator()
     }
     function show3D() {
         if (isFirstLoad3D) {

Frontend/index.html

@@ -2552,6 +2552,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     
 
     <script>
+        
         /*$('#js-page-content').smartPanel();*/
         var jwt = localStorage.getItem("JWT-Authorization");
         var pageAct = {};  //記錄全頁面已選擇項目
@@ -2563,7 +2564,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         if (location.href.indexOf("ord") != -1) {
             location.href = "/file/index.html"
         }
-
+        pageLoading(true)
         $(function () {
             // 二次引用 jquery.js
             // - 在 require 內部程序需要引用 jquery，由於 require 的套件需要依賴 jquery ，就算 HTML 已經引用 jquery， require 也無法參考
@@ -2738,6 +2739,19 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
         }
 
+        function pageLoading(isShow = true) {
+            if (isShow) {
+                if ($("body .loading-bg").length == 0) {
+                    let background = $(`<div class="loading-bg"></div>`)
+                    $("body").append(background);
+                } else {
+                    $("body .loading-bg").show();
+                }
+            } else {
+                $("body .loading-bg").hide();
+            }
+        }
+
         //==============================================================================
         //                       ↓  系統監控 - 共用 Function ↓
         //==============================================================================

Frontend/js/forge/forgemodel.js

@@ -49,7 +49,7 @@ var elevatorSpeed;
 //     sensorVals[i] = Math.random();
 // }
 
-function launchViewer(urn) {
+function launchViewer(urn, eleOption ,callback) {
     var options = {
         env: 'AutodeskProduction',
         getAccessToken: getForgeToken
@@ -60,8 +60,14 @@ function launchViewer(urn) {
         //viewer = new Autodesk.Viewing.Viewer3D(document.getElementById('forgeViewer'));
         viewer.start();
         var documentId = 'urn:' + urn;
-        Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
         
+        Autodesk.Viewing.Document.load(documentId, function (doc) {
+            onDocumentLoadSuccess(doc, eleOption);
+        }, onDocumentLoadFailure);
+
+        $("#forgeViewer").on("autodesk:loaded", function () {
+            callback ? callback() : "";
+        })
 
 
         //test 
@@ -118,10 +124,139 @@ function getAllLeafComponents(viewer, callback) {
     });
 }
 
-function onDocumentLoadSuccess(doc) {
+class elevator3D {
+    constructor(option = {}) {
+        this.ele = option.element;
+        this.viewer = option.viewer;
+        this.nodeId = option.nodeId;
+        this.speed = option.speed ?? 0.3;
+        this.fragProxys = [];
+        this.fragProxy = null;
+        this.initCallback = option.inited ?? null;
+        this.movStatus = 0;
+        this.targetFloorZ = 0;
+        this.floorHeight = option.floorHeight ?? [{}];
+        this.init();
+    }
+
+    setTreeFrag = function () {
+        let tree = this.viewer.model.getData().instanceTree;
+        let nodeId = this.nodeId;
+        //tree.enumNodeChildren(nodeId, (node) => {
+        //    nodeId = node;
+        //    tree.enumNodeFragments(nodeId, (frag) => {
+        //        this.fragProxy = this.viewer.impl.getFragmentProxy(this.viewer.model, frag);
+        //        this.fragProxy.getAnimTransform();
+        //        let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26
+
+        //        this.fragProxy.position = fragPosition
+
+        //        this.fragProxy.updateAnimTransform()
+        //    });
+        //})
+        
+        tree.enumNodeFragments(nodeId, (frag) => {
+            let fragProxy = this.viewer.impl.getFragmentProxy(this.viewer.model, frag);
+            this.fragProxy = fragProxy;
+            this.fragProxys.push({ nodeId: nodeId, frag: fragProxy });
+
+            this.fragProxy.getAnimTransform();
+            let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26
+
+            this.fragProxy.position = fragPosition;
+
+            this.fragProxy.updateAnimTransform();
+        },true);
+
+        this.viewer.impl.sceneUpdated(true);
+        if (typeof $(this.ele)[0]._elevator3D == "undefined") { 
+            $(this.ele)[0]._elevator3D = [];
+        }
+        $(this.ele)[0]._elevator3D.push({ nodeId: nodeId, obj: this });
+        this.initCallback ? this.initCallback() : "";
+
+    }
+
+    init = function () {
+        this.setTreeFrag();
+    }
+
+    setElevatorFloor = function (floor) {
+        this.targetFloorZ = this.floorHeight.filter(x => x.floor == floor)[0].height;
+    }
+
+    setElevatorSpeed = function (speed) { //0.01 ~ 1
+        this.speed = speed;
+    }
+
+    movElevator = function () {
+
+        let tree = this.viewer.model.getData().instanceTree;
+        let nodeId = this.nodeId;
+        let fragProxyZ = 0;
+        let movStatus = this.movStatus; // 0=no 1=up 2=down
+
+
+        if (this.fragProxy.position.z > this.targetFloorZ) {
+            movStatus = 2
+        }
+        else if (this.fragProxy.position.z < this.targetFloorZ) {
+            movStatus = 1
+        }
+
+        if (movStatus == 0) {
+            return;
+        }
+
+        tree.enumNodeFragments(nodeId, (frag) => {
+            this.fragProxy = this.viewer.impl.getFragmentProxy(this.viewer.model, frag);
+            this.fragProxy.getAnimTransform();
+            //let fragPosition = new THREE.Vector3(0, 0, 15);// 一樓0 二樓15 三樓 26
+            if (movStatus == 2) {
+                this.fragProxy.position.z -= this.speed;
+            }
+            else if (movStatus == 1) {
+                this.fragProxy.position.z += this.speed;
+            }
+
+            fragProxyZ = this.fragProxy.position.z;
+            this.fragProxy.updateAnimTransform()
+
+        },true);
+        this.viewer.impl.sceneUpdated(true);
+
+        let movElevator = $(this.ele)[0]._elevator3D.filter(x => x.nodeId == this.nodeId)[0]?.obj.movElevator.bind(this);
+        if (movStatus == 2) {
+            if (fragProxyZ >= this.targetFloorZ) {
+                requestAnimationFrame(() => {
+                    movElevator();
+                });
+            }
+        }
+        else if (movStatus == 1) {
+            if (fragProxyZ <= this.targetFloorZ) {
+                requestAnimationFrame(() => {
+                    movElevator();
+                });
+            }
+        }
+
+
+        //let fragPosition = new THREE.Vector3(position);// 一樓0 二樓15 三樓 26
+
+        //fragProxy.position = fragPosition;
+
+        //fragProxy.updateAnimTransform();
+
+        //viewer.impl.sceneUpdated(true);
+    }
+}
+
+function onDocumentLoadSuccess(doc,eleOption) {
     var viewables = doc.getRoot().getDefaultGeometry();
     viewer.loadDocumentNode(doc, viewables).then(i => {
         // documented loaded, any action?
+
     });
     // viewer.addEventListener(Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, (args) => {
     //     var currSelection = viewer.getSelection();
@@ -129,15 +264,33 @@ function onDocumentLoadSuccess(doc) {
     //     domElem.innerText = currSelection[0];
     // });
 
-    //viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
+    viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
         //var instanceTree = viewer.model.getData().instanceTree;
         //var allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
         //var domElem = document.getElementById('all_id');
         //domElem.innerText = allDbIdsStr;
+        let nodes = eleOption.nodes ?? [];
+        let element = eleOption.element ?? "";
+        $(element)[0]._elevator3D = [];
+        $.each(nodes, function (idx, node) {
+            let options = {
+                element: $(element),
+                viewer: viewer,
+                nodeId: node,
+                floorHeight: eleOption.floorHeight ?? [],
+                inited: function () {
+                    if (idx == nodes.length - 1) {
+                        $(element).trigger("autodesk:loaded");
+                    }
+                }
+            }
+            let elevator3DObj = new elevator3D(options);
+
+        })
 
         //let tree = viewer.model.getData().instanceTree;
         //let nodeId = 10952;
-
+        //console.log("tree", tree)
         //tree.enumNodeFragments(nodeId, function (frag) {
         //    fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
         //    fragProxy.getAnimTransform();
@@ -146,11 +299,11 @@ function onDocumentLoadSuccess(doc) {
         //    fragProxy.position = fragPosition
 
         //    fragProxy.updateAnimTransform()
-
         //});
         //viewer.impl.sceneUpdated(true);
+        //$("#forgeViewer").trigger("autodesk:loaded");
 
-    //});
+    });
 
 
 }