FluxViewport

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.
The most commonly used functions are setGeometryEntity (to set geometry to render) and isKnownGeom (determine if JSON is geometry) so you might want to start reading there.
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 environment texture images can be loaded.
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) (Used when server is not flux.io)
selection Enumeration Whether to enable user selection
projectId String Id of a flux project (required to render breps)
token String The current flux auth token (required to render breps)
Source:

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:
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:
Returns:
enumeration
Type
Object

(static) getEvents() → {Object}

Enumeration of different event types This can be used to differentiate events in the EventListener. fluxViewport.addEventListener(FluxViewport.getChangeEvent(), function(e) { FluxViewport.getEvents().SELECT === e.event;});
Source:
Returns:
Enumeration object
Type
Object

(static) getSelectionModes() → {Object}

Enumeration of selection modes. This determines when selection events occur in response to mouse events. Options are NONE, CLICK, HOVER

Source:
Returns:
enumeration
Type
Object

(static) getViews() → {Object}

Return the views enumeration. Allows you to change the view to perspective, top, etc.
Source:
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:
Returns:
True for objects/lists containing geometry
Type
Boolean

activateShadows()

Turn on shadow rendering (not implemented)
Source:

addControls(CustomControls) → {CustomControls}

Add a new plugin for user interaction controls. See ViewportControls.js for more information.
Parameters:
Name Type Description
CustomControls ViewportControls A constructor that implements the controls interface.
Source:
Returns:
The new instance
Type
CustomControls

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:

focus(objopt)

Focus the camera on the current geometry
Parameters:
Name Type Attributes Description
obj THREE.Object3D <optional>
 Object to focus on
Source:

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:
Returns:
Completion promise
Type
Promise

getAutoFocus() → {Boolean}

Get whether the viewport will focus the geometry when it is changed
Source:
Returns:
Whether to auto focus
Type
Boolean

getGlCanvas() → {Canvas}

Get the canvas for use in QA scripts
Source:
Returns:
WebGL canvas dom element
Type
Canvas

getJson(ids) → {Array.<Object>}

Get the JSON representation of the objects with the given ids
Parameters:
Name Type Description
ids Array.<String> List of object ids
Source:
Returns:
List of Flux JSON objects
Type
Array.<Object>

getObjectMap() → {Object}

Get an object that maps from id string to Three.Object3D in the current scene
Source:
Returns:
Id to object scene map
Type
Object

getSelection() → {Array.<String>}

Get the currently selected geometry as a list of id strings
Source:
Returns:
Current selection
Type
Array.<String>

homeCamera()

Restore the camera to a default location
Source:

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:

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:

setClearColor(color, alpha)

Set the background color of the render canvas
Parameters:
Name Type Description
color THREE.color Background color
alpha Number Opacity
Source:

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:

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:

setGeometryEntity(data) → {Object}

Set the viewport geometry from a data object containing Flux entities. See documentation for more explanation of entities and scene primitives
Parameters:
Name Type Description
data Object The geometry entities to render
Source:
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:
Returns:
Promise to resolve after geometry is created
Type
Object

setHelpersVisible(visible)

Whether to draw helpers (axis and grid)
Parameters:
Name Type Description
visible Boolean False to hide them
Source:

setSelection(ids)

Set the currently selected geometry
Parameters:
Name Type Description
ids Array.<String> New selection
Source:

setSelectionMaterial(data)

Define the material that is applied on selected objects
Parameters:
Name Type Description
data Object Flux json description of a material
Source:

setSize(width, height)

Set the size of the render canvas
Parameters:
Name Type Description
width Number Pixels
height Number Pixels
Source:

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:

setupDefaultLighting()

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

setView(view)

Set which camera view to use (ex perspective, top etc.).
Parameters:
Name Type Description
view FluxCameras.VIEWS The new view mode
Source:

toJSON() → {Object}

Make serializable by pruning all references and building an object property tree
Source:
Returns:
Data to stringify
Type
Object