Components

Some useful links

box-collider

Purpose Detect collisions precisely between a point and a box shaped entity Schema attribute name: colliderSelector description: CSS selector of entities to collide with. type: string attribute name: skipTicks description: How many tick updates should be ignored before computing intersections again type: Number default: 0 (check for collisions on each tick call) Usage Import the component with: <script src="https://raw.githubusercontent.com/jdjuli/vr-programming/main/static/js/box-collider.js"></script> Attach the component to the entity that will represent the ‘point’ of the intersection (i....

emit-event-button

Purpose Provide a generic button that can notify other entities through events when it has been touched Schema attribute name: event description: The name of the event that will be send type: string attribute name: emitTo description: The entity to be notified. By default, the event will be sent to the scene type: selector attribute name: text description: Text to be displayed on the button type: string Usage Import the component with:...

value

Purpose This component manages an entity that represent a numeric value inside the program, it can be a variable registered on variables-state or a constant. Schema attribute name: variable description: variable name to get value from, if it doesn’t exist, it will be created with the value provided. Don’t set it to represent a constant type: string attribute name: value description: numeric value, if variable name is set but doesn’t exist, the variable will take this value, but if it exist, this value will be ignored type: number attribute name: display description: what to show on the entity, either the numeric value or the variable name (if no variable name is set, it’ll display ‘#') type: string default: VALUE oneOf: VALUE, NAME Usage Import the component with:...

variables-state

Purpose This file registers a state using the aframe-state-component to provide a mechanism to have global numeric variables on the scene. Usage Import the JavaScript files on the <head> of the html with the following tags: <script src="https://unpkg.com/aframe-state-component@7.1.0/dist/aframe-state-component.js"></script> <script src="https://raw.githubusercontent.com/jdjuli/vr-programming/main/static/js/variables-system.js"></script> To access the variables in your code, you’ll need a reference to the state system, which can be obtained inside your component by doing this: let scene = this.el.sceneEl //Or document....

assets-manager

Purpose System that allows the programmer to load assets easily at runtime and handles the loading failures Usage Import the JavaScript file on the <head> of the html with the following tag: <script src="https://raw.githubusercontent.com/jdjuli/vr-programming/main/static/js/assets-manager.js"></script> To access the system in your code, you’ll need a reference to the scene element, which can be obtained inside your component by doing this: let assetsManager = this.el.sceneEl.systems['assets-manager']; Once you have a reference to the system, it exposes two functions:...

custom-hand

Purpose Join multiple components into one that provides a virtual hand with minimum configuration and adapts to the scene configuration (i.e. If the scene uses physics, the components attached to the hand would be different). Schema attribute name: hand type: string oneOf: left, right attribute name: colliderSelector description: Selector of entities the user can interact with type: string (valid CSS selector) Usage Attach this component to the entity that you want to become a hand (you don’t have to provide any kind of geometry for this) and make sure that you set the hand attribute to load the right model....

program

Purpose Represent a program, containing all the instructions and a reference to the target of execution Schema attribute name: active description: whether the program should display it’s instructions or not type: boolean default: true Usage This component should be placed inside an ide entity, and as the program grows on the positive X axis, keep that in mind when positioning it on the scene. To-Do This component is being developed right now, here are the thing I’ve planned for it but are not implemented yet:...

multidevice

Purpose This component adapts the user controls to the inputs of the device that is using, making easier to develop scenes compatibles with both VR headsets and PC. Schema attribute name: colliderSelector description: Selector of entities the user can interact with type: string (valid CSS selector) attribute name: acceleration description: How fast can the user navigate the scene with the arrow keys type: number default: 20....

instruction

Purpose This component represents an action inside the program, which can be parametrized by attaching a parameter and a amount (not implemented yet) Schema attribute name: function type: string default: move oneOf: move, rotate attribute name: parameter type: string oneOf: up, down, left, right, forward, backward (more to be added) attribute name: amount type: number default: 1.0 Usage The entity that has this component attached must be placed inside another with the component ide attached to it, but is not needed to put the instruction inside a program (and not recommended right now as it’s under development)....

parameter

Purpose This component is intended to store and represent qualitative parameters for the instructions, like the direction of displacements or axis of rotations among others. Schema attribute name: n/a description: qualitative property such as direction of movement or axis of rotation type: string default: up oneOf: up, down, left, right, forward, backward (more to be added) Usage The entity this component is attached to must be children of another entity with the component ide as this one is aware of if it’s a child of an instruction and needs to have a reference to the ide entity to reparent to it when extracted from the instruction....