将动态加载的模型移动到查看器中

Question

我试图在 Forge 查看器中移动动态加载的模型，但出现以下错误：

Uncaught TypeError: secondModel.getPlacementTransform is not a function

我正在努力实现：

通过单击左侧窗格中的缩略图动态加载模型。
通过选择单个模型并在查看器中四处移动来移动它。

当用户单击右侧的任何缩略图时，会使用以下代码将其添加到查看器（在单击图像时调用此函数 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);
        });
    });
}

我在以下行中收到错误。

 let tr = secondModel.getPlacementTransform();

引用这篇文章 https://forge.autodesk.com/blog/dynamic-model-placement

Answer 1

下面的解决方案是添加每个模型，我为该模型显示一个按钮，当您单击该模型时，该模型被选中并且工作正常。以下是我在查看器中添加的三个模型。

上面的代码如下

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

javascript

jquery

webgl

autodesk-viewer