Get Started

Iframe our 3d viewer html

Check out the viewer.js in sample code, add iframe to use following code:

<iframe
      onLoad={onLoad}
      className='Viewer'
      ref={iframeref}
      frameBorder='0'
      src='3dviewer/index.html'>
</iframe>

Init 3d Viewer

Init SDK key and set the sceneId (room ID) as following sample code:

// viewer is iframe contentWindow instance 
viewer.init('SDK Key')
viewer.setScene({
  sdkDebug: true,
  sceneId: 'PNSM9epoBUOKhr9kysZN'
})

Add two events listeners:

• message listener to get 3d viewer data, and add condition handlers based on viewer cmd list

• keydown listener to pass key into viewer SDK, such as wsad support need to add this listener

Listen 3d viewer load progress

There are two stages to listen viewer statuses:

1. Viewer data loading: Get progress bar percentage value from progressbar cmd in message listener

2. The sceneready status that represents user enter scene already

3. The userhasinteract status that represents user start to manipulate the viewer, the videos can automatically play until this moment.

switch (viewerData.command) {
  case ViewerSdkCmd.progressbar:
    setProgress(data)
    break
  case ViewerSdkCmd.sceneready:
    setSceneReady(true)
    const floors = viewer.getAllFloorNumbers()
    setFloors(floors)
    console.log('scene enter successfully')
    break
    ...