Autodesk Forge. "model" is always undefined,

Question

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...

Thanks:! :)

Answer 1

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

}