[Frontend] 系統監控-電梯3D模型匯入
This commit is contained in:
wanli
parent
9da9ff177a
commit
930b06de18
@ -35,12 +35,12 @@
|
||||
<div id="elevatorBlock" class="elevator">
|
||||
<div class="elevator-header">
|
||||
<div class="row m-0 align-items-center p-2 gap-3 btn-group btn-group-toggle">
|
||||
<button class="btn btn-secondary btn-sm active" data-tabname="floShowType" data-target="#2dDiv">
|
||||
2D
|
||||
</button>
|
||||
<button class="btn btn-secondary btn-sm" data-tabname="floShowType" data-target="#3dDiv">
|
||||
<button class="btn btn-secondary btn-sm active" data-tabname="floShowType" data-target="#3dDiv">
|
||||
3D
|
||||
</button>
|
||||
<button class="btn btn-secondary btn-sm" data-tabname="floShowType" data-target="#2dDiv">
|
||||
2D
|
||||
</button>
|
||||
</div>
|
||||
<div class="row m-0 align-items-center p-2 gap-3 btn-group btn-group-toggle">
|
||||
<button id="upFloBtn" class="btn btn-secondary btn-sm">
|
||||
@ -52,13 +52,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="elevator-body d-flex align-items-center justify-content-center yt-table-container">
|
||||
<div id="3dDiv" data-tabname="floShowType" data-tabrole="child">
|
||||
<div id="forgeViewer"></div>
|
||||
</div>
|
||||
<div id="2dDiv" data-tabname="floShowType" data-tabrole="child">
|
||||
<table id="floorTable" class="elevator-build m-auto">
|
||||
</table>
|
||||
</div>
|
||||
<div id="3dDiv" data-tabname="floShowType" data-tabrole="child">
|
||||
<div id="forgeViewer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div>
|
||||
@ -903,19 +903,20 @@
|
||||
var zoomToggle = 3;
|
||||
$(function () {
|
||||
initChart();
|
||||
|
||||
setBuildFloor();
|
||||
setCards();
|
||||
subDeviceSetStatus();
|
||||
setEleManTable();
|
||||
console.log("--- load 3d ---");
|
||||
load3DModel();
|
||||
})
|
||||
|
||||
function getFloDevList() {
|
||||
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
load3DModel();
|
||||
});
|
||||
|
||||
//baja 訂閱設備
|
||||
function subDeviceSetStatus() {
|
||||
myBaja = new subscriptionDevices();
|
||||
@ -2283,8 +2284,7 @@
|
||||
|
||||
//載入3D模型
|
||||
function load3DModel() {
|
||||
console.log("launchViewer~");
|
||||
/*launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MFRFU1QlRTMlODAlOTEubndk');*/
|
||||
launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MFRFU1QlRTMlODAlOTEubndk');
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
<button id="1F1oor" onclick="move1Floor()">1 Floor</button>
|
||||
<button id="2F1oor" onclick="move2Floor()">2 Floor</button>
|
||||
<button id="3F1oor" onclick="move3Floor()">3 Floor</button>
|
||||
<input id="lightBar" type="range" min="0" max="100" step="5" onchange="changeLightPower()">亮度
|
||||
<!-- <input type="range">Main Axis</input> -->
|
||||
</div>
|
||||
|
||||
@ -55,8 +56,11 @@
|
||||
$(document).ready(function () {
|
||||
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU2JUIwJUI4JUU2JTk4JUE1JUU2JUEzJUE3JUUzJTgwJTkxJUUzJTgwJTkwTUVQJUUzJTgwJTkxVjMubndk');
|
||||
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwTUVQJUUzJTgwJTkxLm53Yw');//[TEST].nwd
|
||||
launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MFRFU1QlRTMlODAlOTEubndk');
|
||||
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MFRFU1QlRTMlODAlOTEubndk');
|
||||
|
||||
launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwTUVQJUUzJTgwJTkxLm53Yw==');
|
||||
//
|
||||
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwVEVTVCVFMyU4MCU5MS5ud2Q=');
|
||||
|
||||
});
|
||||
function move1Floor() {
|
||||
@ -74,6 +78,13 @@
|
||||
setElevatorFloor(2);
|
||||
requestAnimationFrame(movElevator);
|
||||
}
|
||||
|
||||
function changeLightPower() {
|
||||
var value = document.getElementById('lightBar').value;
|
||||
console.log("power: " + value);
|
||||
setLightPower(value);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@ -37,7 +37,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
<link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
|
||||
<link rel="stylesheet" href="css/site.css" />
|
||||
<link rel="stylesheet" href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css" />
|
||||
<!--<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">-->
|
||||
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
|
||||
</head>
|
||||
<!-- BEGIN Body -->
|
||||
<!-- Possible Classes
|
||||
@ -2528,15 +2528,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
<!--The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below:-->
|
||||
<script src="lib/statistics/easypiechart/easypiechart.bundle.js"></script>
|
||||
|
||||
|
||||
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
|
||||
<script src="js/forge/forgemodel.js"></script>
|
||||
|
||||
<!--Bajascript-->
|
||||
<script src="js/bajascript/bscriptReq.js"></script>
|
||||
<!--<script type='text/javascript' src='/module/js/com/tridium/js/ext/require/require.min.js?version=1496767636459'></script>-->
|
||||
<script src='js/bajascript/require.js'></script>
|
||||
|
||||
<!--<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>-->
|
||||
<!--<script src="js/forge/forgemodel.js"></script>-->
|
||||
|
||||
|
||||
|
||||
<script type='text/javascript'>
|
||||
|
||||
@ -1,62 +1,25 @@
|
||||
var viewer;
|
||||
|
||||
const devices = [
|
||||
{
|
||||
id: "Sensor 1",
|
||||
position: {
|
||||
x: -22.779729106182415,
|
||||
y: 5.431043023608719,
|
||||
z: 4.553068469137088,
|
||||
},
|
||||
type: "combo",
|
||||
sensorTypes: ["temperature", "co2"],
|
||||
dbId: 1,
|
||||
},
|
||||
{
|
||||
id: "Sensor 2",
|
||||
position: {
|
||||
x: 0.20752051811882666,
|
||||
y: 5.431043023608719,
|
||||
z: 4.553068469137088,
|
||||
},
|
||||
type: "combo",
|
||||
sensorTypes: ["temperature", "co2"],
|
||||
dbId: 2,
|
||||
},
|
||||
];
|
||||
|
||||
var sensorStyleDefinitions = {
|
||||
co2: {
|
||||
url: "https://d2zqnmauvnpnnm.cloudfront.net/assets-1/images/co2.svg",
|
||||
color: 0xffffff,
|
||||
},
|
||||
temperature: {
|
||||
url: "https://d2zqnmauvnpnnm.cloudfront.net/assets-1/images/thermometer.svg",
|
||||
color: 0xffffff,
|
||||
},
|
||||
default: {
|
||||
url: "https://d2zqnmauvnpnnm.cloudfront.net/assets-1/images/circle.svg",
|
||||
color: 0xffffff,
|
||||
},
|
||||
};
|
||||
|
||||
// Initialize sensor values
|
||||
let sensorVals = [];
|
||||
//let sensorVals = [];
|
||||
let fragProxy;
|
||||
var targetFloorZ;
|
||||
var elevatorSpeed;
|
||||
for (let i = 0; i < devices.length; i++) {
|
||||
sensorVals[i] = Math.random();
|
||||
}
|
||||
let bulbLight;
|
||||
//for (let i = 0; i < devices.length; i++) {
|
||||
// sensorVals[i] = Math.random();
|
||||
//}
|
||||
|
||||
function launchViewer(urn) {
|
||||
var options = {
|
||||
env: 'AutodeskProduction',
|
||||
getAccessToken: getForgeToken
|
||||
getAccessToken: getForgeToken,
|
||||
language: 'en'
|
||||
};
|
||||
|
||||
Autodesk.Viewing.Initializer(options, () => {
|
||||
viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer'));
|
||||
//viewer = new Autodesk.Viewing.Viewer3D(document.getElementById('forgeViewer'));//這是沒有工具列的
|
||||
viewer.start();
|
||||
var documentId = 'urn:' + urn;
|
||||
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
|
||||
@ -64,26 +27,26 @@ function launchViewer(urn) {
|
||||
|
||||
|
||||
//test
|
||||
for (let i = 0; i < urn.length; i++) {
|
||||
Autodesk.Viewing.Document.load(urn[i]["urn"], async (doc) => {
|
||||
let viewables = doc.getRoot().getDefaultGeometry();
|
||||
let model = await viewer.loadDocumentNode(doc, viewables, {
|
||||
preserveView: false,
|
||||
keepCurrentModels: true,
|
||||
placementTransform: (new THREE.Matrix4()).setPosition(urn[i]["xform"]),
|
||||
keepCurrentModels: true,
|
||||
globalOffset: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
z: 0
|
||||
}
|
||||
});
|
||||
//for (let i = 0; i < urn.length; i++) {
|
||||
// Autodesk.Viewing.Document.load(urn[i]["urn"], async (doc) => {
|
||||
// let viewables = doc.getRoot().getDefaultGeometry();
|
||||
// let model = await viewer.loadDocumentNode(doc, viewables, {
|
||||
// preserveView: false,
|
||||
// keepCurrentModels: true,
|
||||
// placementTransform: (new THREE.Matrix4()).setPosition(urn[i]["xform"]),
|
||||
// keepCurrentModels: true,
|
||||
// globalOffset: {
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// z: 0
|
||||
// }
|
||||
// });
|
||||
|
||||
await viewer.waitForLoadDone(); //!<<< Wait for loading materials, properties and geometries for this model (URN)
|
||||
});
|
||||
}
|
||||
// await viewer.waitForLoadDone(); //!<<< Wait for loading materials, properties and geometries for this model (URN)
|
||||
// });
|
||||
//}
|
||||
|
||||
loadHeatmaps(viewer.getAllModels()[0]); //!<<< equals to viewer.model
|
||||
//loadHeatmaps(viewer.getAllModels()[0]); //!<<< equals to viewer.model
|
||||
|
||||
|
||||
|
||||
@ -122,57 +85,65 @@ function onDocumentLoadSuccess(doc) {
|
||||
viewer.loadDocumentNode(doc, viewables).then(i => {
|
||||
// documented loaded, any action?
|
||||
});
|
||||
viewer.addEventListener(Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, (args) => {
|
||||
var currSelection = viewer.getSelection();
|
||||
var domElem = document.getElementById('id_printer');
|
||||
domElem.innerText = currSelection[0];
|
||||
});
|
||||
//viewer.addEventListener(Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, (args) => {
|
||||
// var currSelection = viewer.getSelection();
|
||||
// var domElem = document.getElementById('id_printer');
|
||||
// domElem.innerText = currSelection[0];
|
||||
|
||||
// const targetElem = currSelection[0];
|
||||
|
||||
// const model = viewer.model;
|
||||
// const instanceTree = model.getData().instanceTree;
|
||||
// const fragList = model.getFragmentList();
|
||||
|
||||
// let bounds = new THREE.Box3();
|
||||
|
||||
// instanceTree.enumNodeFragments(targetElem, (fragId) => {
|
||||
// let box = new THREE.Box3();
|
||||
// fragList.getWorldBounds(fragId, box);
|
||||
// bounds.union(box);
|
||||
// }, true);
|
||||
|
||||
// const position = bounds.center();
|
||||
// console.log(position)
|
||||
|
||||
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;
|
||||
//allDbIdsStr.map(function (id) { return parseInt(id) });
|
||||
//getAllLeafComponents(viewer, function (jsonData) {
|
||||
// console.log("data: " + jsonData);
|
||||
//});
|
||||
//var a = getAllDbIds(viewer);
|
||||
//console.log("a: " + a);//10952
|
||||
|
||||
let tree = viewer.model.getData().instanceTree;
|
||||
let nodeId = 10952;
|
||||
viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function (data) {
|
||||
//var viewer = data.target;
|
||||
//var instanceTree = viewer.model.getData().instanceTree;
|
||||
//var allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
|
||||
//var domElem = document.getElementById('all_id');
|
||||
//domElem.innerText = allDbIdsStr;
|
||||
|
||||
tree.enumNodeFragments(nodeId, function (frag) {
|
||||
fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
|
||||
fragProxy.getAnimTransform();
|
||||
//fragProxy.quaternion = new THREE.Quaternion().setFromAxisAngle(
|
||||
// new THREE.Vector3(0, 0.3, 0),
|
||||
// -Math.PI / 2);
|
||||
//fragProxy.quaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0));
|
||||
//fragProxy.quaternion = new THREE.Quaternion().setPosition(new THREE.Vector3(10, 5, 0), 5);
|
||||
|
||||
//let tree = viewer.model.getData().instanceTree;
|
||||
//let nodeId = 10952;
|
||||
|
||||
//tree.enumNodeFragments(nodeId, function (frag) {
|
||||
// fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
|
||||
// console.log("p:" + fragProxy.position);
|
||||
// fragProxy.getAnimTransform();
|
||||
// let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26
|
||||
// fragProxy.position = fragPosition;
|
||||
// fragProxy.updateAnimTransform();
|
||||
//do some work with fragment proxy
|
||||
//});
|
||||
//viewer.impl.sceneUpdated(true);
|
||||
|
||||
});//, { once: true, }
|
||||
|
||||
//var fragPosition = new THREE.Vector3(
|
||||
// 10 - fragProxy.offset.x,
|
||||
// 10 - fragProxy.offset.y,
|
||||
// 10 - fragProxy.offset.z)
|
||||
//bulbLight = new THREE.PointLight(0xff0000, 20, 2, 1);//0xffee88
|
||||
//bulbLight.position.set(39.33340644836426, 19.965089797973633, 18);//17.880840301513672
|
||||
//bulbLight.castShadow = true;
|
||||
//bulbLight.power = 100;// 110000;
|
||||
//bulbLight.emissiveIntensity = bulbLight.intensity / Math.pow(0.02, 2.0);
|
||||
//viewer.scene.add(bulbLight);
|
||||
}
|
||||
|
||||
|
||||
let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26
|
||||
|
||||
fragProxy.position = fragPosition
|
||||
|
||||
fragProxy.updateAnimTransform()
|
||||
|
||||
});
|
||||
function setLightPower(value) {
|
||||
bulbLight.intensity = (value * 10);
|
||||
viewer.impl.sceneUpdated(true);
|
||||
|
||||
});
|
||||
|
||||
|
||||
//bulbLight.power = value;
|
||||
}
|
||||
|
||||
function setElevatorFloor(floor) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user