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

I've not used autodesk-viewer or webgl or related javascript framework but this line `var secondModel = ModelArray[1].getModelId()` shows that `secondModel` is just an id, isn't it? well an id but the name is confusing because it seems to be a model (by its name). BTW, we are human, we read everything that makes sense literally (by words), so naming is very important to avoid silly bugs. — King King, Feb 18 '21 at 08:16
@KingKing thanks for pointing out the mistake :) actually it's a model so it should not be `var secondModel = ModelArray[1].getModelId()` but it should be `var secondModel = ModelArray[1]` — शेखर, Feb 18 '21 at 08:52
@AdamNagy I have slightly modified it and it's working now. I am putting it as a answer but can I move then by selecting by mouse? Also is there any link which can tell me about the positioning the model? — शेखर, Feb 19 '21 at 05:14
When you start dragging, first you can use hitTest() to find out which model is under the mouse, then you can start changing that model's placementTransform based on mouse movements. — Adam Nagy, Feb 19 '21 at 12:58

score 1 · Accepted Answer · answered Feb 19 '21 at 05:23

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("<button type='button' class='btn btn - primary' onclick=\"ChangeModel('" + totalModel + "')\" value='" + totalModel + "' onclick='ChangeModel()' style ='" + cssClass + "'>Model " + totalModel + "</button>");
            });
       

            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 Answers1