SceneViewer

SceneViewer

This is really a scene editor.

SceneViewer Demo

Demo SceneViewer at:

https://localhost:8010/scene-toolkit/scene-viewer.html?extra

URL parameters

The following URL parameters can be specified to customize the scene-viewer:

   # What scene to load
   sceneId 
   sceneUrl
   floor
   room
   archOnly - Only show architecture (floors, walls, ceilings, doors, windows).  SUNCG only.
   useVariants - Whether to use the specified variant
  
   # What format to use
   modelFormat
   format - scene format to load

   # Rendering options
   enableMirrors - Fancy mirrors
   enableLights - Allows toggling of lights on/off (in r8x branch)
   defaultLightState

   # Scene coloring
   colorBy

   # What features to enable
   allowEdit   
   showConsole

Using the SceneViewer programmatically

After building the STK, the SceneViewer will be available as part of the STK library as STK.SceneViewer.

The following code snippet shows how to create a SceneViewer:

in html

<div id="canvas"></div>
<div id="modelSearchPanel" class="searchPanel"></div>

Note: The modelSearchPanel must be have id=modelSearchPanel.

in js

      var canvas = document.getElementById('canvas');
      this.sceneViewer = new SceneViewer({
        container: canvas,
        useSidePanelSearch: true,
        showSearchSourceOption: true,
        allowEdit: true,
        showInstructions: true,
      });

See example using SceneViewer at

client/js/apps/scene-viewer/index.js

server/static/html/scene-viewer.html

Customizing the SceneViewer

The SceneViewer takes a set of options:

var sceneViewer = new SceneViewer({
  container: canvas,
  allowEdit: true,
  allowBBoxQuery: true,
  allowSelectMode: true,
  allowConsole: true,
  allowScenePrevNext: true,
  allowHighlightMode: true,
  enableUILog: true,
  showSearchSourceOption: true,
  showInstructions: true,
  useDatGui: true
  ...
});

To filter the set of models available in the model search controller:

restrictModels: '+category:_SceneGalleryModels +hasModel:true'

To have the model search panel display a small restricted, set of models for use in scene editing (no searching)

this.modelSearchController.setResultList('models3d', ['wss.room01', 'wss.1004f30be305f33d28a1548e344f0e2e']);