@tmrw-realityos/charm / Exports / ROSPlayer

Class: ROSPlayer

Can load and display GLTF models.

Example

Use as a web component

HTML properties:

• environmentURL: IBL light environment to load
• transparent-background

<ros-player transparent-background environmentURL="environments/field.hdre">
     <ros-model model-url="path-to-file.glb"></ros-model>
</ros-player>

Example

Use from typescript and javascript

 const renderer = new ROSPlayer()
 renderer.transparentBackground = false
 renderer.appendChild(new ROSModel('assets/scene.gltf'))
 renderer.environmentURL = 'environments/field.hdre'
 document.body.appendChild(renderer)

Hierarchy

• LitElement

  ↳ ROSPlayer

Implements

• ROSHost

Table of contents

Constructors

• constructor

Properties

• alwaysRerender
• backgroundColor
• bloom
• environmentFormat
• environmentURL
• exposure
• highlightColor
• main_node
• msaa
• outlineColor
• postfx
• refreshHint
• renderer
• rendererReady
• scene
• skybox
• styles

Accessors

• camera
• debugInfo
• frameMs
• models
• plugins
• transparentBackground

Methods

• afterFrame
• beforeFrame
• connectedCallback
• createMarkerNode
• disconnectedCallback
• firstUpdated
• loadEnvironment
• project
• render
• unproject
• willUpdate

HTML Properties

alwaysRerender

• alwaysRerender: boolean = false

Force rendering in the frame loop, otherwise only render on demand.

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:89

---

backgroundColor

• backgroundColor: RGBAColor

Set the background color Color is in the format of rgba(n,n,n,a) or rgb(n,n,n) where n is 0-255 and a is 0.0-1.0 The alpha blending with other html elements is controled via transparent-background

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:102

---

highlightColor

• highlightColor: RGBAColor

Set the highlight color of a selected object

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:127

---

outlineColor

• outlineColor: RGBAColor

Set the outline color of a selected object Color is in the format rgb(n,n,n) where n is 0-255

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:115

HTML Properties

Environment map used for reflections and lightning. Must be in the HDRE format.

environmentURL

• Optional environmentURL: string = ""

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:79

Other

constructor

• new ROSPlayer(): ROSPlayer

Returns

ROSPlayer

Overrides

LitElement.constructor

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:175

---

bloom

• bloom: number = 0.5

Bloom postprocessing effect persitence. Only applicable if postfx is true.

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:150

---

environmentFormat

• Optional environmentFormat: string = ""

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:82

---

exposure

• exposure: number = 1

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:130

---

main_node

• main_node: Node

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:158

---

msaa

• msaa: number = 1

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:138

---

postfx

• postfx: boolean = false

Apply post processing effects

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:144

---

refreshHint

• refreshHint: eRefreshHint = eRefreshHint.ON_FRAME

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:169

---

renderer

• Optional renderer: WebGPURenderer

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:162

---

rendererReady

• Optional rendererReady: Promise<WebGPURenderer>

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:161

---

scene

• scene: Scene

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:157

---

skybox

• skybox: boolean = false

Show a 360˚ skybox when an environment is loaded using .

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:135

---

styles

▪ Static styles: CSSResult

Overrides

LitElement.styles

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:183

---

camera

• get camera(): Camera

Returns

Camera

Implementation of

ROSHost.camera

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:201

---

debugInfo

• get debugInfo(): DebugInfo

Returns

DebugInfo

Implementation of

ROSHost.debugInfo

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:663

---

frameMs

• get frameMs(): number

Returns

number

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:267

---

models

• get models(): Object

Returns

Object

Name	Type
add	(node: Node, sourceModel: unknown, url: string) => void
remove	(node: Node) => void

Implementation of

ROSHost.models

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:689

---

plugins

• get plugins(): ROSPlugin[]

Returns

ROSPlugin[]

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:314

---

transparentBackground

• get transparentBackground(): boolean

Returns

boolean

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:215

---

afterFrame

▸ afterFrame(elapsedTime): void

Parameters

Name	Type
elapsedTime	number

Returns

void

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:529

---

beforeFrame

▸ beforeFrame(elapsedTime): void

Parameters

Name	Type
elapsedTime	number

Returns

void

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:499

---

connectedCallback

▸ connectedCallback(): Promise<void>

Returns

Promise<void>

Overrides

LitElement.connectedCallback

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:340

---

createMarkerNode

▸ createMarkerNode(node): Node

Parameters

Name	Type
node	Node

Returns

Node

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:278

---

disconnectedCallback

▸ disconnectedCallback(): Promise<void>

Returns

Promise<void>

Overrides

LitElement.disconnectedCallback

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:456

---

firstUpdated

▸ firstUpdated(): void

Returns

void

Overrides

LitElement.firstUpdated

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:290

---

loadEnvironment

▸ loadEnvironment(path, format?): Promise<void>

Parameters

Name	Type
path	string
format?	string

Returns

Promise<void>

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:469

---

project

▸ project(vec, viewport): vec3

Parameters

Name	Type
vec	vec3
viewport	vec4

Returns

vec3

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:205

---

render

▸ render(): TemplateResult<1>

Returns

TemplateResult<1>

Overrides

LitElement.render

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:195

---

unproject

▸ unproject(vec, viewport): vec3

Parameters

Name	Type
vec	vec3
viewport	vec4

Returns

vec3

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:210

---

willUpdate

▸ willUpdate(changedProperties): Promise<void>

Parameters

Name	Type
changedProperties	PropertyValueMap<ROSPlayer>

Returns

Promise<void>

Overrides

LitElement.willUpdate

Defined in

packages/charm/src/webComponents/ROSPlayer.ts:561