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.
Source:
Parameters:
Name Type Description
domParent Element The div container for the canvas
optionalParams Object Object containing all other parameters
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 Object Whether to enable user selection
projectId String Id of a flux project (required to render breps)
noLighting Boolean No lights are added to viewport when this is true
token String The current flux auth token (required to render breps)

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:
Type:
String
Event name

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

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

(static) getViews() → {Object}

Return the views enumeration. Allows you to change the view to perspective, top, etc.
Source:
Returns:
Type:
Object
Enumeration of view options for cameras

(static) isKnownGeom(entities) → {Boolean}

Determines whether the entity or list of entities contains geometry
Source:
Parameters:
Name Type Description
entities Array.<Object> | Object Geometry data
Returns:
Type:
Boolean
True for objects/lists containing geometry

_setupDefaultLighting()

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

activateClipping(px, py, pz, nx, ny, nz, dist)

Enable renderer clipping to reveal inside of geometry
Source:
Parameters:
Name Type Description
px Number The x component of a point on the clipping plane
py Number The y component of a point on the clipping plane
pz Number The z component of a point on the clipping plane
nx Number The x component of the clipping plane normal
ny Number The y component of the clipping plane normal
nz Number The z component of the clipping plane normal
dist Number Distance from origin to clipping plane along normal

activateShadows()

Turn on shadow rendering. Uses THREE.js depth map shadows. Turn this on after you have added lights and geometry to your scene and they will be configured for shadow mapping along with the renderer.
Source:

addControls(CustomControls) → {CustomControls}

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

deactivateClipping()

Turn of clipping so that all geometry will be rendered
Source:

deactivateShadows()

Turn off shadow rendering.
Source:

downloadState(prefix)

Download all the geometry settings and raster image that are the state of this viewport. Used for QA testing.
Source:
Parameters:
Name Type Description
prefix String File name prefix for download path

focus(objopt)

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

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
Source:
Parameters:
Name Type Description
state Object The properties to set
Returns:
Type:
Promise
Completion promise

getAutoFocus() → {Boolean}

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

getGlCanvas() → {Canvas}

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

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

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

getObjectMap() → {Object}

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

getSelection() → {Array.<String>}

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

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
Source:
Parameters:
Name Type Description
focus Boolean Whether to auto focus

setClearColor(color, alpha)

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

setEdgesMode(mode)

Set the edges rendering mode for hidden line rendering
Source:
Parameters:
Name Type Description
mode FluxViewport.EDGES_MODES Whether to render front, back, both or none

setFogDensity(density)

Set the density of the exponential fog. Generally on the order of 0.0001
Source:
Parameters:
Name Type Description
density Number How much fog

setGeometryEntity(data) → {Object}

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

setGeometryJson(dataString) → {Object}

Set the viewport geomtery from a JSON string
Source:
Parameters:
Name Type Description
dataString String The geometry to render formatted as JSON containing Flux entities
Returns:
Type:
Object
Promise to resolve after geometry is created

setHelpersVisible(visible)

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

setSelection(ids)

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

setSelectionMaterial(data)

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

setSize(width, height)

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

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.
Source:
Parameters:
Name Type Description
newUrl String The url of the tessellation server

setupDefaultLighting()

DEPRECATED: This is now controlled via the parameters object to the constructor This function is provided for backward compatibility.
Source:

setView(view)

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

toJSON() → {Object}

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