jay.chang/ibms-dome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
wanli 2022-12-06 01:29:25 +08:00
parent a57e40bf44
commit 87fe72c242
3 changed files with 368 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
Frontend/forgetTest2.html
View File

@ -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>
</html>
</body >
</html >

227
Frontend/js/forge/AdnLevelSectionPanel.js Normal file
View File

@ -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);
})

121
Frontend/js/forge/modeltest.js
View File

@ -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);
}