Moving dynamically loaded model into viewer

Question

I am trying to move the dynamically loaded model inside forge viewer, but I'm getting the following error:

Uncaught TypeError: secondModel.getPlacementTransform is not a function

I am trying to achieve:

dynamically loading model by clicking the thumbnail in the left pane.
move the individual model by selecting it and moving it around in the viewer.

When the user clicks any tumbnail from the right, it is added to the viewer using the code below (calling this function on image click launchViewer(urn)).

var viewer;
var ModelArray = [];

function launchViewer(urn) {
    var options = {
        env: 'AutodeskProduction',
        getAccessToken: getForgeToken
    };
    Autodesk.Viewing.Initializer(options, () => {

        if (viewer == undefined) {
            viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer'));
            viewer.start();
        }
        var documentId = 'urn:' + urn;

        Autodesk.Viewing.Document.load(documentId, (doc) => {

            var viewables = doc.getRoot().getDefaultGeometry();
            let tr = new THREE.Matrix4();
            tr.set(0, 0, .005, 0, .005, 0, 0, 0, 0, .005, 0, 0, 0, 0, 0, 1);
            viewer.loadDocumentNode(doc, viewables, {
                placementTransform: (new THREE.Matrix4()).setPosition({ x: 60, y: 0, z: 0 }),
                keepCurrentModels: true,
                globalOffset: { x: 0, y: 0, z: 0 }
            }).then(function (model1) {
                ModelArray.push(model1);
            });
            document.onmousemove = event => {
                if (!event.ctrlKey)
                    return;
                var secondModel = ModelArray[1].getModelId();
                let res = viewer.impl.hitTest(event.clientX, event.clientY, true, null, [ModelArray[0].getModelId()]);
                let pt = null;

                if (res) {
                    pt = res.intersectPoint;
                } else {
                    pt = viewer.impl.intersectGround(event.clientX, event.clientY);
                }

                let tr = secondModel.getPlacementTransform();
                tr.elements[12] = pt.x;
                tr.elements[13] = pt.y;
                tr.elements[14] = pt.z + extraZ;
                secondModel.setPlacementTransform(tr);
                viewer.impl.invalidate(true, true, true);
            }
        });
    });
}
function onDocumentLoadFailure(viewerErrorCode) {
    console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
}
function getForgeToken(callback) {
    fetch('http://localhost:59045/api/forge/oauth/token').then(res => {
        res.json().then(data => {
            callback(data.access_token, data.expires_in);
        });
    });
}

I am getting an error on the following line.

 let tr = secondModel.getPlacementTransform();

Referring this article https://forge.autodesk.com/blog/dynamic-model-placement

user_853609 · Answer

The solution which is as below on adding every model I show a button for that model and when you click that model is selected and working fine. Below are three model which I have added in the viewer.

The code for above is like below

var viewer;
var ModelArray = [];
var selectedModel;
function ChangeModel(totalModels) {
    selectedModel = ModelArray[totalModels - 1];
}
function launchViewer(urn) {
    var options = {
        env: 'AutodeskProduction',
        getAccessToken: getForgeToken
    };
    Autodesk.Viewing.Initializer(options, () => {
        if (viewer == undefined) {
            viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer'));
            viewer.start();
        }
        var documentId = 'urn:' + urn;

        Autodesk.Viewing.Document.load(documentId, (doc) => {

            var viewables = doc.getRoot().getDefaultGeometry();
            let tr = new THREE.Matrix4();
            tr.set(0, 0, .005, 0, .005, 0, 0, 0, 0, .005, 0, 0, 0, 0, 0, 1);
            viewer.loadDocumentNode(doc, viewables, {
                // placementTransform: (new THREE.Matrix4()).setPosition({ x: 60, y: 0, z: 0 }),
                keepCurrentModels: true,
                globalOffset: { x: 0, y: 0, z: 0 }
            }).then(function (model) {
                //   console.log("Model1: " + model1)
                ModelArray.push(model);
                var totalModel = ModelArray.length;
                if (totalModel == 1)
                    selectedModel = ModelArray[0];
                var cssClass = "cursor: pointer; color: #fff; background-color: #007bff; border-color: #007bff; margin: 10px;";
                $("#modelList").append("");
            });
       

            document.onmousemove = event => {
                if (!event.ctrlKey)
                    return;
                let bb = selectedModel.getBoundingBox();
                var extraZ = bb.max.z;
                let res = viewer.impl.hitTest(event.clientX, event.clientY, true, null, [selectedModel.getModelId()]);
                let pt = null;

                if (res) {
                    pt = res.intersectPoint;
                } else {
                    pt = viewer.impl.intersectGround(event.clientX, event.clientY);
                }

                let tr = selectedModel.getPlacementTransform();
                tr.elements[12] = pt.x;
                tr.elements[13] = pt.y;
                tr.elements[14] = pt.z + extraZ;
                selectedModel.setPlacementTransform(tr);
                viewer.impl.invalidate(true, true, true);
            }
            document.onkeydown = event => {
                if (!event.shiftKey)
                    return;

                if (event.code === "ArrowRight") {
                    let tr = selectedModel.getPlacementTransform();
                    tr.elements[12] += 1;
                    selectedModel.setPlacementTransform(tr);
                }

                if (event.code === "ArrowLeft") {
                    let tr = selectedModel.getPlacementTransform();
                    tr.elements[12] -= 1;
                    selectedModel.setPlacementTransform(tr);
                }
            };

        });
        // Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
        //this.viewer.addEventListener(Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, this.onSelectionBinded);
    });
}
function onDocumentLoadFailure(viewerErrorCode) {
    console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
}

function getForgeToken(callback) {
    fetch('http://localhost:59045/api/forge/oauth/token').then(res => {
        res.json().then(data => {
            callback(data.access_token, data.expires_in);
        });
    });
}

Moving dynamically loaded model into viewer

1 Answers