3D Viewer basic setup

Viewer setup code should be called only after Viewer initialization, e.g. after OccViewerModule.init(). Viewer module doesn't track resizing of canvas element or offset of this element on page automatically. So you have to add several event listeners to track this changes. Sample of code:

// listener of canvas element offset changes
window.addEventListener('mousemove', e => { OccViewerModule.updateCanvasOffset(); });

// resize canvas to fit into window
function updateCanvasSize()
{
  // size of canvas in logical (density-independent) units
  let aSizeX = Math.min(window.innerWidth,  window.screen.availWidth);
  let aSizeY = Math.min(window.innerHeight, window.screen.availHeight);
  aSizeX = Math.max(300, aSizeX - 30);
  aSizeY = Math.max(300, aSizeY / 2);
  occViewerCanvas.style.width  = aSizeX + "px";
  occViewerCanvas.style.height = aSizeY + "px";

  // drawing buffer size (aka backing store)
  let aDevicePixelRatio  = window.devicePixelRatio || 1;
  occViewerCanvas.width  = aSizeX * aDevicePixelRatio;
  occViewerCanvas.height = aSizeY * aDevicePixelRatio;
  OccViewerModule.resize();
}
window.onresize = updateCanvasSize;
updateCanvasSize();
Copy

Viewer module has several rendering parameters settings such as background cubemap and image-based lighting. You can setup background cubemap using custom texture:

// path to cubemap texture to load
var aSkyBox = "/textures/landing_pad1024.jpg";

// set background cubemap with image-based lighting
OccViewerModule.renderingParams.setBackgroundCubemap(aSkyBox, false, true);
Copy

The viewer after setup should look like this: