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.
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
|
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() {});
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:
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
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
render()
Actually render the geometry!
This is called automatically when the camera changes. You may call it on demand as needed when changing properties.
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