From 87fe72c2428d57fa3c67f81ba2cc14b3314f0ad6 Mon Sep 17 00:00:00 2001 From: wanli Date: Tue, 6 Dec 2022 01:29:25 +0800 Subject: [PATCH] =?UTF-8?q?[Frontend]=20forgeTest2.html:=20=E9=9B=BB?= =?UTF-8?q?=E6=A2=AF=E7=A7=BB=E5=8B=95=EF=BC=8C=E6=A8=A1=E5=9E=8B=E5=8D=8A?= =?UTF-8?q?=E9=80=8F=E6=98=8E=EF=BC=8C=E9=9B=BB=E6=A2=AF=E9=96=80=E9=A1=AF?= =?UTF-8?q?=E7=A4=BA=E7=B6=A0=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/forgetTest2.html | 36 +++- Frontend/js/forge/AdnLevelSectionPanel.js | 227 ++++++++++++++++++++++ Frontend/js/forge/modeltest.js | 121 +++++++++++- 3 files changed, 368 insertions(+), 16 deletions(-) create mode 100644 Frontend/js/forge/AdnLevelSectionPanel.js diff --git a/Frontend/forgetTest2.html b/Frontend/forgetTest2.html index 2e0bcdb..2fced8d 100644 --- a/Frontend/forgetTest2.html +++ b/Frontend/forgetTest2.html @@ -50,25 +50,38 @@ + - + + + + + - - \ No newline at end of file + + diff --git a/Frontend/js/forge/AdnLevelSectionPanel.js b/Frontend/js/forge/AdnLevelSectionPanel.js new file mode 100644 index 0000000..903d35b --- /dev/null +++ b/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); +}) \ No newline at end of file diff --git a/Frontend/js/forge/modeltest.js b/Frontend/js/forge/modeltest.js index 83732a7..6d8d31c 100644 --- a/Frontend/js/forge/modeltest.js +++ b/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 nodeId2 = 750; - let nodeId3 = 751; + let nodeId = 12112;//12104; //749; //10952; + let nodeId2 = 12111;//12105; //750; + 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 nodeId2 = 750; - let nodeId3 = 751; + let nodeId = 12112;//12104; //749; //10952; + let nodeId2 = 12111;//12105; //750; + 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); }