Class Html

It can help you merge HTML elements into the WebGL world by converting 3D positions to 2D positions. If element is visible, it will have a visible CSS class (can be customized), and for 2D position it will have 3 CSS variables --x, --y and --z-index (can be customized too)

Demo: https://codesandbox.io/s/kokomi-js-html-w0qfmr?file=/src/components/sphereWordCloud.ts

Hierarchy (View Summary)

Component
- Html

Constructors

constructor

new Html(
    base: Base,
    el: HTMLElement,
    position?: Vector3,
    config?: Partial<HtmlConfig>,
): Html
Parameters
- base: Base
- el: HTMLElement
- position: Vector3 = ...
- config: Partial<HtmlConfig> = {}
Returns Html
Overrides Component.constructor
- Defined in src/web/html.ts:61

Properties

base

base: Base

container

container: Scene

distanceFactor

distanceFactor: number

el

el: HTMLElement

emitter

emitter: Emitter<any>

group

group: Object3D

occlude

occlude: Object3D<Object3DEventMap>[]

parentGroup

parentGroup: Object3D<Object3DEventMap> | null

perspectiveName

perspectiveName: string

position

position: Vector3

raycaster

raycaster: Raycaster

scalePropertyName

scalePropertyName: string

transform

transform: boolean

transformInnerName

transformInnerName: string

transformOuterName

transformOuterName: string

viewportHeightName

viewportHeightName: string

viewportWidthName

viewportWidthName: string

visibleClassName

visibleClassName: string

visibleToggle

visibleToggle: boolean

xPropertyName

xPropertyName: string

yPropertyName

yPropertyName: string

zIndexPropertyName

zIndexPropertyName: string

Accessors

domPosition

get domPosition(): Vector2
Returns Vector2
- Defined in src/web/html.ts:112

fov

get fov(): number
Returns number
- Defined in src/web/html.ts:150

isBehindCamera

get isBehindCamera(): boolean
Returns boolean
- Defined in src/web/html.ts:123

isVisible

get isVisible(): boolean
Returns boolean
- Defined in src/web/html.ts:126

perspective

get perspective(): number | ""
Returns number | ""
- Defined in src/web/html.ts:153

scale

get scale(): number
Returns number
- Defined in src/web/html.ts:118

transformInner

get transformInner(): string
Returns string
- Defined in src/web/html.ts:173

transformOuter

get transformOuter(): string
Returns string
- Defined in src/web/html.ts:158

viewportSize

get viewportSize(): { height: number; width: number }
Returns { height: number; width: number }
- Defined in src/web/html.ts:144

visible

get visible(): boolean
Returns boolean
- Defined in src/web/html.ts:134

zIndex

get zIndex(): number | undefined
Returns number | undefined
- Defined in src/web/html.ts:115

Methods

addExisting

addExisting(): void
Returns void
Overrides Component.addExisting
- Defined in src/web/html.ts:177

emit

emit(type: string, event?: any): void
Parameters
- type: string
- event: any = {}
Returns void
Inherited from Component.emit
- Defined in src/components/component.ts:41

hide

hide(): void
Returns void
- Defined in src/web/html.ts:187

makeInvisible

makeInvisible(): void
Returns void
- Defined in src/web/html.ts:215

makeVisible

makeVisible(): void
Returns void
- Defined in src/web/html.ts:212

off

off(type: string, handler: any): void
Parameters
- type: string
- handler: any
Returns void
Inherited from Component.off
- Defined in src/components/component.ts:37

on

on(type: string, handler: any): void
Parameters
- type: string
- handler: any
Returns void
Inherited from Component.on
- Defined in src/components/component.ts:33

setScale

setScale(scale?: number): void
Parameters
- scale: number = 1
Returns void
- Defined in src/web/html.ts:197

setTransformProperty

setTransformProperty(): void
Returns void
- Defined in src/web/html.ts:226

setZIndex

setZIndex(zIndex?: number): void
Parameters
- zIndex: number = 0
Returns void
- Defined in src/web/html.ts:194

show

show(): void
Returns void
- Defined in src/web/html.ts:184

syncPosition

syncPosition(): void
Returns void
- Defined in src/web/html.ts:200

translate

translate(__namedParameters: { x?: number; y?: number }): void
Parameters
- __namedParameters: { x?: number; y?: number }
Returns void
- Defined in src/web/html.ts:190

update

update(time: number): void
Parameters
- time: number
Returns void
Overrides Component.update
- Defined in src/web/html.ts:218

Class Html

Hierarchy (View Summary)

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns Html

Properties

base

container

distanceFactor

el

emitter

group

occlude

parentGroup

perspectiveName

position

raycaster

scalePropertyName

transform

transformInnerName

transformOuterName

viewportHeightName

viewportWidthName

visibleClassName

visibleToggle

xPropertyName

yPropertyName

zIndexPropertyName

Accessors

domPosition

Returns Vector2

fov

Returns number

isBehindCamera

Returns boolean

isVisible

Returns boolean

perspective

Returns number | ""

scale

Returns number

transformInner

Returns string

transformOuter

Returns string

viewportSize

Returns { height: number; width: number }

visible

Returns boolean

zIndex

Returns number | undefined

Methods

addExisting

Returns void

emit

Parameters

Returns void

hide

Returns void

makeInvisible

Returns void

makeVisible

Returns void

off

Parameters

Returns void

on

Parameters

Returns void

setScale

Parameters

Returns void

setTransformProperty

Returns void