Created
September 10, 2024 04:13
-
-
Save yiskang/3434f312305cb957f3c3ba4a8362c466 to your computer and use it in GitHub Desktop.
Make APS Viewer background transparent and add custom background image by CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" /> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" | |
| type="text/css"> | |
| <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script> | |
| <style> | |
| body { | |
| margin: 0; | |
| background-image: url('https://picjumbo.com/wp-content/uploads/dark-clouds-before-the-storm-free-photo-2210x1473.jpg') | |
| } | |
| #forgeViewer { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| } | |
| .adsk-viewing-viewer { | |
| background: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="forgeViewer"></div> | |
| <script> | |
| function fetchForgeToken(callback) { | |
| fetch('http://localhost:8090/api/oauth/token', { | |
| method: 'get', | |
| headers: new Headers({ 'Content-Type': 'application/json' }) | |
| }) | |
| .then((response) => { | |
| if (response.status === 200) { | |
| return response.json(); | |
| } else { | |
| return Promise.reject( | |
| new Error(`Failed to fetch token from server (status: ${response.status}, message: ${response.statusText})`) | |
| ); | |
| } | |
| }) | |
| .then((data) => { | |
| if (!data) return Promise.reject(new Error('Empty token response')); | |
| callback(data.access_token, data.expires_in); | |
| }) | |
| .catch((error) => console.error(error)); | |
| } | |
| async function loadViewAsync(viewer, urn, viewableId) { | |
| return new Promise((resolve, reject) => { | |
| async function onDocumentLoadSuccess(doc) { | |
| await doc.downloadAecModelData(); | |
| let viewable = (viewableId ? doc.getRoot().findByGuid(viewableId) : doc.getRoot().getDefaultGeometry()); | |
| let model = await viewer.loadDocumentNode(doc, viewable); | |
| await viewer.waitForLoadDone(); | |
| resolve(model); | |
| } | |
| function onDocumentLoadFailure() { | |
| reject(new Error('Failed fetching Forge manifest')); | |
| } | |
| Autodesk.Viewing.Document.load(urn, onDocumentLoadSuccess, onDocumentLoadFailure); | |
| }); | |
| } | |
| Autodesk.Viewing.Initializer({ env: 'AutodeskProduction2', api: 'streamingV2', getAccessToken: fetchForgeToken }, async function () { | |
| const config3d = { | |
| modelBrowserStartCollapsed: true, | |
| modelBrowserExcludeRoot: false, | |
| }; | |
| let viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer'), config3d); | |
| let startedCode = viewer.start(null, null, null, null, { | |
| webglInitParams: { | |
| alpha: true | |
| } | |
| }); | |
| if (startedCode > 0) { | |
| console.error('Failed to create a Viewer: WebGL not supported.'); | |
| return; | |
| } | |
| const customAecProfileSettings = Autodesk.Viewing.ProfileSettings.clone(Autodesk.Viewing.ProfileSettings.AEC); | |
| customAecProfileSettings.settings.envMapBackground = false; | |
| const profile = new Autodesk.Viewing.Profile(customAecProfileSettings); | |
| viewer.setProfile(profile); | |
| let documentId = 'urn:dXJuOmFkc...DIzLnJ2dA'; | |
| let mainModel = await loadViewAsync(viewer, documentId); | |
| viewer.impl.renderer().setClearAlpha(0) //clear alpha channel | |
| viewer.impl.glrenderer().setClearColor(0xffffff, 0) //set transparent background, color code does not matter | |
| viewer.impl.invalidate(true) //trigger rendering | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Author
yiskang
commented
Sep 10, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment