Today I was asked to add the ability to place a custom logo onto an instance of the Forge viewer (in my case for Dasher 360, of course). It seemed like an interesting one to share, as I’m sure others have the same requirement.
There are probably lots of ways to solve this – for instance by adding the image with its own camera as an overlay inside the Forge viewer’s 3D scene – but I decided to stick to something simple and have the browser overlay the image.
There are a few changes needed for this to work. Firstly to the HTML page hosting the viewer. Here’s the div structure I used, based on this example.
<div id=”canvas-align”>
<div id=”viewer3d”></div>
<div id=”logo-overlay”>
<div id=”logo”></div>
</div>
</div>
Then some CSS additions:
#canvas-align {
position: relative;
width: 100%;
height: calc(100vh – 50px);
margin: auto;
}
#logo-overlay {
position: absolute;
top: 0;
width: 100%;
height: calc(100vh – 50px);
Read more