Is it possible to use viewer.loadDocumentNode to load multiple models in GLB file format into the APS viewer or is there another way?
Self contained example of what I’m trying to do follows
<code><!DOCTYPE html>
<html>
<head>
<title>Multiple 3D Viewer - Autodesk Forge AggregatedView</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="viewer"></div>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
<script>
function launchViewer( models ) {
if( !models || models.length <= 0 )
return console.error( 'Empty model input' );
const options = {
env: 'AutodeskProduction2',
getAccessToken: null,
};
const options3d = {
viewerConfig: {
disableBimWalkInfoIcon: true
}
};
Autodesk.Viewing.Initializer( options, function() {
//get the viewer div
const viewerDiv = document.getElementById( 'viewer' );
//initialize the viewer object
viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerDiv);
viewer.start();
models.map((m)=>{
Autodesk.Viewing.Document.load(m, (doc) => {
var viewables = doc.getRoot().getDefaultGeometry();
viewer.loadDocumentNode(doc, viewables,{
keepCurrentModels: true,
preserveView: true, // 2D drawings
modelSpace: true, // 2D drawings
applyRefPoint: true, // 3D shared coordinates
applyScaling: 'm', // force all models to same scale
globalOffset: {x:0,y:0,z:0}, // force all models to origin
placementTransform: (new THREE.Matrix4()).setPosition(m.xform)
})
.then( console.info );
});
});
});
}
const models = [
'models/m1.glb',
'models/m2.glb',
];
launchViewer( models );
</script>
</body>
</html>
</code>
<code><!DOCTYPE html>
<html>
<head>
<title>Multiple 3D Viewer - Autodesk Forge AggregatedView</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="viewer"></div>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
<script>
function launchViewer( models ) {
if( !models || models.length <= 0 )
return console.error( 'Empty model input' );
const options = {
env: 'AutodeskProduction2',
getAccessToken: null,
};
const options3d = {
viewerConfig: {
disableBimWalkInfoIcon: true
}
};
Autodesk.Viewing.Initializer( options, function() {
//get the viewer div
const viewerDiv = document.getElementById( 'viewer' );
//initialize the viewer object
viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerDiv);
viewer.start();
models.map((m)=>{
Autodesk.Viewing.Document.load(m, (doc) => {
var viewables = doc.getRoot().getDefaultGeometry();
viewer.loadDocumentNode(doc, viewables,{
keepCurrentModels: true,
preserveView: true, // 2D drawings
modelSpace: true, // 2D drawings
applyRefPoint: true, // 3D shared coordinates
applyScaling: 'm', // force all models to same scale
globalOffset: {x:0,y:0,z:0}, // force all models to origin
placementTransform: (new THREE.Matrix4()).setPosition(m.xform)
})
.then( console.info );
});
});
});
}
const models = [
'models/m1.glb',
'models/m2.glb',
];
launchViewer( models );
</script>
</body>
</html>
</code>
<!DOCTYPE html>
<html>
<head>
<title>Multiple 3D Viewer - Autodesk Forge AggregatedView</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="viewer"></div>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
<script>
function launchViewer( models ) {
if( !models || models.length <= 0 )
return console.error( 'Empty model input' );
const options = {
env: 'AutodeskProduction2',
getAccessToken: null,
};
const options3d = {
viewerConfig: {
disableBimWalkInfoIcon: true
}
};
Autodesk.Viewing.Initializer( options, function() {
//get the viewer div
const viewerDiv = document.getElementById( 'viewer' );
//initialize the viewer object
viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerDiv);
viewer.start();
models.map((m)=>{
Autodesk.Viewing.Document.load(m, (doc) => {
var viewables = doc.getRoot().getDefaultGeometry();
viewer.loadDocumentNode(doc, viewables,{
keepCurrentModels: true,
preserveView: true, // 2D drawings
modelSpace: true, // 2D drawings
applyRefPoint: true, // 3D shared coordinates
applyScaling: 'm', // force all models to same scale
globalOffset: {x:0,y:0,z:0}, // force all models to origin
placementTransform: (new THREE.Matrix4()).setPosition(m.xform)
})
.then( console.info );
});
});
});
}
const models = [
'models/m1.glb',
'models/m2.glb',
];
launchViewer( models );
</script>
</body>
</html>
When saving the code as index.html and opening it up in web browser, the following error occurs in web browser’s console
<code>Document.js:56 Uncaught TypeError: Cannot read properties of undefined (reading 'traverse')
at new Document (Document.js:56:18)
at Function.onSuccess (Document.js:174:29)
at onSuccessWrapped (Xhr.js:587:40)
at XMLHttpRequest.onLoad (Xhr.js:829:34)
</code>
<code>Document.js:56 Uncaught TypeError: Cannot read properties of undefined (reading 'traverse')
at new Document (Document.js:56:18)
at Function.onSuccess (Document.js:174:29)
at onSuccessWrapped (Xhr.js:587:40)
at XMLHttpRequest.onLoad (Xhr.js:829:34)
</code>
Document.js:56 Uncaught TypeError: Cannot read properties of undefined (reading 'traverse')
at new Document (Document.js:56:18)
at Function.onSuccess (Document.js:174:29)
at onSuccessWrapped (Xhr.js:587:40)
at XMLHttpRequest.onLoad (Xhr.js:829:34)
Running the page on a static web server does not make any difference.