[Frontend] 測試剖面框

This commit is contained in:
wanli 2022-12-29 18:20:16 +08:00
parent f662d22a4f
commit aa6ebf3497
2 changed files with 233 additions and 20 deletions

View File

@ -34,6 +34,12 @@
<button type="button" class="btn btn-secondary" onclick="openOrCloseLight()">電源</button> <button type="button" class="btn btn-secondary" onclick="openOrCloseLight()">電源</button>
<button type="button" class="btn btn-danger" onclick="changeColorHotspot()">變更熱點顏色</button> <button type="button" class="btn btn-danger" onclick="changeColorHotspot()">變更熱點顏色</button>
<button type="button" class="btn btn-dark" onclick="loadHeatMap()">載入熱圖</button> <button type="button" class="btn btn-dark" onclick="loadHeatMap()">載入熱圖</button>
<button type="button" class="btn btn-dark" onclick="hideModel()">隱藏物件</button>
<button type="button" class="btn btn-dark" onclick="openModel()">顯示物件</button>
<button type="button" class="btn btn-dark" onclick="transparentModel()">透明化物件</button>
<button type="button" class="btn btn-dark" onclick="cancelTransparentModel()">取消透明物件</button>
<button type="button" class="btn btn-danger" onclick="proFile()">剖面</button>
<button type="button" class="btn btn-dark" onclick="getLevels()">取得levels</button>
<!--<input id="lightBar" type="range" min="0" max="100" step="5" onchange="changeLightPower()">亮度--> <!--<input id="lightBar" type="range" min="0" max="100" step="5" onchange="changeLightPower()">亮度-->
<!-- <input type="range">Main Axis</input> --> <!-- <input type="range">Main Axis</input> -->
</div> </div>
@ -206,15 +212,31 @@
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUU2JTk2JUI5JUU2JUExJTg4NF8yMDIyXzEyXzI2Lm53ZA'); //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUU2JTk2JUI5JUU2JUExJTg4NF8yMDIyXzEyXzI2Lm53ZA');
//12.28 三菱單層樓 + 系統 //12.28 三菱單層樓 + 系統
launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvQVJDJUU1JTk2JUFFJUU1JUIxJUE0K01FUCVFNSU4NSVBOCVFNiVBMyU5Rl83Rl9ERU1PLm53ZA'); //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvQVJDJUU1JTk2JUFFJUU1JUIxJUE0K01FUCVFNSU4NSVBOCVFNiVBMyU5Rl83Rl9ERU1PLm53ZA');
//目前線上整棟模型
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUU2JTk2JUI5JUU2JUExJTg4NF8yMDIyXzEyXzI2Lm53ZA'); //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUU2JTk2JUI5JUU2JUExJTg4NF8yMDIyXzEyXzI2Lm53ZA');
//單層 + 系統
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1pdHN1YmlzaGkvTUVQK0FSQzdGX0RFTU9fJUU1JTg5JThBJUU5JUEwJTgyXzEyMjgubndk');
//單層
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxMUZfREVNT18yMDIyXzEyXzI5Lm53Yw');
//MEP
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwTUVQJUUzJTgwJTkxXzIwMjJfMTJfMjkubndj');
//12.29 整棟
launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1pdHN1YmlzaGkvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDJUU5JTlCJTk5JUU5JUExJUFGXzEyMjgubndk');
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxXzIwMjJfMTJfMTMubndk');//new ARC //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxXzIwMjJfMTJfMTMubndk');//new ARC
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwTUVQJUUzJTgwJTkxXzIwMjJfMTJfMTMubndj');//new MEP //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwTUVQJUUzJTgwJTkxXzIwMjJfMTJfMTMubndj');//new MEP
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxJUU1JTg1JUE4JUU2JUEzJTlGXzIwMjJfMTJfMTMubndj');//全棟 ARC //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxJUU1JTg1JUE4JUU2JUEzJTlGXzIwMjJfMTJfMTMubndj');//全棟 ARC
}); });
function move1Floor() { function move1Floor() {
setElevatorSpeed(0.2); setElevatorSpeed(0.2);
@ -319,7 +341,30 @@
loadHeatmap(); loadHeatmap();
} }
function hideModel() {
hideObject();
}
function openModel() {
openObject();
}
function transparentModel() {
setObjectTransparent();
}
function cancelTransparentModel() {
cancelObjectTransparent();
}
function getLevels() {
//取得levels
getLevelsData();
}
function proFile() {
profile();
}

View File

