[Frontend] forgeTest2.html: 電梯移動，模型半透明，電梯門顯示綠色

Frontend/forgetTest2.html

@@ -50,25 +50,38 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"></script>
     <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
 
+
     <script src="js/forge/modeltest.js"></script>
-    <!--<script src="js/forge/AdnLevelSectionPanel.js"></script>-->
+    <script src="js/forge/AdnLevelSectionPanel.js"></script>
 
+    <style>
+        .show-env-bg-button {
+            background: red;
+        }
 
-    <script>
+        .hide-env-bg-button {
+            background: blue;
+        }
+    </style>
+
+        <script >
         $(document).ready(function () {
             //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDLm53ZA');
-            launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDMjAyMjEyMDEubndk');
+            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDMjAyMjEyMDEubndk');
+            launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MCVFNSU4RiVCMCVFNSU4QyU5NyVFNCVCOCVBRCVFOCU4RiVCMSVFNSVBNCVBNyVFNiVBOCU5MyVFMyU4MCU5MUFSQ18yMDIyMTIwNS5ud2Q');
         });
         function move1Floor() {
             setElevatorSpeed(0.2);
             setElevatorFloor(0);
             requestAnimationFrame(movElevator);
         }
+
         function move2Floor() {
             setElevatorSpeed(0.2);
             setElevatorFloor(1);
             requestAnimationFrame(movElevator);
         }
+
         function move3Floor() {
             setElevatorSpeed(0.2);
             setElevatorFloor(2);
@@ -80,46 +93,55 @@
             setElevatorFloor(3);
             requestAnimationFrame(movElevator);
         }
+
         function move5Floor() {
             setElevatorSpeed(0.2);
             setElevatorFloor(4);
             requestAnimationFrame(movElevator);
         }
+
         function move6Floor() {
             setElevatorSpeed(0.2);
             setElevatorFloor(5);
             requestAnimationFrame(movElevator);
         }
+
         function move7Floor() {
             setElevatorSpeed(0.2);
             setElevatorFloor(6);
             requestAnimationFrame(movElevator);
         }
+
         function move8Floor() {
             setElevatorSpeed(0.2);
             setElevatorFloor(7);
             requestAnimationFrame(movElevator);
         }
+
         function move9Floor() {
             setElevatorSpeed(0.2);
             setElevatorFloor(8);
             requestAnimationFrame(movElevator);
         }
+
         function move10Floor() {
             setElevatorSpeed(0.2);
             setElevatorFloor(9);
             requestAnimationFrame(movElevator);
         }
+
         function move11Floor() {
             setElevatorSpeed(0.2);
             setElevatorFloor(10);
             requestAnimationFrame(movElevator);
         }
+
         function move12Floor() {
             setElevatorSpeed(0.2);
             setElevatorFloor(11);
             requestAnimationFrame(movElevator);
         }
