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

[Frontend] 熱點載入時，加入燈光；新增控制燈光參數的函式

Browse Source
This commit is contained in:
wanli 2023-01-04 01:18:46 +08:00
parent 124cf5df5b
commit c48a62c473
3 changed files with 292 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

184
Frontend/forgetTest2.html
View File

@ -17,7 +17,7 @@
<p style="text-align: center; font-weight: bold;">Robot Controls</p> <p style="text-align: center; font-weight: bold;">Robot Controls</p>
<p id="id_printer">Selected_ID: </p> <p id="id_printer">Selected_ID: </p>
<p id="all_id">All_ID: </p> <p id="all_id">All_ID: </p>
<button id="1F1oor" onclick="move1Floor()">1 Floor</button> <!--<button id="1F1oor" onclick="move1Floor()">1 Floor</button>
<button id="2F1oor" onclick="move2Floor()">2 Floor</button> <button id="2F1oor" onclick="move2Floor()">2 Floor</button>
<button id="3F1oor" onclick="move3Floor()">3 Floor</button> <button id="3F1oor" onclick="move3Floor()">3 Floor</button>
@ -30,7 +30,14 @@
<button id="10F1oor" onclick="move10Floor()">10 Floor</button> <button id="10F1oor" onclick="move10Floor()">10 Floor</button>
<button id="11F1oor" onclick="move11Floor()">11 Floor</button> <button id="11F1oor" onclick="move11Floor()">11 Floor</button>
<button id="12F1oor" onclick="move12Floor()">12 Floor</button> <button id="12F1oor" onclick="move12Floor()">12 Floor</button>
<button id="13F1oor" onclick="moveB1Floor()">B1 Floor</button> <button id="13F1oor" onclick="moveB1Floor()">B1 Floor</button>-->
<label>Intensity:</label><input id="LightIntensity" />
<label>Distance:</label><input id="LightDistance" />
<label>Angle:</label><input id="LightAngle" />
<label>Penumbra:</label><input id="LightPenumbra" />
<label>Decay:</label><input id="LightDecay" />
<button onclick="setLightValue()">設定燈光</button>
<button id="Light1" onclick="newALight()">新增燈光</button>
<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>
@ -184,6 +191,7 @@
<script> <script>
var curLightIsOpen = true; var curLightIsOpen = true;
var light;
$(document).ready(function () { $(document).ready(function () {
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDLm53ZA'); //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDLm53ZA');
@ -230,11 +238,11 @@
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1pdHN1YmlzaGkvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDJUU5JTlCJTk5JUU5JUExJUFGXzEyMjgubndk'); //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1pdHN1YmlzaGkvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDJUU5JTlCJTk5JUU5JUExJUFGXzEyMjgubndk');
//12.30 整棟樓 ARC + MEP //12.30 整棟樓 ARC + MEP
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDK01FUCVFNiU4QiU4NiVFNyVCMyVCQiVFNyVCNSVCMV8xMl8zMC5ud2Q'); launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDK01FUCVFNiU4QiU4NiVFNyVCMyVCQiVFNyVCNSVCMV8xMl8zMC5ud2Q');
//12.30 整棟樓 ARC + MEP 半透明 //12.30 整棟樓 ARC + MEP 半透明
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDK01FUCVFNiU4QiU4NiVFNyVCMyVCQiVFNyVCNSVCMV8lRTUlOEQlOEElRTklODAlOEYlRTYlOTglOEUlRTUlQkIlQkElRTclQUYlODlfMTJfMzAubndk'); //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDK01FUCVFNiU4QiU4NiVFNyVCMyVCQiVFNyVCNSVCMV8lRTUlOEQlOEElRTklODAlOEYlRTYlOTglOEUlRTUlQkIlQkElRTclQUYlODlfMTJfMzAubndk');
launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDK01FUCVFNiU4QiU4NiVFNyVCMyVCQiVFNyVCNSVCMV8lRTUlOEQlOEElRTklODAlOEYlRTYlOTglOEUlRTUlQkIlQkElRTclQUYlODlfMTJfMzAubndk'); //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDK01FUCVFNiU4QiU4NiVFNyVCMyVCQiVFNyVCNSVCMV8lRTUlOEQlOEElRTklODAlOEYlRTYlOTglOEUlRTUlQkIlQkElRTclQUYlODlfMTJfMzAubndk');
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxXzIwMjJfMTJfMTMubndk');//new ARC //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxXzIwMjJfMTJfMTMubndk');//new ARC
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwTUVQJUUzJTgwJTkxXzIwMjJfMTJfMTMubndj');//new MEP //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwTUVQJUUzJTgwJTkxXzIwMjJfMTJfMTMubndj');//new MEP
@ -244,82 +252,96 @@
}); });
function move1Floor() { //function move1Floor() {
setElevatorSpeed(0.2); // setElevatorSpeed(0.2);
setElevatorFloor(0); // setElevatorFloor(0);
requestAnimationFrame(movElevator); // requestAnimationFrame(movElevator);
//}
//function move2Floor() {
// setElevatorSpeed(0.2);
// setElevatorFloor(1);
// requestAnimationFrame(movElevator);
//}
//function move3Floor() {
// setElevatorSpeed(0.2);
// setElevatorFloor(2);
// requestAnimationFrame(movElevator);
//}
//function move4Floor() {
// setElevatorSpeed(0.2);
// 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);
// requestAnimationFrame(movElevator);
//}
function newALight() {
//light = newLight();
//newLight();
} }
function move2Floor() { function setLightValue() {
setElevatorSpeed(0.2); var intensity = document.getElementById("LightIntensity").value;
setElevatorFloor(1); var distance = document.getElementById("LightDistance").value;
requestAnimationFrame(movElevator); var angle = document.getElementById("LightAngle").value;
} var penumbra = document.getElementById("LightPenumbra").value;
var decay = document.getElementById("LightDecay").value;
function move3Floor() { setLightValues(intensity, distance, angle, penumbra, decay);
setElevatorSpeed(0.2);
setElevatorFloor(2);
requestAnimationFrame(movElevator);
}
function move4Floor() {
setElevatorSpeed(0.2);
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);
requestAnimationFrame(movElevator);
} }
function changeLightPower() { function changeLightPower() {
@ -329,13 +351,15 @@
} }
function openOrCloseLight() { function openOrCloseLight() {
if (light != null) {
if (curLightIsOpen) { if (curLightIsOpen) {
curLightIsOpen = false; curLightIsOpen = false;
setLightOpenOrClose(curLightIsOpen); setLightOpenOrClose(curLightIsOpen, light);
} }
else { else {
curLightIsOpen = true; curLightIsOpen = true;
setLightOpenOrClose(curLightIsOpen); setLightOpenOrClose(curLightIsOpen, light);
}
} }
} }