@ -9,6 +9,7 @@ var myDataList;
var viewableData; var viewableData;
var dataVizExtn; var dataVizExtn;
var spriteColorRed; var spriteColorRed;
var levels;//剖面用
function launchViewer(urn) { function launchViewer(urn) {
var av = Autodesk.Viewing; var av = Autodesk.Viewing;
@ -550,7 +551,7 @@ async function addHotPoint(data) {
//dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => { //dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
// return { // return {
// scale: 1.0, // Restore the viewable size // scale: 1.0, // Restore the viewable size
// url: "https://.../circle.svg", // //url: "https://.../circle.svg",
// }; // };
//}); //});
//} //}
@ -709,7 +710,7 @@ function setTransparentBuilding() {
//}) //})
for (var i = 0; i < allDbIdsStr.length; i++) { for (var i = 0; i < allDbIdsStr.length; i++) {
setTransparency(parseInt(allDbIdsStr[i]) , 0.2); setTransparency(parseInt(allDbIdsStr[i]) , 0);
} }
} }
@ -1068,19 +1069,19 @@ async function loadHeatmaps(model) {
{ {
id: "Oficina 5", id: "Oficina 5",
//name: "Oficina-", //name: "Oficina-",
position: { x: -4.93, y: -20.61, z: 16.86 }, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88 position: { x: 6.98, y: -19.00, z: 16.86 }, // x: 0, y: 25, z: -2.5 (-4.93, -20.61, 16.86)
sensorTypes: ["temperature", "humidity"] sensorTypes: ["temperature", "humidity"]
}, },
{ {
id: "Oficina 4", id: "Oficina 4",
//name: "Oficina-", //name: "Oficina-",
position: { x: 23.94, y: -3.85, z: 16.86 }, // x: 0, y: 25.03, z: -2.52 (37.03, -4.81, 12.88) position: { x: 35.85, y: -2.24, z: 16.86 }, // x: 0, y: 25.03, z: -2.52 (23.94, -3.85, 16.86)
sensorTypes: ["temperature", "humidity"] sensorTypes: ["temperature", "humidity"]
}, },
{ {
id: "Oficina 3", id: "Oficina 3",
//name: "Oficina-", //name: "Oficina-",
position: { x: -4.93, y: -3.85, z: 16.86 }, // x: 0, y: 25.03, z: -2.52 (2.83, -22.60, 12.88) position: { x: 6.98, y: -2.24, z: 16.86 }, // x: 0, y: 25.03, z: -2.52 (-4.93, -3.85, 16.86)
sensorTypes: ["temperature", "humidity"] sensorTypes: ["temperature", "humidity"]
} }
@ -1103,7 +1104,7 @@ async function loadHeatmaps(model) {
// sensorTypes: ["temperature", "humidity"] // sensorTypes: ["temperature", "humidity"]
//} //}
]; ];
//冷氣N5: (-4.93, -20.61, 16.86), N4: (23.94, -3.85, 16.86), N3: (-4.93, -3.85, 16.86) //冷氣N5: (6.98, -19.00, 16.86), N4: (35.85, -2.24, 16.86), N3: (6.98, -2.24, 16.86)
// Initialize sensor values // Initialize sensor values
let sensorVals = []; let sensorVals = [];
@ -1118,20 +1119,20 @@ async function loadHeatmaps(model) {
// Retrive all dbIds that compose the stadium roof. // Retrive all dbIds that compose the stadium roof.
const it = viewer.model.getInstanceTree(); const it = viewer.model.getInstanceTree();
const roofDbIds = []; const roomDbIds = [];
//it.enumNodeChildren( //it.enumNodeChildren(
// 5027,//4239 // 5027,//4239
// (id) => { // (id) => {
// if (it.getNodeName(id) == "【ARC】【樓板】RC") {//【ARC】【樓板】RC 樓板 // if (it.getNodeName(id) == "【ARC】【樓板】RC") {//【ARC】【樓板】RC 樓板
// roofDbIds.push(id); // roomDbIds.push(id);
// } // }
// }, // },
// true // true
//); //);
roofDbIds.push(792);//5113 834 838 8106 8177 792 8181 roomDbIds.push(7567);//5113 834 838 8106 8177 792 8181
//roofDbIds.push(8183); //roomDbIds.push(8183);
//roofDbIds.push(8185); //roomDbIds.push(8185);
const { const {
SurfaceShadingData, SurfaceShadingData,
@ -1139,7 +1140,7 @@ async function loadHeatmaps(model) {
SurfaceShadingNode, SurfaceShadingNode,
} = Autodesk.DataVisualization.Core; } = Autodesk.DataVisualization.Core;
const shadingNode = new SurfaceShadingNode("Roof Panel", roofDbIds); const shadingNode = new SurfaceShadingNode("Room Panel", roomDbIds);
devices.forEach((device) => { devices.forEach((device) => {
const shadingPoint = new SurfaceShadingPoint( const shadingPoint = new SurfaceShadingPoint(
@ -1168,7 +1169,7 @@ async function loadHeatmaps(model) {
return sensorVals[parseInt(device.id.slice(-1)) - 1]; return sensorVals[parseInt(device.id.slice(-1)) - 1];
} }
dataVizExtn.renderSurfaceShading("Roof Panel", "temperature", getSensorValue); dataVizExtn.renderSurfaceShading("Room Panel", "temperature", getSensorValue);
setInterval(() => { setInterval(() => {
// Modify sensor values. // Modify sensor values.
@ -1224,3 +1225,170 @@ async function loadHeatmap() {
const model = viewer.model; const model = viewer.model;
loadHeatmaps(model); loadHeatmaps(model);
} }
function hideObject() {
//viewer.hide(4);
//viewer.hide(58);
//viewer.hide(613);
//viewer.hide(640);
//viewer.hide(560);
for (var i = 0; i < allDbIdsStr.length; i++) {
viewer.hide(parseInt(allDbIdsStr[i]));
}
}
function openObject() {
//viewer.show(4);
//viewer.show(58);
//viewer.show(613);
//viewer.show(640);
//viewer.show(560);
for (var i = 0; i < allDbIdsStr.length; i++) {
viewer.show(parseInt(allDbIdsStr[i]));
}
}
async function setObjectTransparent() {
//setTransparency(4, 0);
//setTransparency(58, 0);
//setTransparency(613, 0);
//setTransparency(640, 0);
//setTransparency(560, 0);
//setTransparency(parseInt(515), 0);
//for (var i = 0; i < allDbIdsStr.length; i++) {
// setTransparency(parseInt(allDbIdsStr[i]), 0);
//}
//setTransparency(parseInt(515), 0);
//setTransparency(parseInt(516), 0);
//setTransparency(parseInt(517), 0);
//setTransparency(parseInt(518), 0);
//setTransparency(parseInt(519), 0);
//setTransparency(parseInt(399), 0);
//setTransparency(parseInt(101), 0);
//setTransparency(parseInt(100), 0);
//setTransparency(parseInt(58), 0);
//setTransparency(parseInt(587), 0);
//setTransparency(parseInt(586), 0);
//setTransparency(parseInt(585), 0);
//setTransparency(parseInt(584), 0);
//setTransparency(parseInt(583), 0);
//setTransparency(parseInt(562), 0);
//setTransparency(parseInt(361), 0);
//test();
//hideColor(587);
//hideColor(586);
//hideColor(585);
//hideColor(584);
//hideColor(583);
//hideColor(562);
//hideColor(361);
setTransparentBuilding();
}
async function cancelObjectTransparent() {
//setTransparency(4, 1);
//setTransparency(58, 1);
//setTransparency(613, 1);
//setTransparency(640, 1);
//setTransparency(560, 1);
//for (var i = 0; i < allDbIdsStr.length; i++) {
// setTransparency(parseInt(allDbIdsStr[i]), 1);
//}
//setTransparency(515, 0.2);
//setTransparency(516, 0.2);
//setTransparency(517, 0.2);
//setTransparency(518, 0.2);
//setTransparency(519, 0.2);
//setTransparency(399, 0.2);
//setTransparency(101, 0.2);
//setTransparency(100, 0.2);
//setTransparency(58, 0.2);
recoverTransparentBuilding();
}
async function test() {
var model = viewer.model;
var nodeId = 560;
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 = 0.5;
material.transparent = true;
//标记更新
material.needsUpdate = true
}
})
//更新viewer
viewer.impl.invalidate(true, true, true)
}
//------------ 剖面 ----------------------
async function 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;
}
async function getLevelsData() {
const data = await this.getRemoteLevels();
this.levels = data;
}
//function 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);
//}
function profile() {
const upperIdx = 6;
const upperCutPlaneParam = this.getCutPlaneParam(upperIdx, 1);
const lowerIdx = 7;
const lowerCutPlaneParam = this.getCutPlaneParam(lowerIdx, -1);
this.viewer.setCutPlanes([upperCutPlaneParam, lowerCutPlaneParam]);
}
//----------------- end -----------------------------------------------