+
         function moveB1Floor() {
             setElevatorSpeed(0.2);
             setElevatorFloor(-1);
@@ -128,12 +150,12 @@
 
         function changeLightPower() {
             var value = document.getElementById('lightBar').value;
-            console.log("power: " + value);
+            console .log("power: " + value);
             setLightPower(value);
         }
 
-    </script>
+        </script >
 
 
-</body>
+        </body >
-</html>
+        </html >

Frontend/js/forge/AdnLevelSectionPanel.js

@@ -0,0 +1,227 @@
+'use strict';
+
+$(function () {
+    class AdnLevelSectionPanel extends Autodesk.Viewing.UI.DockingPanel {
+        constructor(viewer, title, options) {
+            options = options || {};
+
+            //  Height adjustment for scroll container, offset to height of the title bar and footer by default.
+            if (!options.heightAdjustment)
+                options.heightAdjustment = 70;
+
+            if (!options.marginTop)
+                options.marginTop = 0;
+
+            super(viewer.container, viewer.container.id + 'AdnLevelSectionPanel', title, options);
+
+            this.container.classList.add('adn-docking-panel');
+            this.container.classList.add('adn-lvl-section-panel');
+            this.createScrollContainer(options);
+
+            this.viewer = viewer;
+            this.options = options;
+            this.uiCreated = false;
+
+            this.addVisibilityListener((show) => {
+                if (!show) return;
+
+                if (!this.uiCreated)
+                    this.createUI();
+            });
+
+            this.onButtonClicked = this.onButtonClicked.bind(this);
+        }
+
+        async getRemoteLevels() {
+            const aecData = await Autodesk.Viewing.Document.getAecModelData(this.viewer.model.getDocumentNode());
+            if (!aecData.levels) return null;
+
+            const levels = aecData.levels;
+            levels.sort((a, b) => b.elevation - a.elevation);
+            return levels;
+        }
+
+        createSelectOptions(data, selector) {
+            if (!data || !selector || !(selector instanceof HTMLSelectElement))
+                return;
+
+            for (let i = 0; i < data.length; ++i) {
+                const level = data[i];
+
+                const option = document.createElement('option');
+                option.value = level.guid;
+                option.text = level.name;
+                selector.add(option);
+            }
+        }
+
+        async createUI() {
+            this.uiCreated = true;
+
+            const table = document.createElement('table');
+            table.className = 'adsk-lmv-tftable adn-lvl-section-panel-table';
+
+            const tbody = document.createElement('tbody');
+            table.appendChild(tbody);
+            this.scrollContainer.appendChild(table);
+
+            const upperRow = tbody.insertRow(-1);
+            const upperTextCell = upperRow.insertCell(0);
+            upperTextCell.innerText = 'Upper:';
+            const upperSelectCell = upperRow.insertCell(1);
+
+            const lowerRow = tbody.insertRow(-1);
+            const lowerTextCell = lowerRow.insertCell(0);
+            lowerTextCell.innerText = 'Lower:';
+            const lowerSelectCell = lowerRow.insertCell(1);
+
+            const upperLvlSelector = document.createElement('select');
+            upperLvlSelector.id = 'adn-upper-lvl-selector';
+            upperLvlSelector.className = 'adn-lvl-selector';
+            upperSelectCell.appendChild(upperLvlSelector);
+
+            const lowerLvlSelector = document.createElement('select');
+            lowerLvlSelector.id = 'adn-lower-lvl-selector';
+            lowerLvlSelector.className = 'adn-lvl-selector';
+            lowerSelectCell.appendChild(lowerLvlSelector);
+
+            const data = await this.getRemoteLevels();
+            this.levels = data;
+
+            this.createSelectOptions(data, upperLvlSelector);
+            this.createSelectOptions(data, lowerLvlSelector);
+
+            const buttonRow = tbody.insertRow(-1);
+            const buttonCell = buttonRow.insertCell(0);
+            buttonCell.colSpan = 2;
+
+            const sectionButton = document.createElement('button');
+            sectionButton.type = 'button';
+            sectionButton.textContent = 'Apply';
+            buttonCell.appendChild(sectionButton);
+
+            sectionButton.addEventListener(
+                'click',
+                this.onButtonClicked
+            );
+
+            this.resizeToContent();
+        }
+
+        getCutPlaneParam(idx, n) {
+            if (idx < 0 || !n) return;
+
+            const level = this.levels[idx];
+            if (!level) return;
+
+            //const precision = Autodesk.Viewing.Private.calculatePrecision( level.elevation  );
+            const model = this.viewer.model;
+            const globalOffset = model.getData().globalOffset;
+            const units = model.getUnitString();
+            const elevRaw = Autodesk.Viewing.Private.convertUnits('ft', units, 1, level.elevation);
+
+            let d = elevRaw - globalOffset.z - 0.5;
+            if (n == 1)
+                d = -1 * d;
+
+            return new THREE.Vector4(0, 0, n, d);
+        }
+
+        onButtonClicked() {
+            const upperSelector = document.getElementById('adn-upper-lvl-selector');
+            const lowerSelector = document.getElementById('adn-lower-lvl-selector');
+
+            if (!upperSelector || !lowerSelector)
+                return;
+
+            const upperIdx = upperSelector.selectedIndex;
+            const upperCutPlaneParam = this.getCutPlaneParam(upperIdx, 1);
+            const lowerIdx = lowerSelector.selectedIndex;
+            const lowerCutPlaneParam = this.getCutPlaneParam(lowerIdx, -1);
+
+            this.viewer.setCutPlanes([upperCutPlaneParam, lowerCutPlaneParam]);
+        }
+    }
+
+    class AdnLevelSectionPanelExtension extends Autodesk.Viewing.Extension {
+        constructor(viewer, options) {
+            super(viewer, options);
+
+            this.panel = null;
+            this.createUI = this.createUI.bind(this);
+            this.onToolbarCreated = this.onToolbarCreated.bind(this);
+        }
+
+        onToolbarCreated() {
+            this.viewer.removeEventListener(
+                Autodesk.Viewing.TOOLBAR_CREATED_EVENT,
+                this.onToolbarCreated
+            );
+
+            this.createUI();
+        }
+
+        createUI() {
+            const viewer = this.viewer;
+
+            const lvlSectionPanel = new AdnLevelSectionPanel(viewer, 'Level Section');
+
+            viewer.addPanel(lvlSectionPanel);
+            this.panel = lvlSectionPanel;
+
+            const lvlSectionButton = new Autodesk.Viewing.UI.Button('toolbar-adnLevelSectionsTool');
+            lvlSectionButton.setToolTip('Level Sections');
+            lvlSectionButton.setIcon('adsk-icon-properties');
+            lvlSectionButton.onClick = function () {
+                lvlSectionPanel.setVisible(!lvlSectionPanel.isVisible());
+            };
+
+            const subToolbar = new Autodesk.Viewing.UI.ControlGroup('toolbar-adn-tools');
+            subToolbar.addControl(lvlSectionButton);
+            subToolbar.adnLvlsectionbutton = lvlSectionButton;
+            this.subToolbar = subToolbar;
+
+            viewer.toolbar.addControl(this.subToolbar);
+
+            lvlSectionPanel.addVisibilityListener(function (visible) {
+                if (visible)
+                    viewer.onPanelVisible(lvlSectionPanel, viewer);
+
+                lvlSectionButton.setState(visible ? Autodesk.Viewing.UI.Button.State.ACTIVE : Autodesk.Viewing.UI.Button.State.INACTIVE);
+            });
+        }
+
+        load() {
+            if (this.viewer.toolbar) {
+                // Toolbar is already available, create the UI
+                this.createUI();
+            } else {
+                // Toolbar hasn't been created yet, wait until we get notification of its creation
+                this.viewer.addEventListener(
+                    Autodesk.Viewing.TOOLBAR_CREATED_EVENT,
+                    this.onToolbarCreated
+                );
+            }
+
+            return true;
+        }
+
+        unload() {
+            if (this.panel) {
+                this.panel.uninitialize();
+                delete this.panel;
+                this.panel = null;
+            }
+
+            if (this.subToolbar) {
+                this.viewer.toolbar.removeControl(this.subToolbar);
+                delete this.subToolbar;
+                this.subToolbar = null;
+            }
+
+            return true;
+        }
+    }
+
+    Autodesk.Viewing.theExtensionManager.registerExtension('Autodesk.ADN.LevelSectionPanel', AdnLevelSectionPanelExtension);
+})

Frontend/js/forge/modeltest.js

@@ -2,6 +2,7 @@
 let fragProxy;
 var targetFloorZ;
 var elevatorSpeed;
+var allDbIdsStr;
 
 function launchViewer(urn) {
     var options = {
@@ -15,6 +16,7 @@ function launchViewer(urn) {
         viewer.start();
         var documentId = 'urn:' + urn;
         Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
+        
     });
 }
 
@@ -112,19 +114,23 @@ function onDocumentLoadSuccess(doc) {
 
      });
 
