View
Extends:
The View component return the aframe representation of the scene. This system utilizes the entity component system(ECS) to build objects in the scene from different components.
Constructor Summary
| Public Constructor | ||
| public |
|
|
Member Summary
| Public Members | ||
| public |
assetsHelper(asset: object): HTMLElement: * Help convert asset(model,image,etc) datas to A-Frame entitiy |
|
| public |
basicMoveCam: HTMLElement: * It returns camera basic with different movement control depends on the browser type Mobile: default movement controls with flying enabled VR: default movement controls with flying disabled Desktop: custom wasd-plus-control with controllable movement speed |
|
| public |
On every interval (1000ms) it check whether the cookie hasVisited is set to true If so, set state "welcomeOpen" to false (so it will render the scene) and stop the timer. |
|
| public |
checkpointCam: HTMLElement: * Check point cam is a mode where there's a checkpoints in the scene where user can select them to teleport to that position to move around the scene compare to the regular movement. Check point is currently not implemented in MYR to be an usable feature. |
|
| public |
coordinateHelper: HTMLElements: * Produces the grid on the ground and the coordinate lines |
|
| public |
createCam: HTMLElement: * It creates 2 different A-Frame camera. |
|
| public |
displayCursor: string: * toggles cursor depending on the settings by changing opacity |
|
| public |
Get value of cookie |
|
| public |
A helper function that converts MYR objects into a corresponded A-Frame DOM elements |
|
| public |
intervalID: * The timer ID set to check if the welcome screen is open It will use it to cancel the timer once the welcome screen is close |
|
| public |
lightIndicatorHelper(ent: object): *: * Helper fuctions that returns A-Frame elements that contains necessary configuration for light indicator based on light's type and properties |
|
| public |
lightShadowHelper(light: object): string: * Helper function that returns configuration for shadow based on light's type |
|
| public |
makeFloor: *: * Display the floor if the showFloor setting is true |
|
| public |
render: HTMLElement: * Main part for Rendering MYR Scene! |
|
| public |
|
|
Method Summary
| Public Methods | ||
| public |
Called when the MYR Scene is mounted (component has been rendererd to the DOM) |
|
| public |
Called when MYR Scene is rendererd (DOM elements is changed/updated) |
|
| public |
Called when the MYR Scene is unmounting (Being removed from the DOM) |
|
Public Constructors
public constructor() source
Public Members
public assetsHelper(asset: object): HTMLElement: * source
Help convert asset(model,image,etc) datas to A-Frame entitiy
Return:
| HTMLElement | a-asset-item of the object |
public basicMoveCam: HTMLElement: * source
It returns camera basic with different movement control depends on the browser type Mobile: default movement controls with flying enabled VR: default movement controls with flying disabled Desktop: custom wasd-plus-control with controllable movement speed
Return:
| HTMLElement | A-Frame camera elements with basic movement |
public checkForWelcomeScreen: * source
On every interval (1000ms) it check whether the cookie hasVisited is set to true If so, set state "welcomeOpen" to false (so it will render the scene) and stop the timer.
public checkpointCam: HTMLElement: * source
Check point cam is a mode where there's a checkpoints in the scene where user can select them to teleport to that position to move around the scene compare to the regular movement.
Check point is currently not implemented in MYR to be an usable feature.
Return:
| HTMLElement | Camera elements contains checkpoint control |
public coordinateHelper: HTMLElements: * source
Produces the grid on the ground and the coordinate lines
Return:
| HTMLElements | A-Frame entitiy containing grid, tube for axies and text to label those axes |
public createCam: HTMLElement: * source
It creates 2 different A-Frame camera. As for now, it will always be basicMoveCam.
Return:
| HTMLElement | Camera elements |
public helper(ent: object): HTMLElement: * source
A helper function that converts MYR objects into a corresponded A-Frame DOM elements
Return:
| HTMLElement | A-Frame entities |
public intervalID: * source
The timer ID set to check if the welcome screen is open It will use it to cancel the timer once the welcome screen is close
public lightIndicatorHelper(ent: object): *: * source
Helper fuctions that returns A-Frame elements that contains necessary configuration for light indicator based on light's type and properties
Return:
| * | A-Frame entities of light indicator |
public lightShadowHelper(light: object): string: * source
Helper function that returns configuration for shadow based on light's type
public makeFloor: *: * source
Display the floor if the showFloor setting is true
Return:
| * | 80x80 plane with showFloor color or null if the showFloor is false |
public render: HTMLElement: * source
Main part for Rendering MYR Scene!
Return:
| HTMLElement | A-Frame scene containing all the settings and MYR objects |
Public Methods
public componentDidMount() source
Called when the MYR Scene is mounted (component has been rendererd to the DOM)
It check if the user's first time visiting, then it will set up a interval to see if the welcome screen is closed for every 1000ms It also add a event listener to stop key press of movement (arrow key and space) to scroll the page hide or show "interface" (editor) depends on when user enter or exit the VR(fullscreen) mode.
public componentDidUpdate() source
Called when MYR Scene is rendererd (DOM elements is changed/updated)
If the welcome screen is closed, it fires an event for "myr-view-rendererd" which added in change() & push() in Myr.js but these are unused functions that are not documented in reference.
public componentWillUnmount() source
Called when the MYR Scene is unmounting (Being removed from the DOM)
It will check if the timerID for checking welcome screen is set, If so it will clear/stop the timer from checking.