Base

new Base(options, init3Dopt)

Basic Frame3D wrap different html element to handle CSS3D rendering CSS3DRenderer. It's possible to add DomElement3D to this. Composed with THREE.Scene + THREE.PerspectiveCamera + THREE.WebGLRenderer.

Parameters:
NameTypeAttributesDefaultDescription
optionsobject

options to configure frame3Dbase

Properties
NameTypeAttributesDefaultDescription
domElementClassstring<optional>

dom element class name

parentDomElementHTMLElement<optional>
document.body

dom parent element of domElement frame3DBase

catchEventsCSS3Dboolean<optional>
false

event are catch by css3D element (ie DomElement3D)

sceneConfigmodule:@ud-viz/utils_browser~SceneConfig<optional>

scene config

init3Dboolean<optional>
true

THREE.Scene + THREE.PerspectiveCamera + THREE.WebGLRenderer should be init

Source

Classes

Base

Members

camera :THREE.PerspectiveCamera

camera 3D

Type:
  • THREE.PerspectiveCamera
Source

css3DRenderer :CSS3DRenderer

css renderer

Type:
  • CSS3DRenderer
Source

css3DScene :THREE.Scene

css scene

Type:
  • THREE.Scene
Source

directionalLight :THREE.DirectionalLight|null

Type:
  • THREE.DirectionalLight | null
Source

domElement :HTMLDivElement

root html

Type:
  • HTMLDivElement
Source

domElement3DArray :Array.<DomElement3D>

current domElements 3D in frame3D

Type:
Source

domElementCss :HTMLDivElement

root css (where css3Delement are added)

Type:
  • HTMLDivElement
Source

domElementUI :HTMLDivElement

where ui element should be added (note that you have to handle manually z-index element composing ui, should it be automatically ?)

Type:
  • HTMLDivElement
Source

domElementWebGL :HTMLDivElement

root webgl (where canvas is added)

Type:
  • HTMLDivElement
Source

isRendering :boolean

flag to stop rendering 3D

Type:
  • boolean
Source

listeners :Object.<string, Array.<function()>>

listeners of Base.EVENT

Type:
  • Object.<string, Array.<function()>>
Source

renderer :THREE.WebGLRenderer

canvas renderer

Type:
  • THREE.WebGLRenderer
Source

resizeListener :function

reference resize listener to remove it on dispose

Type:
  • function
Source

scene :THREE.Scene

canvas scene 3D

Type:
  • THREE.Scene
Source

sceneConfig :SceneConfig

Type:
  • SceneConfig
Source

(static) EVENT

Events triggered by Base

Source

Methods

appendDomElement3D(domElement3D, parent)

Parameters:
NameTypeDescription
domElement3DDomElement3D

domElement3D to add in frame3D

parentTHREE.Object3D

parent of the maskElement

Source

catchEventsCSS3D(value)

Parameters:
NameTypeDescription
valueboolean

if true allow css3D html elements to catch user events, otherwise no

Source

dispose()

Remove html from the DOM and stop listeners

Source

initCSS3D()

Init the css3D renderer

Source

isCatchingEventsCSS3D() → {boolean}

Source
Returns:
  • false if root webgl is catching events, true if it's root css
Type: 
boolean

on(eventID, listener)

Register a listener on a Base.EVENT

Parameters:
NameTypeDescription
eventIDstring

event to add listener Base.EVENT

listenerfunction

callback to call on eventID

Source

onResize(updateTHREEVariablesopt)

Resize frame3D

Parameters:
NameTypeAttributesDefaultDescription
updateTHREEVariablesboolean<optional>
true

camera and renderer should be updated

Source

removeDomElement3D(domElement3D)

Parameters:
NameTypeDescription
domElement3DDomElement3D

domElement3D to remove

Source

render() → {void}

Render scene3D

Source
Returns:
Type: 
void

renderCSS3D() → {void}

Render css3D

Source
Returns:
Type: 
void

setRender(f)

Customize how to render the frame3D

Parameters:
NameTypeDescription
ffunction

custom rendering function

Source