+    //viewer.loadExtension('ToolbarExtension');
+
    
     viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
      var instanceTree = viewer.model.getData().instanceTree;
-     var allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
+     allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
      var domElem = document.getElementById('all_id');
      domElem.innerText = allDbIdsStr;
 
+        
+
      
 
      let tree = viewer.model.getData().instanceTree;
-     let nodeId = 749;//10952;
+    let nodeId = 12112;//12104; //749; //10952;
-     let nodeId2 = 750;
+    let nodeId2 = 12111;//12105; //750;
-     let nodeId3 = 751;
+    let nodeId3 = 12110;//12104; //751;
 
      tree.enumNodeFragments(nodeId, function (frag) {
          fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
@@ -165,9 +171,100 @@ function onDocumentLoadSuccess(doc) {
 
     });
 
+    //add toolbar fail
+    //function ToolbarExtension(viewer, options) {
+    //    Autodesk.Viewing.Extension.call(this, viewer, options);
+    //}
+
+    //ToolbarExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
+    //ToolbarExtension.prototype.constructor = ToolbarExtension;
+
+    //ToolbarExtension.prototype.load = function () {
+    //    this.viewer.setLightPreset(6);
+    //    this.viewer.setEnvMapBackground(true);
+    //    this.viewer.fitToView();
+    //    return true;
+    //};
+
+    //ToolbarExtension.prototype.unload = function () {
+
+    //};
+    //Autodesk.Viewing.theExtensionManager.registerExtension('ToolbarExtension', ToolbarExtension);
+
+    //ToolbarExtension.prototype.onToolbarCreated = function (toolbar) {
+    //    //alert('TODO: customize Viewer toolbar');
+
+    //    var viewer = this.viewer;
+    //    var button1 = new Autodesk.Viewing.UI.Button('show-env-bg-button');
+    //    button1.onClick = function (e) {
+    //        viewer.setEnvMapBackground(true);
+    //    };
+    //    button1.addClass('show-env-bg-button');
+    //    button1.setToolTip('Show Environment');
+
+    //    //SubToolbar
+    //    this.subToolbar = new Autodesk.Viewing.UI.ControlGroup('my-custom-toolbar');
+    //    this.subToolbar.addControl(button1);
+    //    toolbar.addControl(this.subToolbar);
+
+    //};
+
+
     //NOP_VIEWER.getProperties(NOP_VIEWER.getSelection(), data => console.log(data));
 }
 
