This is my first project both in Autodesk Forge and Javascript, so I'm quite lost.
This is my code:
async function loadHeatmaps(model){
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
// Given a model loaded from Forge
const structureInfo = new Autodesk.DataVisualization.Core.ModelStructureInfo(model);
const devices = [
{
id: "Oficina 6",
name:"Oficina-",
position: { x: 22.475382737884104, y: 7.4884431474006163, z: 3.0 },
sensorTypes: ["temperature", "humidity"]
}
];
var offset = Autodesk.viewer.model.getGlobalOffset();
removeOffset(devices[0],offset)
// Generates `SurfaceShadingData` after assigning each device to a room.
const shadingData = await Autodesk.structureInfo.generateSurfaceShadingData(devices);
// Use the resulting shading data to generate heatmap from.
await dataVizExtn.setupSurfaceShading(model, shadingData);
// Register color stops for the heatmap. Along with the normalized sensor value
// in the range of [0.0, 1.0], `renderSurfaceShading` will interpolate the final
// heatmap color based on these specified colors.
const sensorColors = [0x0000ff, 0x00ff00, 0xffff00, 0xff0000];
// Set heatmap colors for temperature
const sensorType = "temperature";
dataVizExtn.registerSurfaceShadingColors(sensorType, sensorColors);
// Function that provides sensor value in the range of [0.0, 1.0]
function getSensorValue(surfaceShadingPoint, sensorType) {
// The `SurfaceShadingPoint.id` property matches one of the identifiers passed
// to `generateSurfaceShadingData` function. In our case above, this will either
// be "cafeteria-entrace-01" or "cafeteria-exit-01".
const deviceId = surfaceShadingPoint.id;
// Read the sensor data, along with its possible value range
let sensorValue = readSensorValue(deviceId, sensorType);
const maxSensorValue = getMaxSensorValue(sensorType);
const minSensorValue = getMinSensorValue(sensorType);
// Normalize sensor value to [0, 1.0]
sensorValue = (sensorValue - minSensorValue) / (maxSensorValue - minSensorValue);
return clamp(sensorValue, 0.0, 1.0);
}
// This value can also be a room instead of a floor
const floorName = "01 - Entry Level";
dataVizExtn.renderSurfaceShading(floorName, sensorType, getSensorValue);
}
var viewer;
function view_document(token_id, urns, derivative) {
var options = {
env: 'AutodeskProduction',
api: derivative,
getAccessToken: function(onTokenReady) {
var token = token_id; //token from authentification
var timeInSeconds = 3600;
onTokenReady(token, timeInSeconds);
}//input for viewer initializer function
};
Autodesk.Viewing.Initializer(options, function() {
//fetch the forgeViewer id in the html
var htmlDiv = document.getElementById('forgeViewer');
//create the view at the html div
viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
//start viewer
var startedCode = viewer.start();
if (startedCode > 0) {
console.error('Failed to create a Viewer: WebGL not supported.');
return;
}
console.log('Initialization complete, loading a model next...');
for (let i = 0; i < urns.length; i ++) {
Autodesk.Viewing.Document.load(urns[i]["urn"], (doc) => {
var viewables = doc.getRoot().getDefaultGeometry();
viewer.loadDocumentNode(doc, viewables,{
preserveView: false,
keepCurrentModels: true,
placementTransform: (new THREE.Matrix4()).setPosition(urns[i]["xform"]), keepCurrentModels: true,
globalOffset: {x:0,y:0,z:0}
})
});
}
loadHeatmaps(this.viewer.model);
});
}
It should work. I've copied it from a tutorial website, and have seen similar pieces of code everywhere. But when I load it this error appears on the log console: Error on the console
DG_V2:162 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'model') at loadHeatmaps (DG_V2:162:35)
Could you please help me? I have the feeling that nothing works. Using model, this.model, autodesk.model, autodesk.viewer.model, or any other kind of combination is not working and this is driving me crazy...
Loading modes are async tasks, so you can't get the model before loading completely. Here is the revision of your code snippet.
function view_document(token_id, urns, derivative) {
let options = {
env: 'AutodeskProduction',
api: derivative,
getAccessToken: function(onTokenReady) {
let token = token_id; //token from authentification
let timeInSeconds = 3600;
onTokenReady(token, timeInSeconds);
} //input for viewer initializer function
};
Autodesk.Viewing.Initializer(options, function() {
//fetch the forgeViewer id in the html
let htmlDiv = document.getElementById('forgeViewer');
//create the view at the html div
viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
//start viewer
let startedCode = viewer.start();
if (startedCode > 0) {
console.error('Failed to create a Viewer: WebGL not supported.');
return;
}
console.log('Initialization complete, loading a model next...');
for (let i = 0; i < urns.length; i++) {
Autodesk.Viewing.Document.load(urns[i]["urn"], (doc) => {
let viewables = doc.getRoot().getDefaultGeometry();
let model = await viewer.loadDocumentNode(doc, viewables, {
preserveView: false,
keepCurrentModels: true,
placementTransform: (new THREE.Matrix4()).setPosition(urns[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)
});
}
loadHeatmaps( viewer.getAllModels()[0] ); //!<<< equals to viewer.model
});
}