209
Frontend/js/forge/forgemodel.js
View File

@ -4,7 +4,8 @@ let fragProxy;
var targetFloorZ; var targetFloorZ;
var elevatorSpeed; var elevatorSpeed;
var selector = "#forgeViewer"; var selector = "#forgeViewer";
let myDataList; var myDataList;
var lightList = [];//燈光清單
var levels;//剖面用 var levels;//剖面用
var lowerIdx;//剖面的下方樓層 var lowerIdx;//剖面的下方樓層
var upperIdx;//剖面的上方樓層 var upperIdx;//剖面的上方樓層
@ -675,15 +676,7 @@ function hideColor(nodeId) {//顏色改成透明
} }
//------------------ 紀錄熱點座標 ---------------
function getHopspotPoint(data) {
//var av = Autodesk.Viewing;
myDataList = data;
//viewer.addEventListener(av.GEOMETRY_LOADED_EVENT, addHotPoint, {
// once: true,
//});
}
//-------------------- end ----------------------
//------------------- 加入熱點 ----------------- //------------------- 加入熱點 -----------------
async function addHotPoint(data) { async function addHotPoint(data) {
@ -714,10 +707,13 @@ async function addHotPoint(data) {
myDataList.forEach((myData, index) => { myDataList.forEach((myData, index) => {
const dbId = 10 + index; const dbId = 10 + index;
const myPosition = myData.position; const myPosition = JSON.parse(myData.device_coordinate_3d);
const viewable = new DataVizCore.SpriteViewable(myPosition, style, dbId); const viewable = new DataVizCore.SpriteViewable(myPosition, style, dbId);
myData._dbId = dbId; myData._dbId = dbId;
viewableData.addViewable(viewable); viewableData.addViewable(viewable);
if (myData.device_number.indexOf("_LT_L1_") > -1) {
lightList.push({ dbid: myData.forge_dbid, name: myData.device_number, spotLight: newLight(myPosition) });
}
}); });
await viewableData.finish(); await viewableData.finish();
@ -730,7 +726,6 @@ async function addHotPoint(data) {
if (event != undefined && event != null) { if (event != undefined && event != null) {
if (event.dbId >= dbIdStart && event.dbId <= dbIdEnd) {//event.dbId > 0 && event.dbId < 19 if (event.dbId >= dbIdStart && event.dbId <= dbIdEnd) {//event.dbId > 0 && event.dbId < 19
console.log(`Sprite clicked: ${event.dbId}`); console.log(`Sprite clicked: ${event.dbId}`);
openHotspotModal();
for (let i = dbIdStart; i <= dbIdEnd; i++) { for (let i = dbIdStart; i <= dbIdEnd; i++) {
changeColorForHotspot(i, false); changeColorForHotspot(i, false);
changeScaleForHotspot(i, false); changeScaleForHotspot(i, false);
@ -757,7 +752,6 @@ async function addHotPoint(data) {
// if (dbIds.length > 0) { // if (dbIds.length > 0) {
// // 處理已選取元件的邏輯 // // 處理已選取元件的邏輯
// $(selector).trigger("autodesk:click:sprite", event); // $(selector).trigger("autodesk:click:sprite", event);
// //openHotspotModal();
// console.log(`------ name: ${viewer.model.getInstanceTree().getNodeName(dbIds)} , dbId: ${dbIds}`);//, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z} // console.log(`------ name: ${viewer.model.getInstanceTree().getNodeName(dbIds)} , dbId: ${dbIds}`);//, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}
// } else { // } else {
// // 處理沒有選取元件的邏輯 // // 處理沒有選取元件的邏輯
@ -802,49 +796,14 @@ async function changeScaleForHotspot(dbId, type = true) {
//------------------- end -------------- //------------------- end --------------
//----------------- 開關熱點小視窗 ---------------------- //------------------------------ 熱圖 ---------------------------------
function openHotspotModal() { async function loadHeatmaps(model, roomsArr) {
//var modal = document.getElementById("hotspotModal");
//modal.style.display = "block";
//$("#pills-register-tab").removeClass("active");
//$("#pills-alarm-tab").removeClass("active");
//$("#pills-operation-tab").removeClass("active");
//$("#pills-login-tab").tab("show");
}
function closeHotspotModal() {
//var modal = document.getElementById("hotspotModal");
//modal.style.display = "none";
}
//------------------ end --------------------------------
//------------------ 熱圖 -------------------------------
async function loadHeatmaps(model) {
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization"); const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
var devices = [];
//取三個空調設備的位置打點 myDataList.forEach((myData, index) => {
const devices = [ devices.push({ id: index, position: JSON.parse(myData.device_coordinate_3d), sensorTypes: ["temperature", "humidity"] });
{ });
id: "Oficina 5",
//name: "Oficina-",
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"]
},
{
id: "Oficina 4",
//name: "Oficina-",
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"]
},
{
id: "Oficina 3",
//name: "Oficina-",
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"]
}
];
//冷氣N5: (-4.93, -20.61, 16.86), N4: (23.94, -3.85, 16.86), N3: (-4.93, -3.85, 16.86)
// Initialize sensor values // Initialize sensor values
let sensorVals = []; let sensorVals = [];
@ -853,7 +812,9 @@ async function loadHeatmaps(model) {
} }
const roomDbIds = []; const roomDbIds = [];
roomDbIds.push(7567); for (var i = 0; i < roomsArr.length; i++) {
roomDbIds.push(roomsArr[i]);
}
const { const {
SurfaceShadingData, SurfaceShadingData,
@ -878,11 +839,10 @@ async function loadHeatmaps(model) {
// Setup surface shading // Setup surface shading
await dataVizExtn.setupSurfaceShading(model, heatmapData); await dataVizExtn.setupSurfaceShading(model, heatmapData);
dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]); dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);
function getSensorValue(device, sensorType) { function getSensorValue(device, sensorType) {
return sensorVals[parseInt(device.id.slice(-1)) - 1]; return sensorVals[parseInt(device.id)];
} }
dataVizExtn.renderSurfaceShading("Room Panel", "temperature", getSensorValue); dataVizExtn.renderSurfaceShading("Room Panel", "temperature", getSensorValue);
@ -895,95 +855,7 @@ async function loadHeatmaps(model) {
dataVizExtn.updateSurfaceShading(getSensorValue); dataVizExtn.updateSurfaceShading(getSensorValue);
}, 2000); }, 2000);
} }
//------------------ end -------------------------------- //------------------------------ end ----------------------------------
async function loadHeatmapsForFloor(model) {
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
//x: -17.33, y: 51.03, z: -2.52
const devices = [
{
id: "Oficina 5",
//name: "Oficina-",
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"]
},
{
id: "Oficina 4",
//name: "Oficina-",
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"]
},
{
id: "Oficina 3",
//name: "Oficina-",
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"]
}
];
// Initialize sensor values
let sensorVals = [];
for (let i = 0; i < devices.length; i++) {
sensorVals[i] = Math.random();
}
const roomDbIds = [];
roomDbIds.push(7567);
const {
SurfaceShadingData,
SurfaceShadingPoint,
SurfaceShadingNode,
} = Autodesk.DataVisualization.Core;
const shadingNode = new SurfaceShadingNode("Room Panel", roomDbIds);
devices.forEach((device) => {
const shadingPoint = new SurfaceShadingPoint(
device.id,
device.position,
device.sensorTypes
);
shadingNode.addPoint(shadingPoint);
});
const heatmapData = new SurfaceShadingData();
heatmapData.addChild(shadingNode);
heatmapData.initialize(model);
// Setup surface shading
await dataVizExtn.setupSurfaceShading(model, heatmapData);
//dataVizExtn.registerSurfaceShadingColors("co2", [0x00ff00, 0xff0000]);
dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);
function getSensorValue(device, sensorType) {
return sensorVals[parseInt(device.id.slice(-1)) - 1];
}
dataVizExtn.renderSurfaceShading("Room Panel", "temperature", getSensorValue);
setInterval(() => {
// Modify sensor values.
for (let i = 0; i < devices.length; i++) {
sensorVals[i] = Math.random();
}
dataVizExtn.updateSurfaceShading(getSensorValue);
}, 2000);
}
//
async function loadHeatmap() {
const model = viewer.model;
loadHeatmaps(model);
}
async function loadHeatmapForFloor() {
const model = viewer.model;
loadHeatmapsForFloor(model);
}
//------------ 剖面 ---------------------- //------------ 剖面 ----------------------
async function getRemoteLevels() { async function getRemoteLevels() {
@ -1038,3 +910,48 @@ function profile() {
this.viewer.setCutPlanes([upperCutPlaneParam, lowerCutPlaneParam]); this.viewer.setCutPlanes([upperCutPlaneParam, lowerCutPlaneParam]);
} }
//----------------- end ----------------------------------------------- //----------------- end -----------------------------------------------
//新增燈光
async function newLight(lightPosition) {
//聚光燈
spotLight = new THREE.SpotLight(0xff0000, 200, 20, 0.6, 0.5, 10);
spotLight.position.set(lightPosition.x, lightPosition.y, lightPosition.z);
spotLight.castShadow = false;
spotLight.visible = true;
spotLight.target.position.set(lightPosition.x, lightPosition.y, lightPosition.z-20);
viewer.scene.add(spotLight.target);
viewer.scene.add(spotLight);
viewer.impl.sceneUpdated(true);
return spotLight;
}
//調整燈光參數 setLightValues(13593, 10, 10, 0.1, 0.3, 1, 0xffff00);
async function setLightValues(dbid, intensity, distance, angle, penumbra, decay, color) {
for (var i = 0; i < lightList.length; i++) {
if (lightList[i].dbid == dbid) {
lightList[i].spotLight.intensity = intensity;
lightList[i].spotLight.distance = distance;
lightList[i].spotLight.angle = angle;
lightList[i].spotLight.penumbra = penumbra;
lightList[i].spotLight.decay = decay;
var tempcolor = new THREE.Color().setHex(color);
lightList[i].spotLight.color = tempcolor;
viewer.impl.sceneUpdated(true);
}
}
}
//======================== 外部呼叫function ===========================
//紀錄熱點座標
function getHopspotPoint(data) {
myDataList = data;
}
//呼叫載入熱圖
async function toLoadHeatmap(roomArr) {
const model = viewer.model;
loadHeatmaps(model, roomArr);
}
//============================= end ===================================

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

@ -5,7 +5,7 @@ var elevatorSpeed;
var allDbIdsStr; var allDbIdsStr;
let bulbLight;//點燈 let bulbLight;//點燈
let spotLight;//聚光燈 let spotLight;//聚光燈
var myDataList; var myDataList;//設備清單
var viewableData; var viewableData;
var dataVizExtn; var dataVizExtn;
var spriteColorRed; var spriteColorRed;
@ -71,6 +71,7 @@ function onDocumentLoadSuccess(doc) {
var currSelection = viewer.getSelection(); var currSelection = viewer.getSelection();
var domElem = document.getElementById('id_printer'); var domElem = document.getElementById('id_printer');
domElem.innerText = currSelection[0]; domElem.innerText = currSelection[0];
var a = newLight();
//var color = new THREE.Vector4(255 / 255, 0, 0, 1); //var color = new THREE.Vector4(255 / 255, 0, 0, 1);
@ -172,7 +173,7 @@ function onDocumentLoadSuccess(doc) {
const fragList = model.getFragmentList(); const fragList = model.getFragmentList();
loadHeatmaps(model); //loadHeatmaps(model);
@ -270,7 +271,7 @@ function onDocumentLoadSuccess(doc) {
e.properties.forEach(function (item) { e.properties.forEach(function (item) {
if (item.displayName == "【tag_id】") { // Tag_name tag_id 【tag_id】 if (item.displayName == "【tag_id】") { // Tag_name tag_id 【tag_id】
if (item.displayValue != "") { if (item.displayValue != "") {
if ((item.displayValue).indexOf('TPE_B1_ME_M10') > -1) { if ((item.displayValue).indexOf('TPE_B1_LT_L1') > -1) {// TPE_B1_ME_M10
console.log("--------------------------------------------------"); console.log("--------------------------------------------------");
console.log("Tag_name dbid: " + e.dbId); console.log("Tag_name dbid: " + e.dbId);
console.log("value: " + item.displayValue); console.log("value: " + item.displayValue);
@ -295,7 +296,7 @@ function onDocumentLoadSuccess(doc) {
bounds.union(box); bounds.union(box);
}, true); }, true);
var position = bounds.center(); var position = bounds.center();
if ((item.displayValue).indexOf('TPE_B1_ME_M10') > -1) { if ((item.displayValue).indexOf('TPE_B1_LT_L1') > -1) {
console.log("position: (" + (position.x).toFixed(2) + ", " + (position.y).toFixed(2) + ", " + (position.z).toFixed(2) + ")"); console.log("position: (" + (position.x).toFixed(2) + ", " + (position.y).toFixed(2) + ", " + (position.z).toFixed(2) + ")");
console.log("--------------------------------------------------"); console.log("--------------------------------------------------");
} }
@ -463,6 +464,9 @@ function onDocumentLoadSuccess(doc) {
//spotLight.target = cube; //spotLight.target = cube;
//viewer.scene.add(spotLight); //viewer.scene.add(spotLight);
//var light = newLight();
/*newLight();*/
} }
//------------------- 加入熱點 ----------------- //------------------- 加入熱點 -----------------
@ -477,28 +481,24 @@ async function addHotPoint(data) {
const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon); const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon);
//function onSpriteClicked(event) { //function onSpriteClicked(event) {
// console.log(`Sprite clicked: ${event.dbId}`); // console.log(`Sprite clicked: ${event.dbId}`);
//} //}
//熱點 點擊事件註冊 //熱點 點擊事件註冊
viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);//MOUSE_CLICK SPRITE_SELECTED viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);//MOUSE_CLICK SPRITE_SELECTED
//viewer.addEventListener(DataVizCore.MOUSE_CLICK_OUT, onSpriteClickedOut);
//viewer.addEventListener(DataVizCore.MOUSE_DOWN, onSpriteClicked);
//viewer.addEventListener(DataVizCore.MOUSE_HOVERING, onSpriteHovering);
viewer.addEventListener( //viewer.addEventListener(
Autodesk.Viewing.SELECTION_CHANGED_EVENT, // Autodesk.Viewing.SELECTION_CHANGED_EVENT,
onSelectionChange // onSelectionChange
); //);
viewableData = new DataVizCore.ViewableData(); viewableData = new DataVizCore.ViewableData();
viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels
//熱圖 打點 x: 0, y: 25.03, z: -2.52 三菱 //熱圖 打點 x: 0, y: 25.03, z: -2.52 三菱 43.72, -15.65, -44.96 // 43.72, -15.65, -44.96
myDataList = [{ position: { x: -21.95, y: 8.92, z: 63.27 } }, //-21.95, 8.92, 63.27 myDataList = [{ position: { x: 43.72, y: -15.65, z: -44.96 } }, //-21.95, 8.92, 63.27 // -7.58, 18.20, -0.25
{ position: { x: -21.95, y: 7.61, z: 63.27 } },//-21.95, 7.61, 63.27 { position: { x: 43.72, y: -15.65, z: -60 } },//-21.95, 7.61, 63.27
{ position: { x: -21.95, y: 6.43, z: 63.27 } },//-21.95, 6.43, 63.27 { position: { x: -21.95, y: 6.43, z: 63.27 } },//-21.95, 6.43, 63.27
{ position: { x: -21.95, y: 5.31, z: 63.27 } }//-21.95, 5.31, 63.27 { position: { x: -21.95, y: 5.31, z: 63.27 } }//-21.95, 5.31, 63.27
];// x: -17.33, y: 51.03, z: -2.52 ; x: -23.21, y: 51.03, z: -2.52 ];// x: -17.33, y: 51.03, z: -2.52 ; x: -23.21, y: 51.03, z: -2.52
@ -571,6 +571,7 @@ async function addHotPoint(data) {
// console.log(`The mouse hovers off ${targetDbId}`); // console.log(`The mouse hovers off ${targetDbId}`);
// } // }
//} //}
} }
//------------------- end -------------- //------------------- end --------------
@ -622,21 +623,21 @@ function changeColorForHotspot(dbId) {
// // event (e.g., update UI to a state where no selection is made). // // event (e.g., update UI to a state where no selection is made).
//} //}
function onSelectionChange(event) { //function onSelectionChange(event) {
if (event != undefined && event != null) { // if (event != undefined && event != null) {
const dbIds = event.dbIdArray; // const dbIds = event.dbIdArray;
if (dbIds.length > 0) { // if (dbIds.length > 0) {
// 處理已選取元件的邏輯 // // 處理已選取元件的邏輯
//openHotspotModal(); // //openHotspotModal();
console.log(`------ name: ${viewer.model.getInstanceTree().getNodeName(dbIds)} , dbId: ${dbIds}`);//, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z} // console.log(`------ name: ${viewer.model.getInstanceTree().getNodeName(dbIds)} , dbId: ${dbIds}`);//, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}
} else { // } else {
// 處理沒有選取元件的邏輯 // // 處理沒有選取元件的邏輯
console.log("no item"); // console.log("no item");
} // }
} // }
} //}
//---------------- end ----------------------------- //---------------- end -----------------------------
//----------------- 開關熱點小視窗 ---------------------- //----------------- 開關熱點小視窗 ----------------------
@ -657,30 +658,6 @@ function closeHotspotModal() {
} }
//------------------ end -------------------------------- //------------------ end --------------------------------
//-------------- 更改燈光範圍 --------------------------
function setLightPower(value) {
//bulbLight.intensity = (value * 10);
//bulbLight.distance = value;
viewer.impl.sceneUpdated(true);
}
function setLightOpenOrClose(value) {
if (value)
spotLight.visible = true;
else {
spotLight.visible = false;
}
viewer.impl.sceneUpdated(true);
}
function setLightTransparency(value) {
bulbLight.intensity = (value * 10);
//bulbLight.
viewer.impl.sceneUpdated(true);
}
//------------- end -----------------------------------
//function getPosition(nodeId) { //function getPosition(nodeId) {
function getFragmentWorldMatrixByNodeId(nodeId, viewer) { function getFragmentWorldMatrixByNodeId(nodeId, viewer) {
let tree = viewer.model.getData().instanceTree; let tree = viewer.model.getData().instanceTree;
@ -1394,3 +1371,78 @@ function profile() {
this.viewer.setCutPlanes([upperCutPlaneParam, lowerCutPlaneParam]); this.viewer.setCutPlanes([upperCutPlaneParam, lowerCutPlaneParam]);
} }
//----------------- end ----------------------------------------------- //----------------- end -----------------------------------------------
//--------------------------- 聚光燈 ----------------------------------
async function newLight() {
//聚光燈
//var spotLight;//聚光燈
//color -（可選）燈光的十六進制顏色。默認值為 0xffffff（白色）。
//強度 -（可選）光強度 / 強度的數值。默認值為 1。
//distance - 燈光的最大範圍。默認值為 0（無限制）。
//angle - 光從其上界為 Math.PI / 2 的方向散射的最大角度。
//半影 - 由於半影而衰減的聚光燈錐體的百分比。取值介於 0 和 1 之間。默認值為零。
//decay - 光沿光的距離變暗的量。
spotLight = new THREE.SpotLight(0xffffff, 200, 20, 0.6, 0.5, 10);//0xffffff 80, 10 //15, 20 , Math.PI / 12
spotLight.position.set(43.72, -15.65, -44.96); //set(-17.33, 51.03, -2.52); // -7.58, 18.20, -0.25 -44.96
spotLight.castShadow = false;
spotLight.visible = true;
//var geom = new THREE.BoxGeometry(); //create 幾何對象 -17.33, 51.03, -4.52
//var material = new THREE.MeshLambertMaterial({ color: 0xffff00 });//0xff0000
//var cube = new THREE.Mesh(geom, material);
//cube.position.set(43.72, -15.65, -46); //set(-17.33, 51.03, -10);//-4.52 // -7.58, 18.20, -1
//cube.scale.set(0.5, 0.5, 0.5);
//viewer.scene.add(cube);
//spotLight.target = cube;
spotLight.target.position.set(43.72, -15.65, -60);// -15.65 -48
viewer.scene.add(spotLight.target);
viewer.scene.add(spotLight);
viewer.impl.sceneUpdated(true);
//return spotLight;
//加入點燈光
//bulbLight = new THREE.PointLight(0xff0000, 50, 20, 2);//0xff0000
//bulbLight.position.set(43.72, -15.65, -44.96);//17.880840301513672
//bulbLight.castShadow = true;
//viewer.scene.add(bulbLight);
//viewer.impl.sceneUpdated(true);
}
//-------------- 更改燈光範圍 --------------------------
function setLightPower(value) {
//bulbLight.intensity = (value * 10);
//bulbLight.distance = value;
viewer.impl.sceneUpdated(true);
}
function setLightValues(intensity, distance, angle, penumbra, decay) {
spotLight.intensity = intensity;
spotLight.distance = distance;
spotLight.angle = angle;
spotLight.penumbra = penumbra;
spotLight.decay = decay;
viewer.impl.sceneUpdated(true);
}
function setLightOpenOrClose(value, light) {
if (value) {
light.visible = true;
//spotLight.visible = true;
}
else {
light.visible = false;
//spotLight.visible = false;
}
viewer.impl.sceneUpdated(true);
}
function setLightTransparency(value) {
bulbLight.intensity = (value * 10);
//bulbLight.
viewer.impl.sceneUpdated(true);
}
//------------- end -----------------------------------