+function setTransparentBuilding() {
+    //allDbIdsStr.forEach((dbId) => {
+    //    setTransparency(dbId, 0.2);
+    //})
+
+    for (var i = 0; i < allDbIdsStr.length; i++) {
+        setTransparency(parseInt(allDbIdsStr[i]) , 0.2);
+    }
+
+}
+
+function recoverTransparentBuilding() {
+    //allDbIdsStr.forEach((dbId) => {
+    //    setTransparency(dbId, 1);
+    //})
+
+    for (var i = 0; i < allDbIdsStr.length; i++) {
+        setTransparency(parseInt(allDbIdsStr[i]), 1);
+    }
+}
+
+//設定模型 透明度
+function setTransparency(nodeId, opacity) {
+    var model = viewer.model;
+    //var nodeId = 1633;
+
+    var fragList = viewer.model.getFragmentList();
+
+    var fragIds = []
+
+    model.getData().instanceTree.enumNodeFragments(
+        nodeId, (fragId) => {
+            fragIds.push(fragId)
+        });
+
+    fragIds.forEach((fragId) => {
+        //获取材质
+        var material = fragList.getMaterial(fragId);
+
+        if (material) {
+            //设置透明度
+            material.opacity = opacity;//0.5;
+            material.transparent = true;
+            //标记更新
+            material.needsUpdate = true;
+        }
+    })
+
+    //更新viewer
+    viewer.impl.invalidate(true, true, true);
+}
+
 
 
 function setElevatorFloor(floor) {
@@ -209,12 +306,14 @@ function movElevator() {
 
 
     let tree = viewer.model.getData().instanceTree;//三組:(749,750,751),(755,756,757),(761,762,763)
-    let nodeId = 749; //10952;
+    let nodeId = 12112;//12104; //749; //10952;
-    let nodeId2 = 750;
+    let nodeId2 = 12111;//12105; //750;
-    let nodeId3 = 751;
+    let nodeId3 = 12110;//12104; //751;
     let fragProxyZ = 0;
     var movStatus = 0; // 0=no 1=up 2=down
     changeColor(nodeId3);
+    //setTransparency(0.2);
+    setTransparentBuilding();
 
 
     if (fragProxy.position.z > targetFloorZ) {
@@ -285,6 +384,8 @@ function movElevator() {
         }
         else {
             hideColor(nodeId3);
+            //setTransparency(1);
+            recoverTransparentBuilding();
         }
     }
     else if (movStatus == 1) {
@@ -293,6 +394,8 @@ function movElevator() {
         }
         else {
             hideColor(nodeId3);
+            //setTransparency(1);
+            recoverTransparentBuilding();
         }
     }
 
@@ -306,12 +409,12 @@ function movElevator() {
     //viewer.impl.sceneUpdated(true);
 }
 
-function changeColor(nodeId) {
+function changeColor(nodeId) {//電梯變綠色
     var color = new THREE.Vector4(0, 1, 0, 1);
     viewer.setThemingColor(nodeId, color);
 }
 
-function hideColor(nodeId) {
+function hideColor(nodeId) {//顏色改成透明
     var color = new THREE.Vector4(0, 1, 0, 0);
     viewer.setThemingColor(nodeId, color);
 }