# FluxViewport

#### new FluxViewport(domParent, optionalParams)

UI widget to render 3D geometry. This class provides all the interface you need to add the flux web viewer to your SDK app. This allows you to interpret Flux json data and render that geometry. You may also create any number of viewports and they will share the finite number of WebGL contexts available from the browser.
Note: If you are using Flux materials that have the parameter roughness set then you will need to configure your server to have a content security policy that allows content from https://object-library.storage.googleapis.com so that our standard texture images can be loaded. For more information: https://content-security-policy.com

##### Parameters:

Name | Type | Description
--- | --- | ---
`domParent` | Element | The div container for the canvas

`optionalParams`

Object

Object containing all other parameters

###### Properties

Name | Type | Description
--- | --- | ---
`width` | Number | The width of the canvas
`height` | Number | The height of the canvas
`tessUrl` | String | The url for making brep tessellation requests (overrides projectId) (deprecated)
`projectId` | String | Id has for a flux project used to make tessellation requests
`token` | String | The current flux auth token

Source:
  - FluxViewport.js, line 9

### Methods

#### (static) getChangeEvent() → {String}

Name of the event fired when the camera changes This can be used to observe those changes and register a callback.
For example: fluxViewport.addEventListener(FluxViewport.getChangeEvent(), function() {});

Source:
  - FluxViewport.js, line 123

##### Returns:

Event name

Type
  String

#### (static) getEdgesModes() → {Object}

Enumeration of edges rendering modes. This determines whether edges will be shown when rendering the front face, back face or both. Front edge rendering can be used to achieve hidden line rendering.
Options are NONE, FRONT, BACK, BOTH

Source:
  - FluxViewport.js, line 111

##### Returns:

enumeration

Type
  Object

#### (static) getViews() → {Object}

Return the views enumeration. Allows you to change the view to perspective, top, etc.

Source:
  - FluxViewport.js, line 378

##### Returns:

Enumeration of view options for cameras

Type
  Object

#### (static) isKnownGeom(entities) → {Boolean}

Determines whether the entity or list of entities contains geometry

##### Parameters:

Name | Type | Description
--- | --- | ---
`entities` | Array.<Object> | Object | Geometry data

Source:
  - FluxViewport.js, line 132

##### Returns:

True for objects/lists containing geometry

Type
  Boolean

#### activateShadows()

Turn on shadow rendering. Warning: This is an experimental feature that may not work.

Source:
  - FluxViewport.js, line 435

#### downloadState(prefix)

Download all the geometry settings and raster image that are the state of this viewport. Used for QA testing.

##### Parameters:

Name | Type | Description
--- | --- | ---
`prefix` | String | File name prefix for download path

Source:
  - FluxViewport.js, line 286

#### focus()

Focus the camera on the current geometry

Source:
  - FluxViewport.js, line 163

#### fromJSON(state) → {Promise}

Take a data object and use it to update the viewport's internal state
Warning this is async when it sets entities

##### Parameters:

Name | Type | Description
--- | --- | ---
`state` | Object | The properties to set

Source:
  - FluxViewport.js, line 254

##### Returns:

Completion promise

Type
  Promise

#### getAutoFocus() → {Boolean}

Get whether the viewport will focus the geometry when it is changed

Source:
  - FluxViewport.js, line 411

##### Returns:

Whether to auto focus

Type
  Boolean

#### getGlCanvas() → {Canvas}

Get the canvas for use in QA scripts

Source:
  - FluxViewport.js, line 427

##### Returns:

WebGL canvas dom element

Type
  Canvas

#### homeCamera()

Restore the camera to a default location

Source:
  - FluxViewport.js, line 170

#### render()

Actually render the geometry!
This is called automatically when the camera changes. You may call it on demand as needed when changing properties.

Source:
  - FluxViewport.js, line 156

#### setAutoFocus(focus)

Set whether the viewport should focus the geometry when it is changed

##### Parameters:

Name | Type | Description
--- | --- | ---
`focus` | Boolean | Whether to auto focus

Source:
  - FluxViewport.js, line 403

#### setClearColor(color)

Set the background color of the render canvas

##### Parameters:

Name | Type | Description
--- | --- | ---
`color` | THREE.color | Background color

Source:
  - FluxViewport.js, line 360

#### setEdgesMode(mode)

Set the edges rendering mode for hidden line rendering

##### Parameters:

Name | Type | Description
--- | --- | ---
`mode` | FluxViewport.EDGES_MODES | Whether to render front, back, both or none

Source:
  - FluxViewport.js, line 419

#### setFogDensity(density)

Set the density of the exponential fog. Generally on the order of 0.0001

##### Parameters:

Name | Type | Description
--- | --- | ---
`density` | Number | How much fog

Source:
  - FluxViewport.js, line 386

#### setGeometryEntity(data) → {Object}

Set the viewport geometry from a data object containing Flux entities

##### Parameters:

Name | Type | Description
--- | --- | ---
`data` | Object | The geometry entities to render

Source:
  - FluxViewport.js, line 189

##### Returns:

Promise to resolve after geometry is created

Type
  Object

#### setGeometryJson(dataString) → {Object}

Set the viewport geomtery from a JSON string

##### Parameters:

Name | Type | Description
--- | --- | ---
`dataString` | String | The geometry to render formatted as JSON containing Flux entities

Source:
  - FluxViewport.js, line 179

##### Returns:

Promise to resolve after geometry is created

Type
  Object

#### setSize(width, height)

Set the size of the render canvas

##### Parameters:

Name | Type | Description
--- | --- | ---
`width` | Number | Pixels
`height` | Number | Pixels

Source:
  - FluxViewport.js, line 352

#### setTessUrl(newUrl)

Set the url of the tessellation service. This can be used to replace the value if you did not set it on the constructor.

##### Parameters:

Name | Type | Description
--- | --- | ---
`newUrl` | String | The url of the tessellation server

Source:
  - FluxViewport.js, line 395

#### setupDefaultLighting()

Create a default 3 light rig on the renderer's scene.

Source:
  - FluxViewport.js, line 322

#### setView(view)

Set which camera view to use (ex perspective, top etc.)

##### Parameters:

Name | Type | Description
--- | --- | ---
`view` | String | Name of the camera view to use

Source:
  - FluxViewport.js, line 368

#### toJSON() → {Object}

Make serializable by pruning all references and building an object property tree

Source:
  - FluxViewport.js, line 239

##### Returns:

Data to stringify

Type
  Object