Skip to content

Instantly share code, notes, and snippets.

@yiskang

yiskang/aec-dropme.html

Last active June 30, 2022 06:10
Show Gist options
  • Save yiskang/649c88cc09218704d96cb90f80bc59a3 to your computer and use it in GitHub Desktop.
Save yiskang/649c88cc09218704d96cb90f80bc59a3 to your computer and use it in GitHub Desktop.
Download ZIP
Demo of Forge Viewer's DropMe extension. Video: https://youtu.be/VNPnXb075Bc
Raw
aec-dropme.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.css"
type="text/css">
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100vh;
}
#preview {
height: 100%;
width: 100%;
}
</style>
<title>Autodesk Forge: AEC - Drop Me</title>
</head>
<body>
<div id="preview"></div>
<script>
const MODEL_URN = 'dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6c2FuZGJveC9yYWNfYmFzaWNfc2FtcGxlX3Byb2plY3QucnZ0';
const MODEL_2D_VIEWABLE_GUID = '6d3acd40-53b7-41b4-9d96-72e9eaf4bc89-0005d699';
const options = {
getAccessToken: async function (callback) {
const resp = await fetch('/api/auth/token');
if (resp.ok) {
const token = await resp.json();
callback(token.access_token, token.expires_in);
} else {
throw new Error(await resp.text());
}
}
};
Autodesk.Viewing.Initializer(options, function () {
viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('preview'));
viewer.start();
const profileSettings = Autodesk.Viewing.ProfileSettings.clone(Autodesk.Viewing.ProfileSettings.AEC);
profileSettings.settings.bimWalkToolPopup = false;
const profile = new Autodesk.Viewing.Profile(profileSettings);
viewer.setProfile(profile);
loadModel(viewer, MODEL_URN, MODEL_2D_VIEWABLE_GUID);
viewer.addEventListener(
Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
() => viewer.loadExtension('Autodesk.AEC.DropMeExtension', {
enableViewIn3d: true,
teleportOnRelease: true,
useLocalModelCoords: true,
onHandleViewIn3D: (pos, target, isPosFrom2dTo3dMatrix) => {
console.log(pos, target, isPosFrom2dTo3dMatrix);
viewer.navigation.setPosition(pos);
viewer.navigation.setTarget(target);
},
getMain3DView: (sheetNode) => {
const views = sheetNode.getRootNode().search(Autodesk.Viewing.BubbleNode.MODEL_NODE);
return views[0];
},
onDrop: async (pos, dir, mode, bubbleNode, ignoreCameraGlobalOffset) => {
console.log(pos, dir, mode, bubbleNode, ignoreCameraGlobalOffset);
const model = await viewer.loadDocumentNode(bubbleNode.getDocument(), bubbleNode);
if (pos && dir && mode) {
await viewer.waitForLoadDone();
let firstPersonTool = viewer.getExtension('Autodesk.BimWalk');
firstPersonTool.activate();
firstPersonTool.disableGravityUntilNextMove();
const posWithOffset = pos.clone().applyMatrix4(model.getModelToViewerTransform());
const eyeLen = viewer.navigation.getEyeVector().length();
const target = posWithOffset.clone().add(dir.clone().multiplyScalar(eyeLen));
viewer.navigation.setPosition(posWithOffset);
viewer.navigation.setTarget(target);
}
}
}),
{ once: true }
);
});
async function loadModel(viewer, urn, guid) {
return new Promise(function (resolve, reject) {
function onDocumentLoadSuccess(doc) {
Autodesk.Viewing.Document.getAecModelData(doc.getRoot()).then(aec => console.log('AEC metadata', aec));
resolve(viewer.loadDocumentNode(doc, doc.getRoot().findByGuid(guid)));
}
function onDocumentLoadFailure(code, message) {
console.error('Could not load document.', message);
reject(message);
}
Autodesk.Viewing.Document.load('urn:' + urn, onDocumentLoadSuccess, onDocumentLoadFailure);
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment