yiskang/aec-dropme.html

## 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>
	<!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>