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

我试图在forge viewer中移动动态加载的模型，但出现以下错误：

未捕获类型错误：secondModel.getPlacementTransform不是函数

我正在努力实现：

通过单击左窗格中的缩略图动态加载模型

通过选择单个模型并在查看器中四处移动来移动该模型

当用户从右侧单击任何TumbMail时，将使用下面的代码将其添加到查看器中（在图像上调用此函数单击

启动查看器（urn）

）

我在下面的一行中得到一个错误

 let tr = secondModel.getPlacementTransform();

参考本文

---

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

上面的代码如下所示

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

var查看器；
var ModelArray=[]；
var选择模型；
功能更改模型（totalModels）{
selectedModel=ModelArray[totalModels-1]；
}
函数启动查看器（urn）{
变量选项={
环境：“AutodeskProduction”，
getAccessToken:getForgeToken
};
Autodesk.Viewing.Initializer（选项，（）=>{
如果（查看器==未定义）{
查看器=新的Autodesk.Viewing.GuiViewer3D（document.getElementById（'forgeViewer'）；
viewer.start（）；
}
var documentId='urn:'+urn；
Autodesk.Viewing.Document.load（文档ID，（文档）=>{
var viewables=doc.getRoot（）.getDefaultGeometry（）；
设tr=new-THREE.Matrix4（）；
tr.set（0,0,005,0,005,0,0,0,0,005,0,0,0,0,0,0,1）；
viewer.loadDocumentNode（文档、视图、{
//placementTransform:（新的三个.Matrix4（））.setPosition（{x:60，y:0，z:0}），
keepCurrentModels：正确，
全局偏移：{x:0，y:0，z:0}
}).然后（功能（模型）{
//log（“Model1:+Model1”）
ModelArray.push（model）；
var totalModel=ModelArray.length；
如果（totalModel==1）
selectedModel=ModelArray[0]；
var cssClass=“光标：指针；颜色：#fff；背景色：#007bff；边框颜色：#007bff；边距：10px；”；
$（“#模型列表”）.append（“模型”+totalModel+”）；
});
document.onmousemove=事件=>{
如果（！event.ctrlKey）
返回；
设bb=selectedModel.getBoundingBox（）；
var extraZ=bb.max.z；
让res=viewer.impl.hitTest（event.clientX，event.clientY，true，null，[selectedModel.getModelId（）]）；
设pt=null；
如果（res）{
pt=相对交点；
}否则{
pt=viewer.impl.intersectGround（event.clientX，event.clientY）；
}
设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.shiftKey）
返回；
如果（event.code==“ArrowRight”）{
设tr=selectedModel.getPlacementTransform（）；
tr.元素[12]+=1；
selectedModel.setPlacementTransform（tr）；
}
如果（event.code==“箭头左”）{
设tr=selectedModel.getPlacementTransform（）；
tr.元素[12]-=1；
selectedModel.setPlacementTransform（tr）；
}
};
});
//Autodesk.Viewing.Document.load（documentId、onDocumentLoadSuccess、onDocumentLoadFailure）；
//this.viewer.addEventListener（Autodesk.Viewing.AGGREGATE\u SELECTION\u CHANGED\u事件，this.onselection绑定）；
});
}
函数onDocumentLoadFailure（viewerErrorCode）{
错误（'onDocumentLoadFailure（）-errorCode:'+viewerErrorCode）；
}
函数getForgeToken（回调）{
取（'http://localhost:59045/api/forge/oauth/token）。然后（res=>{
res.json（）.then（数据=>{
回调（data.access\u令牌，data.expires\u in）；
});
});
}

我没有使用autodesk viewer或webgl或相关的javascript框架，但这一行

var secondModel=ModelArray[1]。getModelId（）

显示

secondModel

只是一个id，不是吗？一个id，但名称令人困惑，因为它似乎是一个模型（按其名称）。顺便说一句，我们是人类，我们逐字逐句地阅读所有有意义的东西，因此命名对于避免愚蠢的错误非常重要。@KingKing感谢您指出错误：）实际上它是一个模型，所以它不应该是

var secondModel=ModelArray[1]。getModelId（）

，但它应该是

var secondModel=ModelArray[1]

现在可以用了吗？@AdamNagy我对它做了一些修改，现在可以用了。我把它作为一个答案，但我可以移动然后选择鼠标？还有任何链接可以告诉我模型的位置吗？当您开始拖动时，首先可以使用hitTest（）找出鼠标下的模型，然后根据鼠标移动开始更改该模型的placementTransform。

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