A-Frame P5 is a library created by Craig Kapp that serves as a wrapper around the A-Frame Mixed Reality framework. Its primary function is to make it easy to construct VR worlds algorithmically using the p5 graphical framework.
Version 2.3 (latest stable release, 2024)
Version 2.2 (legacy release, 2023)
Version 2.1 (legacy release, 2021)
Important note: A-Frame P5 version 2.3 contains significant changes as compared to previous versions. The main difference in version 2.3 is the removal of all A-Frame P5 classes from the global context. This means that in versions 2.1 and 2.2 you could do something like the following:
let b = new Box({})
In version 2.3 all classes are now contained with an AFrameP5 object. The same code for generating a box in version 2.3 would look like the following:
let b = new AFrameP5.Box({})
Begin by downloading the example gallery for the A-Frame P5 library. This template includes aa series of folders that showcase the basic usage of this A-Frame P5 library. Each folder contains the following:
index.html: A wrapper document that links together all JavaScript libraries and serves as the rendering environment for your 3D world.sketch.js: The p5js sketch file that will be executed once the index.html page is loadedOnce you've downloaded and unzipped the example gallery go ahead and open up one of the projects on in your favorite text editor. Next, show the sketch.js and index.html files - this is where most of your work will take place. The index.html file will be used whenever you need to load images or external media. The sketch.js file will be used to algorithmically add or manipulate object in the 3D world (boxes, planes, spheres, etc). To view any of these projects you will need to run them over a local web server, or by uploading them to a SSL enabled web hosting service.
Note that if you are using a legacy version (2.2 or 2.1) you should download this example gallery file.
Here are a series of live demos for each of the examples:
All A-Frame P5 projects require some minimal HTML code to get started. A boilerplate HTML document will look something like this:
<!doctype html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<!-- p5 core library -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>
<!-- A-Frame core library -->
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<!-- AFrameP5 library -->
<script src="https://craignyu.github.io/aframep5/libraries/aframep5-v2.1.js"></script>
<!-- Your p5 Sketch -->
<script src="sketch.js"></script>
<!-- custom styles -->
<style>
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<!-- container to hold our VR scene - make sure to give this element an ID of 'VRScene' -->
<a-scene id="VRScene">
<!--
The 'a-assets' container is used to load in any external artwork
you may want to use as "textures" for your objects. Ensure that
this element has an ID of 'VRAssets'
Textures can be loaded by creating a new 'a-asset-item' tag inside of
the 'a-assets' container. When doing this you will need to make
sure to give your textures a unique ID - this will be used by p5
to create new objects.
Example:
<img id="ITEM_ID_GOES_HERE" src="images/gold_block.png">
-->
<a-assets id="VRAssets">
</a-assets>
</a-scene>
</body>
</html>
If you are planning on using external artwork or 3D models in your virtual world they will need to be included in your HTML document. All assets must be given unique ID's which will be referenced whenever you wish to use this texture in your world. This can be done using a <a-assets> tag, which needs to be nested inside of the <a-scene> tag.
A-Frame renders a three dimensional world that simulates width, height and depth. Every point within an A-Frame world can be expressed in terms of an x, y and z value.
When a world loads the x axis runs left to right, with values to the left being negative and values to the right being positive. The y axis extends up and down with negative values toward the bottom of the screen and positive values toward the top of the screen. The z axis extends forward and back - negative values extend forward into the screen and positive values extend back behind the screen (initially invisible unless the user turns around).
The world is rendered using a camera object which can be manipulated at runtime. The camera initially starts at position (0,1,5) - slightly higher than the true origin of the world, and slightly in front of it. The small height difference allows you to the height of a user (i.e. the camera won't be seeing your world from the perspective of a "bug" on the ground!)
When developing an A-Frame P5 project you will most likely be testing your work on a desktop or laptop. By default the system will enable the WASD keys to allow you to move around using standard gaming mechanics ('W' moves you forward, 'S' moves you backward, 'A' moves you to the left and 'D' moves to you to the right). You can click and hold your mouse button down and drag the mouse to adjust the angle of your camera, allowing you to pan up, down and to the sides. The camera's direction determines your movement direction -- if you point the camera to the left and then click the 'W' key you will move in that direction.
Because VR headsets don't usually have a keyboard WASD navigation isn't usually feasible. Some ways to address this include:
teleportToObject, setUserPosition and slideToObject - this method is shown in the Click to move interaction demo.A-Frame P5 should work out of the box when rendered through a browser on a VR headset. The basic process includes posting your project to a public web server and then loading the URL of the project through your headset's internal browser. When your project loads you will see it rendering on a flat plane, but if you click the small "VR" button at the bottom right side of the screen you will enter immersive VR mode.
In this immersive mode your controls re-map a bit. WASD navigation no longer functions, and pressing the trigger on your VR controller will fire a standard mouse event. Your controllers will also be visually displayed in the world and will emit "rays" - these rays act as mouse pointers and can be used to interact with objects in the world.
What follows is a technical overview of the various classes that can be used within a p5 sketch to construct and manipulate 3D objects. Please download the A-Frame P5 Examples ZIP archive for a series of comprehensive examples.
Used to connect a p5 sketch to the A-Frame world. Instantiating a 'World' object is required in order to use all other classes in this library. This class requires that an a-scene tag has been added to the body of the HTML document.
AFrameP5.World(id, interactionMode)
| Parameter | Data Type | Default | Description |
id |
String | 'VRScene' | The id of the 'a-scene' tag in the 'body' of the HTML document that should be used to render the VR world. |
interactionMode |
String | 'mouse' | Determines how the user can interact with objects in terms of mouse events. The default is 'mouse' which allows the user to click on any object in their visible field - this is generally best for desktop and VR applications on a headset that supports controllers. You can also set this property to 'gaze' which will display a small reticle in the center of the user's field of view. This reticle will need to line up with an item while the user is clicking the mouse in order to trigger it. This is mainly useful for Google Cardboard style headsets which allow you to "tap" on the screen to indicate a mouse click. In 'gaze' mode the item that is directly in front of the user will receive any mouse/touch events that are fired. |
Instantiate a new AFrameP5.World object within your sketch.js file. Make sure to declare your world variable in the global scope to allow all functions the ability to access it. Ensure that the ID being passed to the World constructor includes the ID of the a-scene HTML tag.
// sketch.js file
let world;
function setup() {
// no canvas needed
noCanvas();
world = new AFrameP5.World('VRScene');
}
In your HTML document make sure to include an a-scene tag with a valid ID.
<!-- index.html file --> <body> <a-scene id='VRScene'> </a-scene> </body>
| Method | Description |
add(Entity) : void |
Adds an entity to the VR world. |
addChild(Entity) : void |
Adds an entity to the VR world (alias for add) |
createDynamicTextureFromCreateGraphics(p5.Renderer) : void |
Accepts a reference to a p5.Renderer object created by the createGraphics function in p5. A-Frame P5 then turns this object into a dynamic texture that can be used with a 3D entity. It does this by setting up a small p5 sketch in 'instance mode' and registers the texture with the system so that it updates on a regular basis. For more inforamtion on how to use this feature please see the Multiple dynamic textures example. |
enableWASD() : boolean |
Enables or disables navigation with the WASD keys. |
getFlying() : boolean |
Gets whether the world currently supports "flying" |
getPointInFrontOfUser() : Object |
Returns an object that contains the position of a point about 1 meter in front of the user, as follows: {x:0, y:0, z:0} |
getUserPosition() : Object |
Returns an object that contains the camera's current position, as follows: {x:0, y:0, z:0} |
getUserRotation() : Object |
Returns an object that contains the camera's current rotation, as follows: {x:0, y:0, z:0} |
getWASDAcceleration() : number |
Gets the current value for WASD acceleration |
hideCursor() : void |
Hide the cursor in front of the user (only works in "gaze" mode) |
showCursor() : void |
Shows the cursor in front of the user (only works in "gaze" mode) |
loop() : Object |
Call's p5's loop function and turns on the draw callback cycle. This is the default behavior of both p5 and A-Frame P5 and generally you don't need to ever call this method. The only real use for this function is to reverse a call to noLoop which has implications for rendering on some VR headsets. |
moveUserForward(Number) : void |
Moves the user forward along the camera's current heading by a desired amount. Distance is expressed in meters. |
noLoop() : Object |
Call's p5's noLoop function and turns off the draw callback cycle. If you plan on using p5's built-in noLoop function to disable the 'draw' function you should use this function instead. This is because p5 interally uses the requestAnimationFrame function to call the 'draw' function continually. On VR headsets this function is often disabled, which prevents 'draw' from ever being called. Because of this A-Frame P5 will "take over" calling the 'draw' function for you if necessary. Calling world.noLoop will prevent both p5 and A-Frame P5 from calling the draw loop. This function can be reversed by calling world.loop |
remove(Entity) : void |
Removes an entity to the VR world. |
removeChild(Entity) : void |
Removes an entity to the VR world (alias for remove) |
rotateUserX(Number) : void |
Rotate's the user's view by the specified number of degrees along the X axis |
rotateUserY(Number) : void |
Rotate's the user's view by the specified number of degrees along the Y axis |
rotateUserZ(Number) : void |
Rotate's the user's view by the specified number of degrees along the Z axis |
removeDefaultWorldLighting() : void |
Removes the default lights added by A-Frame. |
setBackground(Number, Number, Number) : void |
Sets the background color of the world to a flat RGB color. The default background color is 255,255,255 (white) if you don't call this method. |
setFlying(boolean) : void |
Sets whether the world supports "flying" (essentially allowing the user to move in the y axis). Default value is false |
setUserPosition(Number, Number, Number) : void |
Sets the user's position, essentially teleporting the user to this location. |
setWASDAcceleration(number) : void |
Sets how fast the user will accelerate when navigating with the WASD keys. Default value is 65 |
setGazeControls() : void |
Sets the VR system to allow interaction events on all objects based on whether the interact with the camera reticle in the center of the user's view. Calling this method negates setMouseControls. |
setMouseControls() : void |
Sets the VR system to allow interaction events on all objects based on the 2D position of the mouse. Also hides the camera reticle in the center of the user's view. This is the default setting for A-Frame P5. Calling this method negates setGazeControls. |
setUserPosition(Number, Number, Number) : void |
Sets the camera position to a desired x, y, z position. |
slideToObject(Entity, Number) : void |
Moves the user toward an entity over a period of time, expressed in milliseconds. |
teleportToObject(Entity) : void |
Immediately transports the user to the position of another entity. |
setHUDDistance(z) : void |
Sets the distance of the Heads Up Display (HUD) in front of the user. Default value is -1, which represents 1 meter in front of the user. Note that by calling this function you can adjust the current HUD distance, which will affact any previously added HUD elements. |
getHUDDistance(z) : Number |
Returns the current distance of the Heads Up Display (HUD) in front of the user. The default HUD distance is -1. |
addToHUD(Entity, x, y, z) : void |
Adds an entity to the Heads Up Display (HUD), allowing the entity to move along with the camera and always appear a fixed distance in front of the user. The coordinates x, y and y and relative to the user's position, so to place an item directly in front of the user you could use something like 0, 0 and -1.The default for z is -1 which can be changed by the setHUDDistance method. Leaving off z will use the currently set HUD distance. You can also leave off all three coordinate values to relatively position the element in the HUD yourself.There is a known issue with adding elements to the HUD. If an element is added to the world, then removed from the world, and then added to the HUD, it will not appear. The workaround is to create an element and NOT add it to the world. Instead, simply use the addToHUD function to add it directly to the HUD. |
removeFromHUD(Entity) : void |
Removes an entity from the Heads Up Display (HUD). |
| Method | Description |
getControllerRightThumbstickDirection() : String || boolean |
Reports the current direction that the user is pointing in with the right thumbstick. Return values could be "UP", "DOWN", "LEFT", "RIGHT", or false |
getControllerLeftThumbstickDirection() : String || boolean |
Reports the current direction that the user is pointing in with the left thumbstick. Return values could be "UP", "DOWN", "LEFT", "RIGHT", or false |
getControllerRightThumbstickRawData() : Object |
Reports the current direction that the user is pointing in with right left thumbstick. Object will be returned in the following format: {x: Number; y: Number} |
getControllerLeftThumbstickRawData() : Object |
Reports the current direction that the user is pointing in with left left thumbstick. Object will be returned in the following format: {x: Number; y: Number} |
isControllerRightTriggerDown() : boolean |
Reports whether the VR controller right trigger button is currently down |
isControllerLeftTriggerDown() : boolean |
Reports whether the VR controller left trigger button is currently down |
isControllerRightGripDown() : boolean |
Reports whether the VR controller right grip button is currently down |
isControllerLeftGripDown() : boolean |
Reports whether the VR controller left grip button is currently down |
isControllerAButtonDown() : boolean |
Reports whether the VR controller A button is currently down |
isControllerBButtonDown() : boolean |
Reports whether the VR controller B button is currently down |
isControllerXButtonDown() : boolean |
Reports whether the VR controller X button is currently down |
isControllerYButtonDown() : boolean |
Reports whether the VR controller Y button is currently down |
Used to construct a six-faced box entity.
AFrameP5.Box(Object)
| Parameter | Data Type | Default | Description |
x |
Number (float) | 0 | x-position of the entity |
y |
Number (float) | 0 | y-position of the entity |
z |
Number (float) | 0 | z-position of the entity |
opacity |
Number (float) | 1.0 | how transparent this entity is (0.0 = fully transparent, 1.0 = fully opaque) |
transparent |
Boolean | false | whether the texture associated with this entity supports transparency (i.e. a PNG file with an alpha channel) |
shader |
String | 'standard' | the ThreeJS shader to use to render this entity - other valid value is flat |
side |
String | 'front' | which side of the entity should be set up with a visual material. default is the front of the entity - other valid values are back and double |
roughness |
Number (float) | 0.5 | how 'rough' the material appears. valid range = 0.0 to 1.0 |
metalness |
Number (float) | 0.1 | how 'metallic' the material appears. valid range = 0.0 to 1.0 |
red |
Number (integer) | 255 | how red the entity appears. valid range = 0 to 255 |
green |
Number (integer) | 255 | how green the entity appears. valid range = 0 to 255 |
blue |
Number (integer) | 255 | how blue the entity appears. valid range = 0 to 255 |
repeatX |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the x-axis of each face of the object. valid range = any positive number |
repeatY |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the y-axis of each face of the object. valid range = any positive number |
asset |
String | 'None' | the id (String) of the element that should be used as a texture for this entity. all textures should be set up in the 'index.html' file inside of the a-assets tag. |
scaleX |
Number (float) | 1.0 | the scale of the object in the x-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleY |
Number (float) | 1.0 | the scale of the object in the y-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleZ |
Number (float) | 1.0 | the scale of the object in the z-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
rotationX |
Number (float) | 0 | the rotation of the object along the x-axis. |
rotationY |
Number (float) | 0 | the rotation of the object along the y-axis. |
rotationZ |
Number (float) | 0 | the rotation of the object along the z-axis. |
visible |
Boolean | true | determines whether the entity is visible in the scene. |
dynamicTexture |
Boolean | false | sets whether the texture used on the entity is being drawn from a dynamically drawn canvas element. see these examples for more information: Dynamic textures, Multiple dynamic textures and Interactive dynamic textures |
dynamicTextureHeight |
Number | 0 | tells the entity the height of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
dynamicTextureWidth |
Number | 0 | tells the entity the width of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
customData |
Object | void | a custom object that can be used by the entity to keep track of user-specified data. example:
let b = new AFrameP5.Box({
customData: {
numClicks: 0
},
clickFunction: function(e) {
numClicks++;
console.log("This element has been clicked " + e.customData.numClicks + " times";
}
});
|
clickFunction |
Function | void | a custom function that will run every time the user clicks on the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
clickFunction: function(e) {
e.setRed(random(255));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
clickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
upFunction |
Function | void | a custom function that will run every time the releases the mouse after the entity has been clicked. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
upFunction: function(e) {
e.spinX(random(360));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
upFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
enterFunction |
Function | void | a custom function that will run every time the mouse hovers over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
enterFunction: function(e) {
e.setScale(2,2,2);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
enterFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
leaveFunction |
Function | void | a custom function that will run every time the mouse stops hovering over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
leaveFunction: function(e) {
e.setScale(1,1,1);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
leaveFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
overFunction |
Function | void | a custom function that will run continually whenever the mouse is hovering over the entity. this function should be implemented to accept two arguments - the first is a reference to the entity that was clicked, and the second is an object that contains information about the interaction that just occured. example: let b = AFrameP5.Box({
overFunction: function(e, intersectionInfo) {
console.log(intersectionInfo);
}
});
intersectionInfo is an object that contains info about how the user is interacting with this entity. it contains the following properties:
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
overFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
tickFunction: function(e) {
e.setRed( random(255) );
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
tickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
AFrameP5.Box(Object)
width |
Number (float) | 1 | width of the entity (along the x-axis) |
height |
Number (float) | 1 | height of the entity (along the y-axis) |
depth |
Number (float) | 1 | depth of the entity (along the z-axis) |
// sketch.js file
let world;
let box;
function setup() {
// no canvas needed
noCanvas();
// create a new VR World object
world = new AFrameP5.World('VRScene');
// construct a new box
box = new AFrameP5.Box({
x:0,
y:2,
z:-2,
width: 1,
depth: 1.5,
height: 1.2,
red:255,
green:0,
blue:0
});
// add the box to the world
world.add(box);
}
| Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
lookAtUser() : void |
Rotation | forces the entity to orient itself so that it is facing the user. |
getVisibility() : boolean |
Visibility | returns the current visibility state of the entity |
hide() : void |
Visibility | hides the entity by setting its visible property to false |
show() : void |
Visibility | shows the entity by setting its visible property to true |
toggleVisibility() : void |
Visibility | hides the entity if it is current visible and shows the entity if it is current hidden |
getScale() : Object |
Scale | returns the scale of the entity as an object (i.e. {x:0, y:0, z:0} |
getScaleX() : Number |
Scale | returns the x scale of the entity |
getScaleY() : Number |
Scale | returns the y scale of the entity |
getScaleZ() : Number |
Scale | returns the z scale of the entity |
setScale(x,y,z) : void |
Scale | sets the scale of the object in all axes |
setScaleX(x) : void |
Scale | sets the x scale of the object |
setScaleY(y) : void |
Scale | sets the y scale of the object |
setScaleZ(z) : void |
Scale | sets the z scale of the object |
getAsset() : String |
Material | returns the current id of the asset being used to texture this entity |
getBlue() : Number |
Material | returns the current blue color of the entity |
getGreen() : Number |
Material | returns the current green color of the entity |
getMetalness() : Number |
Material | returns the current metalness setting for the texture of the entity (range = 0.0 to 1.0) |
getOpacity() : Number |
Material | returns the current opacity of the entity |
getRed() : Number |
Material | returns the current red color of the entity |
setRoughness(Number) : void |
Material | sets the roughness for the texture of the entity (range = 0.0 to 1.0) |
getSide() : String |
Material | returns which faces of the entity will be textured (valid values are front, back and double) |
getTransparent() : boolean |
Material | returns the current transparency of the entity |
setAsset(String) : void |
Material | sets the id for the asset to texture this entity |
setColor(red, green, blue) : void |
Material | sets the color of the entity |
setBlue(blue) : void |
Material | sets the blue color of the entity |
setGreen(green) : void |
Material | sets the green color of the entity |
setMetalness(Number) : void |
Material | sets the metalness for the texture of the entity (range = 0.0 to 1.0) |
setOpacity(Number) : void |
Material | sets the opacity of the entity (range = 0.0 to 1.0) |
setRed(red) : void |
Material | sets the red color of the entity |
getRoughness() : Number |
Material | returns the current roughness setting for the texture of the entity (range = 0.0 to 1.0) |
setTransparent(boolean) : void |
Material | sets whether the entity supports transparent textures |
setSide(String) : void |
Material | sets which faces of the entity will be textured (valid values are front, back and double) |
add(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. alias for addChild. |
addChild(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
| Method | Category | Description |
getDepth() : Number |
Geometry | returns the current depth of the entity |
getHeight() : Number |
Geometry | returns the current height of the entity |
getWidth() : Number |
Geometry | returns the current width of the entity |
setDepth(Number) : void |
Geometry | sets the depth of the entity |
setHeight(Number) : void |
Geometry | sets the height of the entity |
setWidth(Number) : void |
Geometry | sets the width of the entity |
Used to construct a flat two dimensional plane entity.
AFrameP5.Plane(Object)
| Parameter | Data Type | Default | Description |
x |
Number (float) | 0 | x-position of the entity |
y |
Number (float) | 0 | y-position of the entity |
z |
Number (float) | 0 | z-position of the entity |
opacity |
Number (float) | 1.0 | how transparent this entity is (0.0 = fully transparent, 1.0 = fully opaque) |
transparent |
Boolean | false | whether the texture associated with this entity supports transparency (i.e. a PNG file with an alpha channel) |
shader |
String | 'standard' | the ThreeJS shader to use to render this entity - other valid value is flat |
side |
String | 'front' | which side of the entity should be set up with a visual material. default is the front of the entity - other valid values are back and double |
roughness |
Number (float) | 0.5 | how 'rough' the material appears. valid range = 0.0 to 1.0 |
metalness |
Number (float) | 0.1 | how 'metallic' the material appears. valid range = 0.0 to 1.0 |
red |
Number (integer) | 255 | how red the entity appears. valid range = 0 to 255 |
green |
Number (integer) | 255 | how green the entity appears. valid range = 0 to 255 |
blue |
Number (integer) | 255 | how blue the entity appears. valid range = 0 to 255 |
repeatX |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the x-axis of each face of the object. valid range = any positive number |
repeatY |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the y-axis of each face of the object. valid range = any positive number |
asset |
String | 'None' | the id (String) of the element that should be used as a texture for this entity. all textures should be set up in the 'index.html' file inside of the a-assets tag. |
scaleX |
Number (float) | 1.0 | the scale of the object in the x-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleY |
Number (float) | 1.0 | the scale of the object in the y-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleZ |
Number (float) | 1.0 | the scale of the object in the z-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
rotationX |
Number (float) | 0 | the rotation of the object along the x-axis. |
rotationY |
Number (float) | 0 | the rotation of the object along the y-axis. |
rotationZ |
Number (float) | 0 | the rotation of the object along the z-axis. |
visible |
Boolean | true | determines whether the entity is visible in the scene. |
dynamicTexture |
Boolean | false | sets whether the texture used on the entity is being drawn from a dynamically drawn canvas element. see these examples for more information: Dynamic textures, Multiple dynamic textures and Interactive dynamic textures |
dynamicTextureHeight |
Number | 0 | tells the entity the height of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
dynamicTextureWidth |
Number | 0 | tells the entity the width of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
customData |
Object | void | a custom object that can be used by the entity to keep track of user-specified data. example:
let b = new AFrameP5.Box({
customData: {
numClicks: 0
},
clickFunction: function(e) {
numClicks++;
console.log("This element has been clicked " + e.customData.numClicks + " times";
}
});
|
clickFunction |
Function | void | a custom function that will run every time the user clicks on the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
clickFunction: function(e) {
e.setRed(random(255));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
clickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
upFunction |
Function | void | a custom function that will run every time the releases the mouse after the entity has been clicked. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
upFunction: function(e) {
e.spinX(random(360));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
upFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
enterFunction |
Function | void | a custom function that will run every time the mouse hovers over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
enterFunction: function(e) {
e.setScale(2,2,2);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
enterFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
leaveFunction |
Function | void | a custom function that will run every time the mouse stops hovering over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
leaveFunction: function(e) {
e.setScale(1,1,1);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
leaveFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
overFunction |
Function | void | a custom function that will run continually whenever the mouse is hovering over the entity. this function should be implemented to accept two arguments - the first is a reference to the entity that was clicked, and the second is an object that contains information about the interaction that just occured. example: let b = AFrameP5.Box({
overFunction: function(e, intersectionInfo) {
console.log(intersectionInfo);
}
});
intersectionInfo is an object that contains info about how the user is interacting with this entity. it contains the following properties:
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
overFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
tickFunction: function(e) {
e.setRed( random(255) );
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
tickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
Plane(Object)
width |
Number (float) | 1 | width of the entity (along the x-axis) |
height |
Number (float) | 1 | height of the entity (along the y-axis) |
// sketch.js file
let world;
let plane;
function setup() {
// no canvas needed
noCanvas();
// create a new VR World object
world = new AFrameP5.World('VRScene');
// construct a new plane to serve as the 'ground' for our world
plane = new AFrameP5.Plane({
x:0,
y:0,
z:0,
width: 100,
height: 100,
red:0,
green:255,
blue:0,
rotationX:-90
});
// add the plane to the world
world.add(plane);
}
| Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
lookAtUser() : void |
Rotation | forces the entity to orient itself so that it is facing the user. |
getVisibility() : boolean |
Visibility | returns the current visibility state of the entity |
hide() : void |
Visibility | hides the entity by setting its visible property to false |
show() : void |
Visibility | shows the entity by setting its visible property to true |
toggleVisibility() : void |
Visibility | hides the entity if it is current visible and shows the entity if it is current hidden |
getScale() : Object |
Scale | returns the scale of the entity as an object (i.e. {x:0, y:0, z:0} |
getScaleX() : Number |
Scale | returns the x scale of the entity |
getScaleY() : Number |
Scale | returns the y scale of the entity |
getScaleZ() : Number |
Scale | returns the z scale of the entity |
setScale(x,y,z) : void |
Scale | sets the scale of the object in all axes |
setScaleX(x) : void |
Scale | sets the x scale of the object |
setScaleY(y) : void |
Scale | sets the y scale of the object |
setScaleZ(z) : void |
Scale | sets the z scale of the object |
getAsset() : String |
Material | returns the current id of the asset being used to texture this entity |
getBlue() : Number |
Material | returns the current blue color of the entity |
getGreen() : Number |
Material | returns the current green color of the entity |
getMetalness() : Number |
Material | returns the current metalness setting for the texture of the entity (range = 0.0 to 1.0) |
getOpacity() : Number |
Material | returns the current opacity of the entity |
getRed() : Number |
Material | returns the current red color of the entity |
setRoughness(Number) : void |
Material | sets the roughness for the texture of the entity (range = 0.0 to 1.0) |
getSide() : String |
Material | returns which faces of the entity will be textured (valid values are front, back and double) |
getTransparent() : boolean |
Material | returns the current transparency of the entity |
setAsset(String) : void |
Material | sets the id for the asset to texture this entity |
setColor(red, green, blue) : void |
Material | sets the color of the entity |
setBlue(blue) : void |
Material | sets the blue color of the entity |
setGreen(green) : void |
Material | sets the green color of the entity |
setMetalness(Number) : void |
Material | sets the metalness for the texture of the entity (range = 0.0 to 1.0) |
setOpacity(Number) : void |
Material | sets the opacity of the entity (range = 0.0 to 1.0) |
setRed(red) : void |
Material | sets the red color of the entity |
getRoughness() : Number |
Material | returns the current roughness setting for the texture of the entity (range = 0.0 to 1.0) |
setTransparent(boolean) : void |
Material | sets whether the entity supports transparent textures |
setSide(String) : void |
Material | sets which faces of the entity will be textured (valid values are front, back and double) |
add(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. alias for addChild. |
addChild(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
| Method | Category | Description |
getHeight() : Number |
Geometry | returns the current height of the entity |
getWidth() : Number |
Geometry | returns the current width of the entity |
setHeight(Number) : void |
Geometry | sets the height of the entity |
setWidth(Number) : void |
Geometry | sets the width of the entity |
Used to construct a flat two dimensional circular entity.
AFrameP5.Circle(Object)
| Parameter | Data Type | Default | Description |
x |
Number (float) | 0 | x-position of the entity |
y |
Number (float) | 0 | y-position of the entity |
z |
Number (float) | 0 | z-position of the entity |
opacity |
Number (float) | 1.0 | how transparent this entity is (0.0 = fully transparent, 1.0 = fully opaque) |
transparent |
Boolean | false | whether the texture associated with this entity supports transparency (i.e. a PNG file with an alpha channel) |
shader |
String | 'standard' | the ThreeJS shader to use to render this entity - other valid value is flat |
side |
String | 'front' | which side of the entity should be set up with a visual material. default is the front of the entity - other valid values are back and double |
roughness |
Number (float) | 0.5 | how 'rough' the material appears. valid range = 0.0 to 1.0 |
metalness |
Number (float) | 0.1 | how 'metallic' the material appears. valid range = 0.0 to 1.0 |
red |
Number (integer) | 255 | how red the entity appears. valid range = 0 to 255 |
green |
Number (integer) | 255 | how green the entity appears. valid range = 0 to 255 |
blue |
Number (integer) | 255 | how blue the entity appears. valid range = 0 to 255 |
repeatX |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the x-axis of each face of the object. valid range = any positive number |
repeatY |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the y-axis of each face of the object. valid range = any positive number |
asset |
String | 'None' | the id (String) of the element that should be used as a texture for this entity. all textures should be set up in the 'index.html' file inside of the a-assets tag. |
scaleX |
Number (float) | 1.0 | the scale of the object in the x-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleY |
Number (float) | 1.0 | the scale of the object in the y-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleZ |
Number (float) | 1.0 | the scale of the object in the z-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
rotationX |
Number (float) | 0 | the rotation of the object along the x-axis. |
rotationY |
Number (float) | 0 | the rotation of the object along the y-axis. |
rotationZ |
Number (float) | 0 | the rotation of the object along the z-axis. |
visible |
Boolean | true | determines whether the entity is visible in the scene. |
dynamicTexture |
Boolean | false | sets whether the texture used on the entity is being drawn from a dynamically drawn canvas element. see these examples for more information: Dynamic textures, Multiple dynamic textures and Interactive dynamic textures |
dynamicTextureHeight |
Number | 0 | tells the entity the height of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
dynamicTextureWidth |
Number | 0 | tells the entity the width of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
customData |
Object | void | a custom object that can be used by the entity to keep track of user-specified data. example:
let b = new AFrameP5.Box({
customData: {
numClicks: 0
},
clickFunction: function(e) {
numClicks++;
console.log("This element has been clicked " + e.customData.numClicks + " times";
}
});
|
clickFunction |
Function | void | a custom function that will run every time the user clicks on the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
clickFunction: function(e) {
e.setRed(random(255));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
clickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
upFunction |
Function | void | a custom function that will run every time the releases the mouse after the entity has been clicked. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
upFunction: function(e) {
e.spinX(random(360));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
upFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
enterFunction |
Function | void | a custom function that will run every time the mouse hovers over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
enterFunction: function(e) {
e.setScale(2,2,2);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
enterFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
leaveFunction |
Function | void | a custom function that will run every time the mouse stops hovering over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
leaveFunction: function(e) {
e.setScale(1,1,1);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
leaveFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
overFunction |
Function | void | a custom function that will run continually whenever the mouse is hovering over the entity. this function should be implemented to accept two arguments - the first is a reference to the entity that was clicked, and the second is an object that contains information about the interaction that just occured. example: let b = AFrameP5.Box({
overFunction: function(e, intersectionInfo) {
console.log(intersectionInfo);
}
});
intersectionInfo is an object that contains info about how the user is interacting with this entity. it contains the following properties:
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
overFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
tickFunction: function(e) {
e.setRed( random(255) );
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
tickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
AFrameP5.Circle(Object)
radius |
Number (float) | 1 | radius of the entity (in meters) |
segments |
Number (integer) | 32 | the number of segments to use when drawing the circle (higher numbers will yield a "smoother" looking circle) |
thetaStart |
Number (integer) | 0 | start angle for first segment. can be used to define a partial circle. |
thetaLength |
Number (integer) | 360 | the central angle (in degrees). defaults to 360, which makes for a complete circle. |
// sketch.js file
let world;
let circle;
function setup() {
// no canvas needed
noCanvas();
// create a new VR World object
world = new AFrameP5.World('VRScene');
// construct a new circle to serve as a circular 'ground' for our world
circle = new AFrameP5.Circle({
x:0,
y:0,
z:0,
radius:25,
red:0,
green:255,
blue:0, r
otationX:-90
});
// add the circle to the world
world.add(circle);
}
| Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
lookAtUser() : void |
Rotation | forces the entity to orient itself so that it is facing the user. |
getVisibility() : boolean |
Visibility | returns the current visibility state of the entity |
hide() : void |
Visibility | hides the entity by setting its visible property to false |
show() : void |
Visibility | shows the entity by setting its visible property to true |
toggleVisibility() : void |
Visibility | hides the entity if it is current visible and shows the entity if it is current hidden |
getScale() : Object |
Scale | returns the scale of the entity as an object (i.e. {x:0, y:0, z:0} |
getScaleX() : Number |
Scale | returns the x scale of the entity |
getScaleY() : Number |
Scale | returns the y scale of the entity |
getScaleZ() : Number |
Scale | returns the z scale of the entity |
setScale(x,y,z) : void |
Scale | sets the scale of the object in all axes |
setScaleX(x) : void |
Scale | sets the x scale of the object |
setScaleY(y) : void |
Scale | sets the y scale of the object |
setScaleZ(z) : void |
Scale | sets the z scale of the object |
getAsset() : String |
Material | returns the current id of the asset being used to texture this entity |
getBlue() : Number |
Material | returns the current blue color of the entity |
getGreen() : Number |
Material | returns the current green color of the entity |
getMetalness() : Number |
Material | returns the current metalness setting for the texture of the entity (range = 0.0 to 1.0) |
getOpacity() : Number |
Material | returns the current opacity of the entity |
getRed() : Number |
Material | returns the current red color of the entity |
setRoughness(Number) : void |
Material | sets the roughness for the texture of the entity (range = 0.0 to 1.0) |
getSide() : String |
Material | returns which faces of the entity will be textured (valid values are front, back and double) |
getTransparent() : boolean |
Material | returns the current transparency of the entity |
setAsset(String) : void |
Material | sets the id for the asset to texture this entity |
setColor(red, green, blue) : void |
Material | sets the color of the entity |
setBlue(blue) : void |
Material | sets the blue color of the entity |
setGreen(green) : void |
Material | sets the green color of the entity |
setMetalness(Number) : void |
Material | sets the metalness for the texture of the entity (range = 0.0 to 1.0) |
setOpacity(Number) : void |
Material | sets the opacity of the entity (range = 0.0 to 1.0) |
setRed(red) : void |
Material | sets the red color of the entity |
getRoughness() : Number |
Material | returns the current roughness setting for the texture of the entity (range = 0.0 to 1.0) |
setTransparent(boolean) : void |
Material | sets whether the entity supports transparent textures |
setSide(String) : void |
Material | sets which faces of the entity will be textured (valid values are front, back and double) |
add(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. alias for addChild. |
addChild(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
| Method | Category | Description |
getRadius() : Number |
Geometry | returns the current radius of the entity |
getSegments() : Number |
Geometry | returns the number of segments being used to draw the entity |
getThetaStart() : Number |
Geometry | returns the current thetaStart value for the entity |
getThetaLength() : Number |
Geometry | returns the current thetaLength value for the entity |
setRadius(Number) : void |
Geometry | sets the radius of the entity |
changeRadius(Number) : void |
Geometry | updates the radius by the value provided (i.e. entity.changeRadius(0.1); will increase the radius by 0.1 meters. |
setSegments(Number) : void |
Geometry | sets the number of segments being used to draw the entity |
setThetaStart(Number) : void |
Geometry | sets the the thetaStart value for the entity |
setThetaLength(Number) : void |
Geometry | sets the the thetaLength value for the entity |
Used to construct a flat two dimensional ring entity.
AFrameP5.Ring(Object)
| Parameter | Data Type | Default | Description |
x |
Number (float) | 0 | x-position of the entity |
y |
Number (float) | 0 | y-position of the entity |
z |
Number (float) | 0 | z-position of the entity |
opacity |
Number (float) | 1.0 | how transparent this entity is (0.0 = fully transparent, 1.0 = fully opaque) |
transparent |
Boolean | false | whether the texture associated with this entity supports transparency (i.e. a PNG file with an alpha channel) |
shader |
String | 'standard' | the ThreeJS shader to use to render this entity - other valid value is flat |
side |
String | 'front' | which side of the entity should be set up with a visual material. default is the front of the entity - other valid values are back and double |
roughness |
Number (float) | 0.5 | how 'rough' the material appears. valid range = 0.0 to 1.0 |
metalness |
Number (float) | 0.1 | how 'metallic' the material appears. valid range = 0.0 to 1.0 |
red |
Number (integer) | 255 | how red the entity appears. valid range = 0 to 255 |
green |
Number (integer) | 255 | how green the entity appears. valid range = 0 to 255 |
blue |
Number (integer) | 255 | how blue the entity appears. valid range = 0 to 255 |
repeatX |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the x-axis of each face of the object. valid range = any positive number |
repeatY |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the y-axis of each face of the object. valid range = any positive number |
asset |
String | 'None' | the id (String) of the element that should be used as a texture for this entity. all textures should be set up in the 'index.html' file inside of the a-assets tag. |
scaleX |
Number (float) | 1.0 | the scale of the object in the x-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleY |
Number (float) | 1.0 | the scale of the object in the y-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleZ |
Number (float) | 1.0 | the scale of the object in the z-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
rotationX |
Number (float) | 0 | the rotation of the object along the x-axis. |
rotationY |
Number (float) | 0 | the rotation of the object along the y-axis. |
rotationZ |
Number (float) | 0 | the rotation of the object along the z-axis. |
visible |
Boolean | true | determines whether the entity is visible in the scene. |
dynamicTexture |
Boolean | false | sets whether the texture used on the entity is being drawn from a dynamically drawn canvas element. see these examples for more information: Dynamic textures, Multiple dynamic textures and Interactive dynamic textures |
dynamicTextureHeight |
Number | 0 | tells the entity the height of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
dynamicTextureWidth |
Number | 0 | tells the entity the width of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
customData |
Object | void | a custom object that can be used by the entity to keep track of user-specified data. example:
let b = new AFrameP5.Box({
customData: {
numClicks: 0
},
clickFunction: function(e) {
numClicks++;
console.log("This element has been clicked " + e.customData.numClicks + " times";
}
});
|
clickFunction |
Function | void | a custom function that will run every time the user clicks on the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
clickFunction: function(e) {
e.setRed(random(255));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
clickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
upFunction |
Function | void | a custom function that will run every time the releases the mouse after the entity has been clicked. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
upFunction: function(e) {
e.spinX(random(360));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
upFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
enterFunction |
Function | void | a custom function that will run every time the mouse hovers over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
enterFunction: function(e) {
e.setScale(2,2,2);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
enterFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
leaveFunction |
Function | void | a custom function that will run every time the mouse stops hovering over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
leaveFunction: function(e) {
e.setScale(1,1,1);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
leaveFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
overFunction |
Function | void | a custom function that will run continually whenever the mouse is hovering over the entity. this function should be implemented to accept two arguments - the first is a reference to the entity that was clicked, and the second is an object that contains information about the interaction that just occured. example: let b = AFrameP5.Box({
overFunction: function(e, intersectionInfo) {
console.log(intersectionInfo);
}
});
intersectionInfo is an object that contains info about how the user is interacting with this entity. it contains the following properties:
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
overFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
tickFunction: function(e) {
e.setRed( random(255) );
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
tickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
AFrameP5.Ring(Object)
radiusInner |
Number (float) | 0.5 | inner radius of the ring (in meters) |
radiusOuter |
Number (float) | 1 | outer radius of the ring (in meters) |
segmentsTheta |
Number (integer) | 32 | number of segments. a higher number means the ring will be more round. |
segmentsPhi |
Number (integer) | 8 | number of triangles within each face defined by segmentsTheta. |
thetaStart |
Number (integer) | 0 | start angle for first segment. |
thetaLength |
Number (integer) | 360 | the central angle (in degrees) |
// sketch.js file
let world;
let ring;
function setup() {
// no canvas needed
noCanvas();
// create a new VR World object
world = new AFrameP5.World('VRScene');
// construct a new ring
ring = new AFrameP5.Ring({
x:0,
y:2,
z:-2,
radiusInner: 0.5,
radiusOuter: 1,
red:0,
green:255,
blue:0
});
// add the ring to the world
world.add(ring);
}
| Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
lookAtUser() : void |
Rotation | forces the entity to orient itself so that it is facing the user. |
getVisibility() : boolean |
Visibility | returns the current visibility state of the entity |
hide() : void |
Visibility | hides the entity by setting its visible property to false |
show() : void |
Visibility | shows the entity by setting its visible property to true |
toggleVisibility() : void |
Visibility | hides the entity if it is current visible and shows the entity if it is current hidden |
getScale() : Object |
Scale | returns the scale of the entity as an object (i.e. {x:0, y:0, z:0} |
getScaleX() : Number |
Scale | returns the x scale of the entity |
getScaleY() : Number |
Scale | returns the y scale of the entity |
getScaleZ() : Number |
Scale | returns the z scale of the entity |
setScale(x,y,z) : void |
Scale | sets the scale of the object in all axes |
setScaleX(x) : void |
Scale | sets the x scale of the object |
setScaleY(y) : void |
Scale | sets the y scale of the object |
setScaleZ(z) : void |
Scale | sets the z scale of the object |
getAsset() : String |
Material | returns the current id of the asset being used to texture this entity |
getBlue() : Number |
Material | returns the current blue color of the entity |
getGreen() : Number |
Material | returns the current green color of the entity |
getMetalness() : Number |
Material | returns the current metalness setting for the texture of the entity (range = 0.0 to 1.0) |
getOpacity() : Number |
Material | returns the current opacity of the entity |
getRed() : Number |
Material | returns the current red color of the entity |
setRoughness(Number) : void |
Material | sets the roughness for the texture of the entity (range = 0.0 to 1.0) |
getSide() : String |
Material | returns which faces of the entity will be textured (valid values are front, back and double) |
getTransparent() : boolean |
Material | returns the current transparency of the entity |
setAsset(String) : void |
Material | sets the id for the asset to texture this entity |
setColor(red, green, blue) : void |
Material | sets the color of the entity |
setBlue(blue) : void |
Material | sets the blue color of the entity |
setGreen(green) : void |
Material | sets the green color of the entity |
setMetalness(Number) : void |
Material | sets the metalness for the texture of the entity (range = 0.0 to 1.0) |
setOpacity(Number) : void |
Material | sets the opacity of the entity (range = 0.0 to 1.0) |
setRed(red) : void |
Material | sets the red color of the entity |
getRoughness() : Number |
Material | returns the current roughness setting for the texture of the entity (range = 0.0 to 1.0) |
setTransparent(boolean) : void |
Material | sets whether the entity supports transparent textures |
setSide(String) : void |
Material | sets which faces of the entity will be textured (valid values are front, back and double) |
add(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. alias for addChild. |
addChild(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
| Method | Category | Description |
getRadiusInner() : Number |
Geometry | returns the current inner radius of the entity |
getRadiusOuter() : Number |
Geometry | returns the current outer radius of the entity |
getSegmentsTheta() : Number |
Geometry | returns the current segmentsTheta value for the entity |
getSegmentsPhi() : Number |
Geometry | returns the current segmentsPhi value for the entity |
getThetaStart() : Number |
Geometry | returns the current thetaStart value for the entity |
getThetaLength() : Number |
Geometry | returns the current thetaLength value for the entity |
setRadiusInner(Number) : void |
Geometry | sets the inner radius of the entity |
setRadiusOuter(Number) : void |
Geometry | sets the outer radius of the entity |
setSegmentsTheta(Number) : void |
Geometry | sets the current segmentsTheta value for the entity |
setSegmentsPhi(Number) : void |
Geometry | sets the current segmentsPhi value for the entity |
setThetaStart(Number) : void |
Geometry | sets the the thetaStart value for the entity |
setThetaLength(Number) : void |
Geometry | sets the the thetaLength value for the entity |
Used to construct a three dimensional spherical entity.
AFrameP5.Sphere(Object)
| Parameter | Data Type | Default | Description |
x |
Number (float) | 0 | x-position of the entity |
y |
Number (float) | 0 | y-position of the entity |
z |
Number (float) | 0 | z-position of the entity |
opacity |
Number (float) | 1.0 | how transparent this entity is (0.0 = fully transparent, 1.0 = fully opaque) |
transparent |
Boolean | false | whether the texture associated with this entity supports transparency (i.e. a PNG file with an alpha channel) |
shader |
String | 'standard' | the ThreeJS shader to use to render this entity - other valid value is flat |
side |
String | 'front' | which side of the entity should be set up with a visual material. default is the front of the entity - other valid values are back and double |
roughness |
Number (float) | 0.5 | how 'rough' the material appears. valid range = 0.0 to 1.0 |
metalness |
Number (float) | 0.1 | how 'metallic' the material appears. valid range = 0.0 to 1.0 |
red |
Number (integer) | 255 | how red the entity appears. valid range = 0 to 255 |
green |
Number (integer) | 255 | how green the entity appears. valid range = 0 to 255 |
blue |
Number (integer) | 255 | how blue the entity appears. valid range = 0 to 255 |
repeatX |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the x-axis of each face of the object. valid range = any positive number |
repeatY |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the y-axis of each face of the object. valid range = any positive number |
asset |
String | 'None' | the id (String) of the element that should be used as a texture for this entity. all textures should be set up in the 'index.html' file inside of the a-assets tag. |
scaleX |
Number (float) | 1.0 | the scale of the object in the x-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleY |
Number (float) | 1.0 | the scale of the object in the y-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleZ |
Number (float) | 1.0 | the scale of the object in the z-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
rotationX |
Number (float) | 0 | the rotation of the object along the x-axis. |
rotationY |
Number (float) | 0 | the rotation of the object along the y-axis. |
rotationZ |
Number (float) | 0 | the rotation of the object along the z-axis. |
visible |
Boolean | true | determines whether the entity is visible in the scene. |
dynamicTexture |
Boolean | false | sets whether the texture used on the entity is being drawn from a dynamically drawn canvas element. see these examples for more information: Dynamic textures, Multiple dynamic textures and Interactive dynamic textures |
dynamicTextureHeight |
Number | 0 | tells the entity the height of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
dynamicTextureWidth |
Number | 0 | tells the entity the width of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
customData |
Object | void | a custom object that can be used by the entity to keep track of user-specified data. example:
let b = new AFrameP5.Box({
customData: {
numClicks: 0
},
clickFunction: function(e) {
numClicks++;
console.log("This element has been clicked " + e.customData.numClicks + " times";
}
});
|
clickFunction |
Function | void | a custom function that will run every time the user clicks on the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
clickFunction: function(e) {
e.setRed(random(255));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
clickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
upFunction |
Function | void | a custom function that will run every time the releases the mouse after the entity has been clicked. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
upFunction: function(e) {
e.spinX(random(360));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
upFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
enterFunction |
Function | void | a custom function that will run every time the mouse hovers over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
enterFunction: function(e) {
e.setScale(2,2,2);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
enterFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
leaveFunction |
Function | void | a custom function that will run every time the mouse stops hovering over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
leaveFunction: function(e) {
e.setScale(1,1,1);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
leaveFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
overFunction |
Function | void | a custom function that will run continually whenever the mouse is hovering over the entity. this function should be implemented to accept two arguments - the first is a reference to the entity that was clicked, and the second is an object that contains information about the interaction that just occured. example: let b = AFrameP5.Box({
overFunction: function(e, intersectionInfo) {
console.log(intersectionInfo);
}
});
intersectionInfo is an object that contains info about how the user is interacting with this entity. it contains the following properties:
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
overFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
tickFunction: function(e) {
e.setRed( random(255) );
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
tickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
AFrameP5.Sphere(Object)
radius |
Number (float) | 1 | radius of the sphere (in meters) |
segmentsWidth |
Number (integer) | 18 | number of horizontal segments |
segmentsHeight |
Number (integer) | 36 | number horizontal segments |
phiStart |
Number (integer) | 0 | horizontal starting angle |
phiLength |
Number (integer) | 360 | horizontal sweep angle size |
thetaStart |
Number (integer) | 0 | start angle for first segment. |
thetaLength |
Number (integer) | 360 | the central angle (in degrees) |
// sketch.js file
let world;
let sphere;
function setup() {
// no canvas needed
noCanvas();
// create a new VR World object
world = new AFrameP5.World('VRScene');
// construct a new sphere
sphere = new AFrameP5.Sphere({
x:0,
y:2,
z:0,
red:0,
green:255,
blue:0
});
// add the sphere to the world
world.add(sphere);
}
| Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
lookAtUser() : void |
Rotation | forces the entity to orient itself so that it is facing the user. |
getVisibility() : boolean |
Visibility | returns the current visibility state of the entity |
hide() : void |
Visibility | hides the entity by setting its visible property to false |
show() : void |
Visibility | shows the entity by setting its visible property to true |
toggleVisibility() : void |
Visibility | hides the entity if it is current visible and shows the entity if it is current hidden |
getScale() : Object |
Scale | returns the scale of the entity as an object (i.e. {x:0, y:0, z:0} |
getScaleX() : Number |
Scale | returns the x scale of the entity |
getScaleY() : Number |
Scale | returns the y scale of the entity |
getScaleZ() : Number |
Scale | returns the z scale of the entity |
setScale(x,y,z) : void |
Scale | sets the scale of the object in all axes |
setScaleX(x) : void |
Scale | sets the x scale of the object |
setScaleY(y) : void |
Scale | sets the y scale of the object |
setScaleZ(z) : void |
Scale | sets the z scale of the object |
getAsset() : String |
Material | returns the current id of the asset being used to texture this entity |
getBlue() : Number |
Material | returns the current blue color of the entity |
getGreen() : Number |
Material | returns the current green color of the entity |
getMetalness() : Number |
Material | returns the current metalness setting for the texture of the entity (range = 0.0 to 1.0) |
getOpacity() : Number |
Material | returns the current opacity of the entity |
getRed() : Number |
Material | returns the current red color of the entity |
setRoughness(Number) : void |
Material | sets the roughness for the texture of the entity (range = 0.0 to 1.0) |
getSide() : String |
Material | returns which faces of the entity will be textured (valid values are front, back and double) |
getTransparent() : boolean |
Material | returns the current transparency of the entity |
setAsset(String) : void |
Material | sets the id for the asset to texture this entity |
setColor(red, green, blue) : void |
Material | sets the color of the entity |
setBlue(blue) : void |
Material | sets the blue color of the entity |
setGreen(green) : void |
Material | sets the green color of the entity |
setMetalness(Number) : void |
Material | sets the metalness for the texture of the entity (range = 0.0 to 1.0) |
setOpacity(Number) : void |
Material | sets the opacity of the entity (range = 0.0 to 1.0) |
setRed(red) : void |
Material | sets the red color of the entity |
getRoughness() : Number |
Material | returns the current roughness setting for the texture of the entity (range = 0.0 to 1.0) |
setTransparent(boolean) : void |
Material | sets whether the entity supports transparent textures |
setSide(String) : void |
Material | sets which faces of the entity will be textured (valid values are front, back and double) |
add(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. alias for addChild. |
addChild(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
| Method | Category | Description |
getRadius() : Number |
Geometry | returns the current radius of the entity |
getSegmentsWidth() : Number |
Geometry | returns the current segmentsWidth value for the entity |
getSegmentsHeight() : Number |
Geometry | returns the current segmentsHeight value for the entity |
getPhiStart() : Number |
Geometry | returns the current phiStart value for the entity |
getPhiLength() : Number |
Geometry | returns the current phiLength value for the entity |
getThetaStart() : Number |
Geometry | returns the current thetaStart value for the entity |
getThetaLength() : Number |
Geometry | returns the current thetaLength value for the entity |
setRadius(Number) : void |
Geometry | sets the radius of the entity |
changeRadius(Number) : void |
Geometry | updates the radius by the value provided (i.e. entity.changeRadius(0.1); will increase the radius by 0.1 meters. |
setSegmentsWidth(Number) : void |
Geometry | sets the current segmentsWidth value for the entity |
setSegmentsHeight(Number) : void |
Geometry | sets the current segmentsHeight value for the entity |
setPhiStart(Number) : void |
Geometry | sets the the phiStart value for the entity |
setPhiLength(Number) : void |
Geometry | sets the the phiLength value for the entity |
setThetaStart(Number) : void |
Geometry | sets the the thetaStart value for the entity |
setThetaLength(Number) : void |
Geometry | sets the the thetaLength value for the entity |
Used to construct a three dimensional conical entity.
AFrameP5.Cone(Object)
| Parameter | Data Type | Default | Description |
x |
Number (float) | 0 | x-position of the entity |
y |
Number (float) | 0 | y-position of the entity |
z |
Number (float) | 0 | z-position of the entity |
opacity |
Number (float) | 1.0 | how transparent this entity is (0.0 = fully transparent, 1.0 = fully opaque) |
transparent |
Boolean | false | whether the texture associated with this entity supports transparency (i.e. a PNG file with an alpha channel) |
shader |
String | 'standard' | the ThreeJS shader to use to render this entity - other valid value is flat |
side |
String | 'front' | which side of the entity should be set up with a visual material. default is the front of the entity - other valid values are back and double |
roughness |
Number (float) | 0.5 | how 'rough' the material appears. valid range = 0.0 to 1.0 |
metalness |
Number (float) | 0.1 | how 'metallic' the material appears. valid range = 0.0 to 1.0 |
red |
Number (integer) | 255 | how red the entity appears. valid range = 0 to 255 |
green |
Number (integer) | 255 | how green the entity appears. valid range = 0 to 255 |
blue |
Number (integer) | 255 | how blue the entity appears. valid range = 0 to 255 |
repeatX |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the x-axis of each face of the object. valid range = any positive number |
repeatY |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the y-axis of each face of the object. valid range = any positive number |
asset |
String | 'None' | the id (String) of the element that should be used as a texture for this entity. all textures should be set up in the 'index.html' file inside of the a-assets tag. |
scaleX |
Number (float) | 1.0 | the scale of the object in the x-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleY |
Number (float) | 1.0 | the scale of the object in the y-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleZ |
Number (float) | 1.0 | the scale of the object in the z-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
rotationX |
Number (float) | 0 | the rotation of the object along the x-axis. |
rotationY |
Number (float) | 0 | the rotation of the object along the y-axis. |
rotationZ |
Number (float) | 0 | the rotation of the object along the z-axis. |
visible |
Boolean | true | determines whether the entity is visible in the scene. |
dynamicTexture |
Boolean | false | sets whether the texture used on the entity is being drawn from a dynamically drawn canvas element. see these examples for more information: Dynamic textures, Multiple dynamic textures and Interactive dynamic textures |
dynamicTextureHeight |
Number | 0 | tells the entity the height of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
dynamicTextureWidth |
Number | 0 | tells the entity the width of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
customData |
Object | void | a custom object that can be used by the entity to keep track of user-specified data. example:
let b = new AFrameP5.Box({
customData: {
numClicks: 0
},
clickFunction: function(e) {
numClicks++;
console.log("This element has been clicked " + e.customData.numClicks + " times";
}
});
|
clickFunction |
Function | void | a custom function that will run every time the user clicks on the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
clickFunction: function(e) {
e.setRed(random(255));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
clickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
upFunction |
Function | void | a custom function that will run every time the releases the mouse after the entity has been clicked. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
upFunction: function(e) {
e.spinX(random(360));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
upFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
enterFunction |
Function | void | a custom function that will run every time the mouse hovers over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
enterFunction: function(e) {
e.setScale(2,2,2);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
enterFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
leaveFunction |
Function | void | a custom function that will run every time the mouse stops hovering over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
leaveFunction: function(e) {
e.setScale(1,1,1);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
leaveFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
overFunction |
Function | void | a custom function that will run continually whenever the mouse is hovering over the entity. this function should be implemented to accept two arguments - the first is a reference to the entity that was clicked, and the second is an object that contains information about the interaction that just occured. example: let b = AFrameP5.Box({
overFunction: function(e, intersectionInfo) {
console.log(intersectionInfo);
}
});
intersectionInfo is an object that contains info about how the user is interacting with this entity. it contains the following properties:
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
overFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
tickFunction: function(e) {
e.setRed( random(255) );
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
tickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
AFrameP5.Cone(Object)
height |
Number (float) | 1 | height of the entity (along the y-axis) |
openEnded |
Boolean | false | whether the cone is open ended or not |
radiusBottom |
Number (float) | 1 | radius of the bottom of the cone (in meters) |
radiusTop |
Number (float) | 1 | radius of the top of the cone (in meters) |
segmentsRadial |
Number (integer) | 36 | number of segmented faces around the circumference of the cone. |
segmentsHeight |
Number (integer) | 18 | Number of rows of faces along the height of the cone. |
thetaStart |
Number (integer) | 0 | start angle in degrees |
thetaLength |
Number (integer) | 360 | the central angle (in degrees) |
// sketch.js file
let world;
let cone;
function setup() {
// no canvas needed
noCanvas();
// create a new VR World object
world = new AFrameP5.World('VRScene');
// construct a new cone
cone = new AFrameP5.Cone({
x:0,
y:2,
z:0,
red:0,
green:255,
blue:0
});
// add the cone to the world
world.add(cone);
}
| Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
lookAtUser() : void |
Rotation | forces the entity to orient itself so that it is facing the user. |
getVisibility() : boolean |
Visibility | returns the current visibility state of the entity |
hide() : void |
Visibility | hides the entity by setting its visible property to false |
show() : void |
Visibility | shows the entity by setting its visible property to true |
toggleVisibility() : void |
Visibility | hides the entity if it is current visible and shows the entity if it is current hidden |
getScale() : Object |
Scale | returns the scale of the entity as an object (i.e. {x:0, y:0, z:0} |
getScaleX() : Number |
Scale | returns the x scale of the entity |
getScaleY() : Number |
Scale | returns the y scale of the entity |
getScaleZ() : Number |
Scale | returns the z scale of the entity |
setScale(x,y,z) : void |
Scale | sets the scale of the object in all axes |
setScaleX(x) : void |
Scale | sets the x scale of the object |
setScaleY(y) : void |
Scale | sets the y scale of the object |
setScaleZ(z) : void |
Scale | sets the z scale of the object |
getAsset() : String |
Material | returns the current id of the asset being used to texture this entity |
getBlue() : Number |
Material | returns the current blue color of the entity |
getGreen() : Number |
Material | returns the current green color of the entity |
getMetalness() : Number |
Material | returns the current metalness setting for the texture of the entity (range = 0.0 to 1.0) |
getOpacity() : Number |
Material | returns the current opacity of the entity |
getRed() : Number |
Material | returns the current red color of the entity |
setRoughness(Number) : void |
Material | sets the roughness for the texture of the entity (range = 0.0 to 1.0) |
getSide() : String |
Material | returns which faces of the entity will be textured (valid values are front, back and double) |
getTransparent() : boolean |
Material | returns the current transparency of the entity |
setAsset(String) : void |
Material | sets the id for the asset to texture this entity |
setColor(red, green, blue) : void |
Material | sets the color of the entity |
setBlue(blue) : void |
Material | sets the blue color of the entity |
setGreen(green) : void |
Material | sets the green color of the entity |
setMetalness(Number) : void |
Material | sets the metalness for the texture of the entity (range = 0.0 to 1.0) |
setOpacity(Number) : void |
Material | sets the opacity of the entity (range = 0.0 to 1.0) |
setRed(red) : void |
Material | sets the red color of the entity |
getRoughness() : Number |
Material | returns the current roughness setting for the texture of the entity (range = 0.0 to 1.0) |
setTransparent(boolean) : void |
Material | sets whether the entity supports transparent textures |
setSide(String) : void |
Material | sets which faces of the entity will be textured (valid values are front, back and double) |
add(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. alias for addChild. |
addChild(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
| Method | Category | Description |
getHeight() : Number |
Geometry | returns the current height of the entity |
getOpenEnded() : Boolean |
Geometry | returns whether the entity is open ended or not |
getRadiusBottom() : Number |
Geometry | returns the current bottom radius of the entity |
getRadiusTop() : Number |
Geometry | returns the current top radius of the entity |
getSegmentsRadial() : Number |
Geometry | returns the current segmentsRadial value for the entity |
getSegmentsHeight() : Number |
Geometry | returns the current segmentsHeight value for the entity |
getThetaStart() : Number |
Geometry | returns the current thetaStart value for the entity |
getThetaLength() : Number |
Geometry | returns the current thetaLength value for the entity |
setHeight(Number) : void |
Geometry | sets the height of the entity |
setOpenEnded(Boolean) : void |
Geometry | sets whether the entity is open ended or not |
setRadiusBottom(Number) : void |
Geometry | sets the radiusBottom value for the entity |
setRadiusTop(Number) : void |
Geometry | sets the radiusTop value for the entity |
setSegmentsRadial(Number) : void |
Geometry | sets the current segmentsRadial value for the entity |
setSegmentsHeight(Number) : void |
Geometry | sets the current segmentsHeight value for the entity |
setThetaStart(Number) : void |
Geometry | sets the the thetaStart value for the entity |
setThetaLength(Number) : void |
Geometry | sets the the thetaLength value for the entity |
Used to construct a three dimensional cylindrical entity.
AFrameP5.Cylinder(Object)
| Parameter | Data Type | Default | Description |
x |
Number (float) | 0 | x-position of the entity |
y |
Number (float) | 0 | y-position of the entity |
z |
Number (float) | 0 | z-position of the entity |
opacity |
Number (float) | 1.0 | how transparent this entity is (0.0 = fully transparent, 1.0 = fully opaque) |
transparent |
Boolean | false | whether the texture associated with this entity supports transparency (i.e. a PNG file with an alpha channel) |
shader |
String | 'standard' | the ThreeJS shader to use to render this entity - other valid value is flat |
side |
String | 'front' | which side of the entity should be set up with a visual material. default is the front of the entity - other valid values are back and double |
roughness |
Number (float) | 0.5 | how 'rough' the material appears. valid range = 0.0 to 1.0 |
metalness |
Number (float) | 0.1 | how 'metallic' the material appears. valid range = 0.0 to 1.0 |
red |
Number (integer) | 255 | how red the entity appears. valid range = 0 to 255 |
green |
Number (integer) | 255 | how green the entity appears. valid range = 0 to 255 |
blue |
Number (integer) | 255 | how blue the entity appears. valid range = 0 to 255 |
repeatX |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the x-axis of each face of the object. valid range = any positive number |
repeatY |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the y-axis of each face of the object. valid range = any positive number |
asset |
String | 'None' | the id (String) of the element that should be used as a texture for this entity. all textures should be set up in the 'index.html' file inside of the a-assets tag. |
scaleX |
Number (float) | 1.0 | the scale of the object in the x-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleY |
Number (float) | 1.0 | the scale of the object in the y-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleZ |
Number (float) | 1.0 | the scale of the object in the z-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
rotationX |
Number (float) | 0 | the rotation of the object along the x-axis. |
rotationY |
Number (float) | 0 | the rotation of the object along the y-axis. |
rotationZ |
Number (float) | 0 | the rotation of the object along the z-axis. |
visible |
Boolean | true | determines whether the entity is visible in the scene. |
dynamicTexture |
Boolean | false | sets whether the texture used on the entity is being drawn from a dynamically drawn canvas element. see these examples for more information: Dynamic textures, Multiple dynamic textures and Interactive dynamic textures |
dynamicTextureHeight |
Number | 0 | tells the entity the height of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
dynamicTextureWidth |
Number | 0 | tells the entity the width of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
customData |
Object | void | a custom object that can be used by the entity to keep track of user-specified data. example:
let b = new AFrameP5.Box({
customData: {
numClicks: 0
},
clickFunction: function(e) {
numClicks++;
console.log("This element has been clicked " + e.customData.numClicks + " times";
}
});
|
clickFunction |
Function | void | a custom function that will run every time the user clicks on the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
clickFunction: function(e) {
e.setRed(random(255));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
clickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
upFunction |
Function | void | a custom function that will run every time the releases the mouse after the entity has been clicked. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
upFunction: function(e) {
e.spinX(random(360));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
upFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
enterFunction |
Function | void | a custom function that will run every time the mouse hovers over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
enterFunction: function(e) {
e.setScale(2,2,2);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
enterFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
leaveFunction |
Function | void | a custom function that will run every time the mouse stops hovering over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
leaveFunction: function(e) {
e.setScale(1,1,1);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
leaveFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
overFunction |
Function | void | a custom function that will run continually whenever the mouse is hovering over the entity. this function should be implemented to accept two arguments - the first is a reference to the entity that was clicked, and the second is an object that contains information about the interaction that just occured. example: let b = AFrameP5.Box({
overFunction: function(e, intersectionInfo) {
console.log(intersectionInfo);
}
});
intersectionInfo is an object that contains info about how the user is interacting with this entity. it contains the following properties:
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
overFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
tickFunction: function(e) {
e.setRed( random(255) );
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
tickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
AFrameP5.Cylinder(Object)
radius |
Number (float) | 1 | radius of the entity (in meters) |
height |
Number (float) | 1 | height of the entity (along the y-axis) |
openEnded |
Boolean | false | whether the cone is open ended or not |
segmentsRadial |
Number (integer) | 36 | number of segmented faces around the circumference of the cylinder. |
segmentsHeight |
Number (integer) | 18 | Number of rows of faces along the height of the cylinder. |
thetaStart |
Number (integer) | 0 | start angle in degrees |
thetaLength |
Number (integer) | 360 | the central angle (in degrees) |
// sketch.js file
let world;
let cylinder;
function setup() {
// no canvas needed
noCanvas();
// create a new VR World object
world = new AFrameP5.World('VRScene');
// construct a new cylinder
cylinder = new AFrameP5.Cylinder({
x:0,
y:2,
z:0,
red:0,
green:255,
blue:0
});
// add the cylinder to the world
world.add(cylinder);
}
| Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
lookAtUser() : void |
Rotation | forces the entity to orient itself so that it is facing the user. |
getVisibility() : boolean |
Visibility | returns the current visibility state of the entity |
hide() : void |
Visibility | hides the entity by setting its visible property to false |
show() : void |
Visibility | shows the entity by setting its visible property to true |
toggleVisibility() : void |
Visibility | hides the entity if it is current visible and shows the entity if it is current hidden |
getScale() : Object |
Scale | returns the scale of the entity as an object (i.e. {x:0, y:0, z:0} |
getScaleX() : Number |
Scale | returns the x scale of the entity |
getScaleY() : Number |
Scale | returns the y scale of the entity |
getScaleZ() : Number |
Scale | returns the z scale of the entity |
setScale(x,y,z) : void |
Scale | sets the scale of the object in all axes |
setScaleX(x) : void |
Scale | sets the x scale of the object |
setScaleY(y) : void |
Scale | sets the y scale of the object |
setScaleZ(z) : void |
Scale | sets the z scale of the object |
getAsset() : String |
Material | returns the current id of the asset being used to texture this entity |
getBlue() : Number |
Material | returns the current blue color of the entity |
getGreen() : Number |
Material | returns the current green color of the entity |
getMetalness() : Number |
Material | returns the current metalness setting for the texture of the entity (range = 0.0 to 1.0) |
getOpacity() : Number |
Material | returns the current opacity of the entity |
getRed() : Number |
Material | returns the current red color of the entity |
setRoughness(Number) : void |
Material | sets the roughness for the texture of the entity (range = 0.0 to 1.0) |
getSide() : String |
Material | returns which faces of the entity will be textured (valid values are front, back and double) |
getTransparent() : boolean |
Material | returns the current transparency of the entity |
setAsset(String) : void |
Material | sets the id for the asset to texture this entity |
setColor(red, green, blue) : void |
Material | sets the color of the entity |
setBlue(blue) : void |
Material | sets the blue color of the entity |
setGreen(green) : void |
Material | sets the green color of the entity |
setMetalness(Number) : void |
Material | sets the metalness for the texture of the entity (range = 0.0 to 1.0) |
setOpacity(Number) : void |
Material | sets the opacity of the entity (range = 0.0 to 1.0) |
setRed(red) : void |
Material | sets the red color of the entity |
getRoughness() : Number |
Material | returns the current roughness setting for the texture of the entity (range = 0.0 to 1.0) |
setTransparent(boolean) : void |
Material | sets whether the entity supports transparent textures |
setSide(String) : void |
Material | sets which faces of the entity will be textured (valid values are front, back and double) |
add(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. alias for addChild. |
addChild(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
| Method | Category | Description |
getRadius() : Number |
Geometry | returns the current radius of the entity |
getHeight() : Number |
Geometry | returns the current height of the entity |
getOpenEnded() : Boolean |
Geometry | returns whether the entity is open ended or not |
getSegmentsRadial() : Number |
Geometry | returns the current segmentsRadial value for the entity |
getSegmentsHeight() : Number |
Geometry | returns the current segmentsHeight value for the entity |
getThetaStart() : Number |
Geometry | returns the current thetaStart value for the entity |
getThetaLength() : Number |
Geometry | returns the current thetaLength value for the entity |
setRadius(Number) : void |
Geometry | sets the radius of the entity |
changeRadius(Number) : void |
Geometry | updates the radius by the value provided (i.e. entity.changeRadius(0.1); will increase the radius by 0.1 meters. |
setHeight(Number) : void |
Geometry | sets the height of the entity |
setOpenEnded(Boolean) : void |
Geometry | sets whether the entity is open ended or not |
setSegmentsRadial(Number) : void |
Geometry | sets the current segmentsRadial value for the entity |
setSegmentsHeight(Number) : void |
Geometry | sets the current segmentsHeight value for the entity |
setThetaStart(Number) : void |
Geometry | sets the the thetaStart value for the entity |
setThetaLength(Number) : void |
Geometry | sets the the thetaLength value for the entity |
Used to construct a three dimensional 12-sided entity.
AFrameP5.Dodecahedron(Object)
| Parameter | Data Type | Default | Description |
x |
Number (float) | 0 | x-position of the entity |
y |
Number (float) | 0 | y-position of the entity |
z |
Number (float) | 0 | z-position of the entity |
opacity |
Number (float) | 1.0 | how transparent this entity is (0.0 = fully transparent, 1.0 = fully opaque) |
transparent |
Boolean | false | whether the texture associated with this entity supports transparency (i.e. a PNG file with an alpha channel) |
shader |
String | 'standard' | the ThreeJS shader to use to render this entity - other valid value is flat |
side |
String | 'front' | which side of the entity should be set up with a visual material. default is the front of the entity - other valid values are back and double |
roughness |
Number (float) | 0.5 | how 'rough' the material appears. valid range = 0.0 to 1.0 |
metalness |
Number (float) | 0.1 | how 'metallic' the material appears. valid range = 0.0 to 1.0 |
red |
Number (integer) | 255 | how red the entity appears. valid range = 0 to 255 |
green |
Number (integer) | 255 | how green the entity appears. valid range = 0 to 255 |
blue |
Number (integer) | 255 | how blue the entity appears. valid range = 0 to 255 |
repeatX |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the x-axis of each face of the object. valid range = any positive number |
repeatY |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the y-axis of each face of the object. valid range = any positive number |
asset |
String | 'None' | the id (String) of the element that should be used as a texture for this entity. all textures should be set up in the 'index.html' file inside of the a-assets tag. |
scaleX |
Number (float) | 1.0 | the scale of the object in the x-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleY |
Number (float) | 1.0 | the scale of the object in the y-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleZ |
Number (float) | 1.0 | the scale of the object in the z-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
rotationX |
Number (float) | 0 | the rotation of the object along the x-axis. |
rotationY |
Number (float) | 0 | the rotation of the object along the y-axis. |
rotationZ |
Number (float) | 0 | the rotation of the object along the z-axis. |
visible |
Boolean | true | determines whether the entity is visible in the scene. |
dynamicTexture |
Boolean | false | sets whether the texture used on the entity is being drawn from a dynamically drawn canvas element. see these examples for more information: Dynamic textures, Multiple dynamic textures and Interactive dynamic textures |
dynamicTextureHeight |
Number | 0 | tells the entity the height of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
dynamicTextureWidth |
Number | 0 | tells the entity the width of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
customData |
Object | void | a custom object that can be used by the entity to keep track of user-specified data. example:
let b = new AFrameP5.Box({
customData: {
numClicks: 0
},
clickFunction: function(e) {
numClicks++;
console.log("This element has been clicked " + e.customData.numClicks + " times";
}
});
|
clickFunction |
Function | void | a custom function that will run every time the user clicks on the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
clickFunction: function(e) {
e.setRed(random(255));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
clickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
upFunction |
Function | void | a custom function that will run every time the releases the mouse after the entity has been clicked. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
upFunction: function(e) {
e.spinX(random(360));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
upFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
enterFunction |
Function | void | a custom function that will run every time the mouse hovers over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
enterFunction: function(e) {
e.setScale(2,2,2);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
enterFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
leaveFunction |
Function | void | a custom function that will run every time the mouse stops hovering over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
leaveFunction: function(e) {
e.setScale(1,1,1);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
leaveFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
overFunction |
Function | void | a custom function that will run continually whenever the mouse is hovering over the entity. this function should be implemented to accept two arguments - the first is a reference to the entity that was clicked, and the second is an object that contains information about the interaction that just occured. example: let b = AFrameP5.Box({
overFunction: function(e, intersectionInfo) {
console.log(intersectionInfo);
}
});
intersectionInfo is an object that contains info about how the user is interacting with this entity. it contains the following properties:
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
overFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
tickFunction: function(e) {
e.setRed( random(255) );
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
tickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
AFrameP5.Dodecahedron(Object)
radius |
Number (float) | 1 | radius of the entity (in meters) |
// sketch.js file
let world;
let dodecahedron;
function setup() {
// no canvas needed
noCanvas();
// create a new VR World object
world = new AFrameP5.World('VRScene');
// construct a new dodecahedron
dodecahedron = new AFrameP5.Dodecahedron({
x:0,
y:2,
z:0,
red:0,
green:255,
blue:0
});
// add the dodecahedron to the world
world.add(dodecahedron);
}
| Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
lookAtUser() : void |
Rotation | forces the entity to orient itself so that it is facing the user. |
getVisibility() : boolean |
Visibility | returns the current visibility state of the entity |
hide() : void |
Visibility | hides the entity by setting its visible property to false |
show() : void |
Visibility | shows the entity by setting its visible property to true |
toggleVisibility() : void |
Visibility | hides the entity if it is current visible and shows the entity if it is current hidden |
getScale() : Object |
Scale | returns the scale of the entity as an object (i.e. {x:0, y:0, z:0} |
getScaleX() : Number |
Scale | returns the x scale of the entity |
getScaleY() : Number |
Scale | returns the y scale of the entity |
getScaleZ() : Number |
Scale | returns the z scale of the entity |
setScale(x,y,z) : void |
Scale | sets the scale of the object in all axes |
setScaleX(x) : void |
Scale | sets the x scale of the object |
setScaleY(y) : void |
Scale | sets the y scale of the object |
setScaleZ(z) : void |
Scale | sets the z scale of the object |
getAsset() : String |
Material | returns the current id of the asset being used to texture this entity |
getBlue() : Number |
Material | returns the current blue color of the entity |
getGreen() : Number |
Material | returns the current green color of the entity |
getMetalness() : Number |
Material | returns the current metalness setting for the texture of the entity (range = 0.0 to 1.0) |
getOpacity() : Number |
Material | returns the current opacity of the entity |
getRed() : Number |
Material | returns the current red color of the entity |
setRoughness(Number) : void |
Material | sets the roughness for the texture of the entity (range = 0.0 to 1.0) |
getSide() : String |
Material | returns which faces of the entity will be textured (valid values are front, back and double) |
getTransparent() : boolean |
Material | returns the current transparency of the entity |
setAsset(String) : void |
Material | sets the id for the asset to texture this entity |
setColor(red, green, blue) : void |
Material | sets the color of the entity |
setBlue(blue) : void |
Material | sets the blue color of the entity |
setGreen(green) : void |
Material | sets the green color of the entity |
setMetalness(Number) : void |
Material | sets the metalness for the texture of the entity (range = 0.0 to 1.0) |
setOpacity(Number) : void |
Material | sets the opacity of the entity (range = 0.0 to 1.0) |
setRed(red) : void |
Material | sets the red color of the entity |
getRoughness() : Number |
Material | returns the current roughness setting for the texture of the entity (range = 0.0 to 1.0) |
setTransparent(boolean) : void |
Material | sets whether the entity supports transparent textures |
setSide(String) : void |
Material | sets which faces of the entity will be textured (valid values are front, back and double) |
add(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. alias for addChild. |
addChild(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
| Method | Category | Description |
getRadius() : Number |
Geometry | returns the current radius of the entity |
setRadius(Number) : void |
Geometry | sets the radius of the entity |
changeRadius(Number) : void |
Geometry | updates the radius by the value provided (i.e. entity.changeRadius(0.1); will increase the radius by 0.1 meters. |
Used to construct a three dimensional 8-sided entity.
AFrameP5.Octahedron(Object)
| Parameter | Data Type | Default | Description |
x |
Number (float) | 0 | x-position of the entity |
y |
Number (float) | 0 | y-position of the entity |
z |
Number (float) | 0 | z-position of the entity |
opacity |
Number (float) | 1.0 | how transparent this entity is (0.0 = fully transparent, 1.0 = fully opaque) |
transparent |
Boolean | false | whether the texture associated with this entity supports transparency (i.e. a PNG file with an alpha channel) |
shader |
String | 'standard' | the ThreeJS shader to use to render this entity - other valid value is flat |
side |
String | 'front' | which side of the entity should be set up with a visual material. default is the front of the entity - other valid values are back and double |
roughness |
Number (float) | 0.5 | how 'rough' the material appears. valid range = 0.0 to 1.0 |
metalness |
Number (float) | 0.1 | how 'metallic' the material appears. valid range = 0.0 to 1.0 |
red |
Number (integer) | 255 | how red the entity appears. valid range = 0 to 255 |
green |
Number (integer) | 255 | how green the entity appears. valid range = 0 to 255 |
blue |
Number (integer) | 255 | how blue the entity appears. valid range = 0 to 255 |
repeatX |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the x-axis of each face of the object. valid range = any positive number |
repeatY |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the y-axis of each face of the object. valid range = any positive number |
asset |
String | 'None' | the id (String) of the element that should be used as a texture for this entity. all textures should be set up in the 'index.html' file inside of the a-assets tag. |
scaleX |
Number (float) | 1.0 | the scale of the object in the x-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleY |
Number (float) | 1.0 | the scale of the object in the y-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleZ |
Number (float) | 1.0 | the scale of the object in the z-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
rotationX |
Number (float) | 0 | the rotation of the object along the x-axis. |
rotationY |
Number (float) | 0 | the rotation of the object along the y-axis. |
rotationZ |
Number (float) | 0 | the rotation of the object along the z-axis. |
visible |
Boolean | true | determines whether the entity is visible in the scene. |
dynamicTexture |
Boolean | false | sets whether the texture used on the entity is being drawn from a dynamically drawn canvas element. see these examples for more information: Dynamic textures, Multiple dynamic textures and Interactive dynamic textures |
dynamicTextureHeight |
Number | 0 | tells the entity the height of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
dynamicTextureWidth |
Number | 0 | tells the entity the width of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
customData |
Object | void | a custom object that can be used by the entity to keep track of user-specified data. example:
let b = new AFrameP5.Box({
customData: {
numClicks: 0
},
clickFunction: function(e) {
numClicks++;
console.log("This element has been clicked " + e.customData.numClicks + " times";
}
});
|
clickFunction |
Function | void | a custom function that will run every time the user clicks on the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
clickFunction: function(e) {
e.setRed(random(255));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
clickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
upFunction |
Function | void | a custom function that will run every time the releases the mouse after the entity has been clicked. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
upFunction: function(e) {
e.spinX(random(360));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
upFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
enterFunction |
Function | void | a custom function that will run every time the mouse hovers over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
enterFunction: function(e) {
e.setScale(2,2,2);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
enterFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
leaveFunction |
Function | void | a custom function that will run every time the mouse stops hovering over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
leaveFunction: function(e) {
e.setScale(1,1,1);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
leaveFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
overFunction |
Function | void | a custom function that will run continually whenever the mouse is hovering over the entity. this function should be implemented to accept two arguments - the first is a reference to the entity that was clicked, and the second is an object that contains information about the interaction that just occured. example: let b = AFrameP5.Box({
overFunction: function(e, intersectionInfo) {
console.log(intersectionInfo);
}
});
intersectionInfo is an object that contains info about how the user is interacting with this entity. it contains the following properties:
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
overFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
tickFunction: function(e) {
e.setRed( random(255) );
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
tickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
AFrameP5.Octahedron(Object)
radius |
Number (float) | 1 | radius of the entity (in meters) |
// sketch.js file
let world;
let octahedron;
function setup() {
// no canvas needed
noCanvas();
// create a new VR World object
world = new AFrameP5.World('VRScene');
// construct a new Octahedron
octahedron = new AFrameP5.Octahedron({
x:0,
y:2,
z:0,
red:0,
green:255,
blue:0
});
// add the Octahedron to the world
world.add(octahedron);
}
| Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
lookAtUser() : void |
Rotation | forces the entity to orient itself so that it is facing the user. |
getVisibility() : boolean |
Visibility | returns the current visibility state of the entity |
hide() : void |
Visibility | hides the entity by setting its visible property to false |
show() : void |
Visibility | shows the entity by setting its visible property to true |
toggleVisibility() : void |
Visibility | hides the entity if it is current visible and shows the entity if it is current hidden |
getScale() : Object |
Scale | returns the scale of the entity as an object (i.e. {x:0, y:0, z:0} |
getScaleX() : Number |
Scale | returns the x scale of the entity |
getScaleY() : Number |
Scale | returns the y scale of the entity |
getScaleZ() : Number |
Scale | returns the z scale of the entity |
setScale(x,y,z) : void |
Scale | sets the scale of the object in all axes |
setScaleX(x) : void |
Scale | sets the x scale of the object |
setScaleY(y) : void |
Scale | sets the y scale of the object |
setScaleZ(z) : void |
Scale | sets the z scale of the object |
getAsset() : String |
Material | returns the current id of the asset being used to texture this entity |
getBlue() : Number |
Material | returns the current blue color of the entity |
getGreen() : Number |
Material | returns the current green color of the entity |
getMetalness() : Number |
Material | returns the current metalness setting for the texture of the entity (range = 0.0 to 1.0) |
getOpacity() : Number |
Material | returns the current opacity of the entity |
getRed() : Number |
Material | returns the current red color of the entity |
setRoughness(Number) : void |
Material | sets the roughness for the texture of the entity (range = 0.0 to 1.0) |
getSide() : String |
Material | returns which faces of the entity will be textured (valid values are front, back and double) |
getTransparent() : boolean |
Material | returns the current transparency of the entity |
setAsset(String) : void |
Material | sets the id for the asset to texture this entity |
setColor(red, green, blue) : void |
Material | sets the color of the entity |
setBlue(blue) : void |
Material | sets the blue color of the entity |
setGreen(green) : void |
Material | sets the green color of the entity |
setMetalness(Number) : void |
Material | sets the metalness for the texture of the entity (range = 0.0 to 1.0) |
setOpacity(Number) : void |
Material | sets the opacity of the entity (range = 0.0 to 1.0) |
setRed(red) : void |
Material | sets the red color of the entity |
getRoughness() : Number |
Material | returns the current roughness setting for the texture of the entity (range = 0.0 to 1.0) |
setTransparent(boolean) : void |
Material | sets whether the entity supports transparent textures |
setSide(String) : void |
Material | sets which faces of the entity will be textured (valid values are front, back and double) |
add(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. alias for addChild. |
addChild(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
| Method | Category | Description |
getRadius() : Number |
Geometry | returns the current radius of the entity |
setRadius(Number) : void |
Geometry | sets the radius of the entity |
changeRadius(Number) : void |
Geometry | updates the radius by the value provided (i.e. entity.changeRadius(0.1); will increase the radius by 0.1 meters. |
Used to construct a three dimensional 4-sided entity.
AFrameP5.Tetrahedron(Object)
| Parameter | Data Type | Default | Description |
x |
Number (float) | 0 | x-position of the entity |
y |
Number (float) | 0 | y-position of the entity |
z |
Number (float) | 0 | z-position of the entity |
opacity |
Number (float) | 1.0 | how transparent this entity is (0.0 = fully transparent, 1.0 = fully opaque) |
transparent |
Boolean | false | whether the texture associated with this entity supports transparency (i.e. a PNG file with an alpha channel) |
shader |
String | 'standard' | the ThreeJS shader to use to render this entity - other valid value is flat |
side |
String | 'front' | which side of the entity should be set up with a visual material. default is the front of the entity - other valid values are back and double |
roughness |
Number (float) | 0.5 | how 'rough' the material appears. valid range = 0.0 to 1.0 |
metalness |
Number (float) | 0.1 | how 'metallic' the material appears. valid range = 0.0 to 1.0 |
red |
Number (integer) | 255 | how red the entity appears. valid range = 0 to 255 |
green |
Number (integer) | 255 | how green the entity appears. valid range = 0 to 255 |
blue |
Number (integer) | 255 | how blue the entity appears. valid range = 0 to 255 |
repeatX |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the x-axis of each face of the object. valid range = any positive number |
repeatY |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the y-axis of each face of the object. valid range = any positive number |
asset |
String | 'None' | the id (String) of the element that should be used as a texture for this entity. all textures should be set up in the 'index.html' file inside of the a-assets tag. |
scaleX |
Number (float) | 1.0 | the scale of the object in the x-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleY |
Number (float) | 1.0 | the scale of the object in the y-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleZ |
Number (float) | 1.0 | the scale of the object in the z-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
rotationX |
Number (float) | 0 | the rotation of the object along the x-axis. |
rotationY |
Number (float) | 0 | the rotation of the object along the y-axis. |
rotationZ |
Number (float) | 0 | the rotation of the object along the z-axis. |
visible |
Boolean | true | determines whether the entity is visible in the scene. |
dynamicTexture |
Boolean | false | sets whether the texture used on the entity is being drawn from a dynamically drawn canvas element. see these examples for more information: Dynamic textures, Multiple dynamic textures and Interactive dynamic textures |
dynamicTextureHeight |
Number | 0 | tells the entity the height of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
dynamicTextureWidth |
Number | 0 | tells the entity the width of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
customData |
Object | void | a custom object that can be used by the entity to keep track of user-specified data. example:
let b = new AFrameP5.Box({
customData: {
numClicks: 0
},
clickFunction: function(e) {
numClicks++;
console.log("This element has been clicked " + e.customData.numClicks + " times";
}
});
|
clickFunction |
Function | void | a custom function that will run every time the user clicks on the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
clickFunction: function(e) {
e.setRed(random(255));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
clickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
upFunction |
Function | void | a custom function that will run every time the releases the mouse after the entity has been clicked. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
upFunction: function(e) {
e.spinX(random(360));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
upFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
enterFunction |
Function | void | a custom function that will run every time the mouse hovers over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
enterFunction: function(e) {
e.setScale(2,2,2);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
enterFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
leaveFunction |
Function | void | a custom function that will run every time the mouse stops hovering over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
leaveFunction: function(e) {
e.setScale(1,1,1);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
leaveFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
overFunction |
Function | void | a custom function that will run continually whenever the mouse is hovering over the entity. this function should be implemented to accept two arguments - the first is a reference to the entity that was clicked, and the second is an object that contains information about the interaction that just occured. example: let b = AFrameP5.Box({
overFunction: function(e, intersectionInfo) {
console.log(intersectionInfo);
}
});
intersectionInfo is an object that contains info about how the user is interacting with this entity. it contains the following properties:
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
overFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
tickFunction: function(e) {
e.setRed( random(255) );
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
tickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
AFrameP5.Tetrahedron(Object)
radius |
Number (float) | 1 | radius of the entity (in meters) |
// sketch.js file
let world;
let tetrahedron;
function setup() {
// no canvas needed
noCanvas();
// create a new VR World object
world = new AFrameP5.World('VRScene');
// construct a new Tetrahedron
tetrahedron = new AFrameP5.Tetrahedron({
x:0,
y:2,
z:0,
red:0,
green:255,
blue:0
});
// add the Tetrahedron to the world
world.add(tetrahedron);
}
| Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
lookAtUser() : void |
Rotation | forces the entity to orient itself so that it is facing the user. |
getVisibility() : boolean |
Visibility | returns the current visibility state of the entity |
hide() : void |
Visibility | hides the entity by setting its visible property to false |
show() : void |
Visibility | shows the entity by setting its visible property to true |
toggleVisibility() : void |
Visibility | hides the entity if it is current visible and shows the entity if it is current hidden |
getScale() : Object |
Scale | returns the scale of the entity as an object (i.e. {x:0, y:0, z:0} |
getScaleX() : Number |
Scale | returns the x scale of the entity |
getScaleY() : Number |
Scale | returns the y scale of the entity |
getScaleZ() : Number |
Scale | returns the z scale of the entity |
setScale(x,y,z) : void |
Scale | sets the scale of the object in all axes |
setScaleX(x) : void |
Scale | sets the x scale of the object |
setScaleY(y) : void |
Scale | sets the y scale of the object |
setScaleZ(z) : void |
Scale | sets the z scale of the object |
getAsset() : String |
Material | returns the current id of the asset being used to texture this entity |
getBlue() : Number |
Material | returns the current blue color of the entity |
getGreen() : Number |
Material | returns the current green color of the entity |
getMetalness() : Number |
Material | returns the current metalness setting for the texture of the entity (range = 0.0 to 1.0) |
getOpacity() : Number |
Material | returns the current opacity of the entity |
getRed() : Number |
Material | returns the current red color of the entity |
setRoughness(Number) : void |
Material | sets the roughness for the texture of the entity (range = 0.0 to 1.0) |
getSide() : String |
Material | returns which faces of the entity will be textured (valid values are front, back and double) |
getTransparent() : boolean |
Material | returns the current transparency of the entity |
setAsset(String) : void |
Material | sets the id for the asset to texture this entity |
setColor(red, green, blue) : void |
Material | sets the color of the entity |
setBlue(blue) : void |
Material | sets the blue color of the entity |
setGreen(green) : void |
Material | sets the green color of the entity |
setMetalness(Number) : void |
Material | sets the metalness for the texture of the entity (range = 0.0 to 1.0) |
setOpacity(Number) : void |
Material | sets the opacity of the entity (range = 0.0 to 1.0) |
setRed(red) : void |
Material | sets the red color of the entity |
getRoughness() : Number |
Material | returns the current roughness setting for the texture of the entity (range = 0.0 to 1.0) |
setTransparent(boolean) : void |
Material | sets whether the entity supports transparent textures |
setSide(String) : void |
Material | sets which faces of the entity will be textured (valid values are front, back and double) |
add(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. alias for addChild. |
addChild(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
| Method | Category | Description |
getRadius() : Number |
Geometry | returns the current radius of the entity |
setRadius(Number) : void |
Geometry | sets the radius of the entity |
changeRadius(Number) : void |
Geometry | updates the radius by the value provided (i.e. entity.changeRadius(0.1); will increase the radius by 0.1 meters. |
A torus is a surface of revolution generated by revolving a circle in three-dimensional space about an axis coplanar with the circle.
AFrameP5.Torus(Object)
| Parameter | Data Type | Default | Description |
x |
Number (float) | 0 | x-position of the entity |
y |
Number (float) | 0 | y-position of the entity |
z |
Number (float) | 0 | z-position of the entity |
opacity |
Number (float) | 1.0 | how transparent this entity is (0.0 = fully transparent, 1.0 = fully opaque) |
transparent |
Boolean | false | whether the texture associated with this entity supports transparency (i.e. a PNG file with an alpha channel) |
shader |
String | 'standard' | the ThreeJS shader to use to render this entity - other valid value is flat |
side |
String | 'front' | which side of the entity should be set up with a visual material. default is the front of the entity - other valid values are back and double |
roughness |
Number (float) | 0.5 | how 'rough' the material appears. valid range = 0.0 to 1.0 |
metalness |
Number (float) | 0.1 | how 'metallic' the material appears. valid range = 0.0 to 1.0 |
red |
Number (integer) | 255 | how red the entity appears. valid range = 0 to 255 |
green |
Number (integer) | 255 | how green the entity appears. valid range = 0 to 255 |
blue |
Number (integer) | 255 | how blue the entity appears. valid range = 0 to 255 |
repeatX |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the x-axis of each face of the object. valid range = any positive number |
repeatY |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the y-axis of each face of the object. valid range = any positive number |
asset |
String | 'None' | the id (String) of the element that should be used as a texture for this entity. all textures should be set up in the 'index.html' file inside of the a-assets tag. |
scaleX |
Number (float) | 1.0 | the scale of the object in the x-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleY |
Number (float) | 1.0 | the scale of the object in the y-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleZ |
Number (float) | 1.0 | the scale of the object in the z-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
rotationX |
Number (float) | 0 | the rotation of the object along the x-axis. |
rotationY |
Number (float) | 0 | the rotation of the object along the y-axis. |
rotationZ |
Number (float) | 0 | the rotation of the object along the z-axis. |
visible |
Boolean | true | determines whether the entity is visible in the scene. |
dynamicTexture |
Boolean | false | sets whether the texture used on the entity is being drawn from a dynamically drawn canvas element. see these examples for more information: Dynamic textures, Multiple dynamic textures and Interactive dynamic textures |
dynamicTextureHeight |
Number | 0 | tells the entity the height of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
dynamicTextureWidth |
Number | 0 | tells the entity the width of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
customData |
Object | void | a custom object that can be used by the entity to keep track of user-specified data. example:
let b = new AFrameP5.Box({
customData: {
numClicks: 0
},
clickFunction: function(e) {
numClicks++;
console.log("This element has been clicked " + e.customData.numClicks + " times";
}
});
|
clickFunction |
Function | void | a custom function that will run every time the user clicks on the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
clickFunction: function(e) {
e.setRed(random(255));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
clickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
upFunction |
Function | void | a custom function that will run every time the releases the mouse after the entity has been clicked. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
upFunction: function(e) {
e.spinX(random(360));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
upFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
enterFunction |
Function | void | a custom function that will run every time the mouse hovers over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
enterFunction: function(e) {
e.setScale(2,2,2);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
enterFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
leaveFunction |
Function | void | a custom function that will run every time the mouse stops hovering over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
leaveFunction: function(e) {
e.setScale(1,1,1);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
leaveFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
overFunction |
Function | void | a custom function that will run continually whenever the mouse is hovering over the entity. this function should be implemented to accept two arguments - the first is a reference to the entity that was clicked, and the second is an object that contains information about the interaction that just occured. example: let b = AFrameP5.Box({
overFunction: function(e, intersectionInfo) {
console.log(intersectionInfo);
}
});
intersectionInfo is an object that contains info about how the user is interacting with this entity. it contains the following properties:
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
overFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
tickFunction: function(e) {
e.setRed( random(255) );
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
tickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
AFrameP5.Torus(Object)
radius |
Number (float) | 1 | radius of the entity (in meters) |
radiusTubular |
Number (float) | 1 | radius of the tubular portion of the entity (in meters) |
segmentsRadial |
Number (integer) | 36 | number of segmented faces around the circumference of the torus. |
segmentsTubular |
Number (integer) | 18 | number of segments along the circumference of the tube face. a higher number means the tube will be more round. |
arc |
Number (integer) | 360 | central angle of the entity |
// sketch.js file
let world;
let torus;
function setup() {
// no canvas needed
noCanvas();
// create a new VR World object
world = new AFrameP5.World('VRScene');
// construct a new Torus
torus = new AFrameP5.Torus({
x:0,
y:2,
z:0,
red:0,
green:255,
blue:0
});
// add the Torus to the world
world.add(torus);
}
| Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
lookAtUser() : void |
Rotation | forces the entity to orient itself so that it is facing the user. |
getVisibility() : boolean |
Visibility | returns the current visibility state of the entity |
hide() : void |
Visibility | hides the entity by setting its visible property to false |
show() : void |
Visibility | shows the entity by setting its visible property to true |
toggleVisibility() : void |
Visibility | hides the entity if it is current visible and shows the entity if it is current hidden |
getScale() : Object |
Scale | returns the scale of the entity as an object (i.e. {x:0, y:0, z:0} |
getScaleX() : Number |
Scale | returns the x scale of the entity |
getScaleY() : Number |
Scale | returns the y scale of the entity |
getScaleZ() : Number |
Scale | returns the z scale of the entity |
setScale(x,y,z) : void |
Scale | sets the scale of the object in all axes |
setScaleX(x) : void |
Scale | sets the x scale of the object |
setScaleY(y) : void |
Scale | sets the y scale of the object |
setScaleZ(z) : void |
Scale | sets the z scale of the object |
getAsset() : String |
Material | returns the current id of the asset being used to texture this entity |
getBlue() : Number |
Material | returns the current blue color of the entity |
getGreen() : Number |
Material | returns the current green color of the entity |
getMetalness() : Number |
Material | returns the current metalness setting for the texture of the entity (range = 0.0 to 1.0) |
getOpacity() : Number |
Material | returns the current opacity of the entity |
getRed() : Number |
Material | returns the current red color of the entity |
setRoughness(Number) : void |
Material | sets the roughness for the texture of the entity (range = 0.0 to 1.0) |
getSide() : String |
Material | returns which faces of the entity will be textured (valid values are front, back and double) |
getTransparent() : boolean |
Material | returns the current transparency of the entity |
setAsset(String) : void |
Material | sets the id for the asset to texture this entity |
setColor(red, green, blue) : void |
Material | sets the color of the entity |
setBlue(blue) : void |
Material | sets the blue color of the entity |
setGreen(green) : void |
Material | sets the green color of the entity |
setMetalness(Number) : void |
Material | sets the metalness for the texture of the entity (range = 0.0 to 1.0) |
setOpacity(Number) : void |
Material | sets the opacity of the entity (range = 0.0 to 1.0) |
setRed(red) : void |
Material | sets the red color of the entity |
getRoughness() : Number |
Material | returns the current roughness setting for the texture of the entity (range = 0.0 to 1.0) |
setTransparent(boolean) : void |
Material | sets whether the entity supports transparent textures |
setSide(String) : void |
Material | sets which faces of the entity will be textured (valid values are front, back and double) |
add(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. alias for addChild. |
addChild(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
| Method | Category | Description |
getRadius() : Number |
Geometry | returns the current radius of the entity |
getRadiusTubular() : Number |
Geometry | returns the current radiusTubular of the entity |
getSegmentsRadial() : Number |
Geometry | returns the current segmentsRadial value for the entity |
getSegmentsTubular() : Number |
Geometry | returns the current segmentsTubular value for the entity |
getArc() : Number |
Geometry | returns the current arc value for the entity |
setRadius(Number) : void |
Geometry | sets the radius value for the entity |
changeRadius(Number) : void |
Geometry | updates the radius by the value provided (i.e. entity.changeRadius(0.1); will increase the radius by 0.1 meters. |
setRadiusTubular(Number) : void |
Geometry | sets the radiusTublar value for the entity |
setSegmentsRadial(Number) : void |
Geometry | sets the current segmentsRadial value for the entity |
setSegmentsTubular(Number) : void |
Geometry | sets the current segmentsTubular value for the entity |
setArc(Number) : void |
Geometry | sets the current arc value for the entity |
A torus three dimensional "pretzel" shape.
AFrameP5.TorusKnot(Object)
| Parameter | Data Type | Default | Description |
x |
Number (float) | 0 | x-position of the entity |
y |
Number (float) | 0 | y-position of the entity |
z |
Number (float) | 0 | z-position of the entity |
opacity |
Number (float) | 1.0 | how transparent this entity is (0.0 = fully transparent, 1.0 = fully opaque) |
transparent |
Boolean | false | whether the texture associated with this entity supports transparency (i.e. a PNG file with an alpha channel) |
shader |
String | 'standard' | the ThreeJS shader to use to render this entity - other valid value is flat |
side |
String | 'front' | which side of the entity should be set up with a visual material. default is the front of the entity - other valid values are back and double |
roughness |
Number (float) | 0.5 | how 'rough' the material appears. valid range = 0.0 to 1.0 |
metalness |
Number (float) | 0.1 | how 'metallic' the material appears. valid range = 0.0 to 1.0 |
red |
Number (integer) | 255 | how red the entity appears. valid range = 0 to 255 |
green |
Number (integer) | 255 | how green the entity appears. valid range = 0 to 255 |
blue |
Number (integer) | 255 | how blue the entity appears. valid range = 0 to 255 |
repeatX |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the x-axis of each face of the object. valid range = any positive number |
repeatY |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the y-axis of each face of the object. valid range = any positive number |
asset |
String | 'None' | the id (String) of the element that should be used as a texture for this entity. all textures should be set up in the 'index.html' file inside of the a-assets tag. |
scaleX |
Number (float) | 1.0 | the scale of the object in the x-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleY |
Number (float) | 1.0 | the scale of the object in the y-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleZ |
Number (float) | 1.0 | the scale of the object in the z-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
rotationX |
Number (float) | 0 | the rotation of the object along the x-axis. |
rotationY |
Number (float) | 0 | the rotation of the object along the y-axis. |
rotationZ |
Number (float) | 0 | the rotation of the object along the z-axis. |
visible |
Boolean | true | determines whether the entity is visible in the scene. |
dynamicTexture |
Boolean | false | sets whether the texture used on the entity is being drawn from a dynamically drawn canvas element. see these examples for more information: Dynamic textures, Multiple dynamic textures and Interactive dynamic textures |
dynamicTextureHeight |
Number | 0 | tells the entity the height of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
dynamicTextureWidth |
Number | 0 | tells the entity the width of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
customData |
Object | void | a custom object that can be used by the entity to keep track of user-specified data. example:
let b = new AFrameP5.Box({
customData: {
numClicks: 0
},
clickFunction: function(e) {
numClicks++;
console.log("This element has been clicked " + e.customData.numClicks + " times";
}
});
|
clickFunction |
Function | void | a custom function that will run every time the user clicks on the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
clickFunction: function(e) {
e.setRed(random(255));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
clickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
upFunction |
Function | void | a custom function that will run every time the releases the mouse after the entity has been clicked. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
upFunction: function(e) {
e.spinX(random(360));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
upFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
enterFunction |
Function | void | a custom function that will run every time the mouse hovers over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
enterFunction: function(e) {
e.setScale(2,2,2);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
enterFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
leaveFunction |
Function | void | a custom function that will run every time the mouse stops hovering over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
leaveFunction: function(e) {
e.setScale(1,1,1);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
leaveFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
overFunction |
Function | void | a custom function that will run continually whenever the mouse is hovering over the entity. this function should be implemented to accept two arguments - the first is a reference to the entity that was clicked, and the second is an object that contains information about the interaction that just occured. example: let b = AFrameP5.Box({
overFunction: function(e, intersectionInfo) {
console.log(intersectionInfo);
}
});
intersectionInfo is an object that contains info about how the user is interacting with this entity. it contains the following properties:
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
overFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
tickFunction: function(e) {
e.setRed( random(255) );
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
tickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
AFrameP5.TorusKnot(Object)
radius |
Number (float) | 1 | radius of the entity (in meters) |
radiusTubular |
Number (float) | 1 | radius of the tubular portion of the entity (in meters) |
segmentsRadial |
Number (integer) | 36 | number of segmented faces around the circumference of the torus. |
segmentsTubular |
Number (integer) | 18 | number of segments along the circumference of the tube face. a higher number means the tube will be more round. |
p |
Number (integer) | 2 | a number that helps define the pretzel shape. the particular shape of the pretzel is defined by a pair of coprime integers, p and q. If p and q are not coprime the result will be a torus link. |
q |
Number (integer) | 3 | a number that helps define the pretzel shape. the particular shape of the pretzel is defined by a pair of coprime integers, p and q. If p and q are not coprime the result will be a torus link. |
// sketch.js file
let world;
let torusKnot;
function setup() {
// no canvas needed
noCanvas();
// create a new VR World object
world = new AFrameP5.World('VRScene');
// construct a new TorusKnot
torusKnot = new AFrameP5.TorusKnot({
x:0,
y:2,
z:0,
red:0,
green:255,
blue:0
});
// add the TorusKnot to the world
world.add(torusKnot);
}
| Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
lookAtUser() : void |
Rotation | forces the entity to orient itself so that it is facing the user. |
getVisibility() : boolean |
Visibility | returns the current visibility state of the entity |
hide() : void |
Visibility | hides the entity by setting its visible property to false |
show() : void |
Visibility | shows the entity by setting its visible property to true |
toggleVisibility() : void |
Visibility | hides the entity if it is current visible and shows the entity if it is current hidden |
getScale() : Object |
Scale | returns the scale of the entity as an object (i.e. {x:0, y:0, z:0} |
getScaleX() : Number |
Scale | returns the x scale of the entity |
getScaleY() : Number |
Scale | returns the y scale of the entity |
getScaleZ() : Number |
Scale | returns the z scale of the entity |
setScale(x,y,z) : void |
Scale | sets the scale of the object in all axes |
setScaleX(x) : void |
Scale | sets the x scale of the object |
setScaleY(y) : void |
Scale | sets the y scale of the object |
setScaleZ(z) : void |
Scale | sets the z scale of the object |
getAsset() : String |
Material | returns the current id of the asset being used to texture this entity |
getBlue() : Number |
Material | returns the current blue color of the entity |
getGreen() : Number |
Material | returns the current green color of the entity |
getMetalness() : Number |
Material | returns the current metalness setting for the texture of the entity (range = 0.0 to 1.0) |
getOpacity() : Number |
Material | returns the current opacity of the entity |
getRed() : Number |
Material | returns the current red color of the entity |
setRoughness(Number) : void |
Material | sets the roughness for the texture of the entity (range = 0.0 to 1.0) |
getSide() : String |
Material | returns which faces of the entity will be textured (valid values are front, back and double) |
getTransparent() : boolean |
Material | returns the current transparency of the entity |
setAsset(String) : void |
Material | sets the id for the asset to texture this entity |
setColor(red, green, blue) : void |
Material | sets the color of the entity |
setBlue(blue) : void |
Material | sets the blue color of the entity |
setGreen(green) : void |
Material | sets the green color of the entity |
setMetalness(Number) : void |
Material | sets the metalness for the texture of the entity (range = 0.0 to 1.0) |
setOpacity(Number) : void |
Material | sets the opacity of the entity (range = 0.0 to 1.0) |
setRed(red) : void |
Material | sets the red color of the entity |
getRoughness() : Number |
Material | returns the current roughness setting for the texture of the entity (range = 0.0 to 1.0) |
setTransparent(boolean) : void |
Material | sets whether the entity supports transparent textures |
setSide(String) : void |
Material | sets which faces of the entity will be textured (valid values are front, back and double) |
add(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. alias for addChild. |
addChild(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
| Method | Category | Description |
getRadius() : Number |
Geometry | returns the current radius of the entity |
getRadiusTubular() : Number |
Geometry | returns the current radiusTubular of the entity |
getSegmentsRadial() : Number |
Geometry | returns the current segmentsRadial value for the entity |
getSegmentsTubular() : Number |
Geometry | returns the current segmentsTubular value for the entity |
getP() : Number |
Geometry | returns the current p value for the entity |
getQ() : Number |
Geometry | returns the current q value for the entity |
setRadius(Number) : void |
Geometry | sets the radius value for the entity |
changeRadius(Number) : void |
Geometry | updates the radius by the value provided (i.e. entity.changeRadius(0.1); will increase the radius by 0.1 meters. |
setRadiusTubular(Number) : void |
Geometry | sets the radiusTublar value for the entity |
setSegmentsRadial(Number) : void |
Geometry | sets the current segmentsRadial value for the entity |
setSegmentsTubular(Number) : void |
Geometry | sets the current segmentsTubular value for the entity |
setP(Number) : void |
Geometry | sets the current p value for the entity |
setQ(Number) : void |
Geometry | sets the current q value for the entity |
An empty "container" that can be used to hold other entities. Has no visual representation of its own.
AFrameP5.Container3D(Object)
| Parameter | Data Type | Default | Description |
x |
Number (float) | 0 | x-position of the entity |
y |
Number (float) | 0 | y-position of the entity |
z |
Number (float) | 0 | z-position of the entity |
opacity |
Number (float) | 1.0 | how transparent this entity is (0.0 = fully transparent, 1.0 = fully opaque) |
transparent |
Boolean | false | whether the texture associated with this entity supports transparency (i.e. a PNG file with an alpha channel) |
shader |
String | 'standard' | the ThreeJS shader to use to render this entity - other valid value is flat |
side |
String | 'front' | which side of the entity should be set up with a visual material. default is the front of the entity - other valid values are back and double |
roughness |
Number (float) | 0.5 | how 'rough' the material appears. valid range = 0.0 to 1.0 |
metalness |
Number (float) | 0.1 | how 'metallic' the material appears. valid range = 0.0 to 1.0 |
red |
Number (integer) | 255 | how red the entity appears. valid range = 0 to 255 |
green |
Number (integer) | 255 | how green the entity appears. valid range = 0 to 255 |
blue |
Number (integer) | 255 | how blue the entity appears. valid range = 0 to 255 |
repeatX |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the x-axis of each face of the object. valid range = any positive number |
repeatY |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the y-axis of each face of the object. valid range = any positive number |
asset |
String | 'None' | the id (String) of the element that should be used as a texture for this entity. all textures should be set up in the 'index.html' file inside of the a-assets tag. |
scaleX |
Number (float) | 1.0 | the scale of the object in the x-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleY |
Number (float) | 1.0 | the scale of the object in the y-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleZ |
Number (float) | 1.0 | the scale of the object in the z-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
rotationX |
Number (float) | 0 | the rotation of the object along the x-axis. |
rotationY |
Number (float) | 0 | the rotation of the object along the y-axis. |
rotationZ |
Number (float) | 0 | the rotation of the object along the z-axis. |
visible |
Boolean | true | determines whether the entity is visible in the scene. |
dynamicTexture |
Boolean | false | sets whether the texture used on the entity is being drawn from a dynamically drawn canvas element. see these examples for more information: Dynamic textures, Multiple dynamic textures and Interactive dynamic textures |
dynamicTextureHeight |
Number | 0 | tells the entity the height of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
dynamicTextureWidth |
Number | 0 | tells the entity the width of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
customData |
Object | void | a custom object that can be used by the entity to keep track of user-specified data. example:
let b = new AFrameP5.Box({
customData: {
numClicks: 0
},
clickFunction: function(e) {
numClicks++;
console.log("This element has been clicked " + e.customData.numClicks + " times";
}
});
|
clickFunction |
Function | void | a custom function that will run every time the user clicks on the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
clickFunction: function(e) {
e.setRed(random(255));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
clickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
upFunction |
Function | void | a custom function that will run every time the releases the mouse after the entity has been clicked. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
upFunction: function(e) {
e.spinX(random(360));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
upFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
enterFunction |
Function | void | a custom function that will run every time the mouse hovers over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
enterFunction: function(e) {
e.setScale(2,2,2);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
enterFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
leaveFunction |
Function | void | a custom function that will run every time the mouse stops hovering over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
leaveFunction: function(e) {
e.setScale(1,1,1);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
leaveFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
overFunction |
Function | void | a custom function that will run continually whenever the mouse is hovering over the entity. this function should be implemented to accept two arguments - the first is a reference to the entity that was clicked, and the second is an object that contains information about the interaction that just occured. example: let b = AFrameP5.Box({
overFunction: function(e, intersectionInfo) {
console.log(intersectionInfo);
}
});
intersectionInfo is an object that contains info about how the user is interacting with this entity. it contains the following properties:
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
overFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
tickFunction: function(e) {
e.setRed( random(255) );
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
tickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
AFrameP5.Container3D(Object)
No entity-specific constructor parameters
// sketch.js file
let world;
let container;
function setup() {
// no canvas needed
noCanvas();
// create a new VR World object
world = new AFrameP5.World('VRScene');
// construct a new Container
container = new AFrameP5.Container3D({
x:0,
y:2,
z:0
});
// add two boxes to the container
let b1 = new AFrameP5.Box({x:-2, red:255, green:0, blue:0});
let b2 = new AFrameP5.Box({x:2, red:0, green:0, blue:255});
container.addChild(b1);
container.addChild(b2);
// add the Container to the world
world.add(container);
}
// slowly rotate the container
function draw() {
container.spinY(1);
}
| Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
lookAtUser() : void |
Rotation | forces the entity to orient itself so that it is facing the user. |
getVisibility() : boolean |
Visibility | returns the current visibility state of the entity |
hide() : void |
Visibility | hides the entity by setting its visible property to false |
show() : void |
Visibility | shows the entity by setting its visible property to true |
toggleVisibility() : void |
Visibility | hides the entity if it is current visible and shows the entity if it is current hidden |
getScale() : Object |
Scale | returns the scale of the entity as an object (i.e. {x:0, y:0, z:0} |
getScaleX() : Number |
Scale | returns the x scale of the entity |
getScaleY() : Number |
Scale | returns the y scale of the entity |
getScaleZ() : Number |
Scale | returns the z scale of the entity |
setScale(x,y,z) : void |
Scale | sets the scale of the object in all axes |
setScaleX(x) : void |
Scale | sets the x scale of the object |
setScaleY(y) : void |
Scale | sets the y scale of the object |
setScaleZ(z) : void |
Scale | sets the z scale of the object |
getAsset() : String |
Material | returns the current id of the asset being used to texture this entity |
getBlue() : Number |
Material | returns the current blue color of the entity |
getGreen() : Number |
Material | returns the current green color of the entity |
getMetalness() : Number |
Material | returns the current metalness setting for the texture of the entity (range = 0.0 to 1.0) |
getOpacity() : Number |
Material | returns the current opacity of the entity |
getRed() : Number |
Material | returns the current red color of the entity |
setRoughness(Number) : void |
Material | sets the roughness for the texture of the entity (range = 0.0 to 1.0) |
getSide() : String |
Material | returns which faces of the entity will be textured (valid values are front, back and double) |
getTransparent() : boolean |
Material | returns the current transparency of the entity |
setAsset(String) : void |
Material | sets the id for the asset to texture this entity |
setColor(red, green, blue) : void |
Material | sets the color of the entity |
setBlue(blue) : void |
Material | sets the blue color of the entity |
setGreen(green) : void |
Material | sets the green color of the entity |
setMetalness(Number) : void |
Material | sets the metalness for the texture of the entity (range = 0.0 to 1.0) |
setOpacity(Number) : void |
Material | sets the opacity of the entity (range = 0.0 to 1.0) |
setRed(red) : void |
Material | sets the red color of the entity |
getRoughness() : Number |
Material | returns the current roughness setting for the texture of the entity (range = 0.0 to 1.0) |
setTransparent(boolean) : void |
Material | sets whether the entity supports transparent textures |
setSide(String) : void |
Material | sets which faces of the entity will be textured (valid values are front, back and double) |
add(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. alias for addChild. |
addChild(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
No entity-specific methods
A Wavefront 3D model (.OBJ file format)
AFrameP5.OBJ(Object)
| Parameter | Data Type | Default | Description |
x |
Number (float) | 0 | x-position of the entity |
y |
Number (float) | 0 | y-position of the entity |
z |
Number (float) | 0 | z-position of the entity |
opacity |
Number (float) | 1.0 | how transparent this entity is (0.0 = fully transparent, 1.0 = fully opaque) |
transparent |
Boolean | false | whether the texture associated with this entity supports transparency (i.e. a PNG file with an alpha channel) |
shader |
String | 'standard' | the ThreeJS shader to use to render this entity - other valid value is flat |
side |
String | 'front' | which side of the entity should be set up with a visual material. default is the front of the entity - other valid values are back and double |
roughness |
Number (float) | 0.5 | how 'rough' the material appears. valid range = 0.0 to 1.0 |
metalness |
Number (float) | 0.1 | how 'metallic' the material appears. valid range = 0.0 to 1.0 |
red |
Number (integer) | 255 | how red the entity appears. valid range = 0 to 255 |
green |
Number (integer) | 255 | how green the entity appears. valid range = 0 to 255 |
blue |
Number (integer) | 255 | how blue the entity appears. valid range = 0 to 255 |
repeatX |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the x-axis of each face of the object. valid range = any positive number |
repeatY |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the y-axis of each face of the object. valid range = any positive number |
asset |
String | 'None' | the id (String) of the element that should be used as a texture for this entity. all textures should be set up in the 'index.html' file inside of the a-assets tag. |
scaleX |
Number (float) | 1.0 | the scale of the object in the x-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleY |
Number (float) | 1.0 | the scale of the object in the y-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleZ |
Number (float) | 1.0 | the scale of the object in the z-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
rotationX |
Number (float) | 0 | the rotation of the object along the x-axis. |
rotationY |
Number (float) | 0 | the rotation of the object along the y-axis. |
rotationZ |
Number (float) | 0 | the rotation of the object along the z-axis. |
visible |
Boolean | true | determines whether the entity is visible in the scene. |
dynamicTexture |
Boolean | false | sets whether the texture used on the entity is being drawn from a dynamically drawn canvas element. see these examples for more information: Dynamic textures, Multiple dynamic textures and Interactive dynamic textures |
dynamicTextureHeight |
Number | 0 | tells the entity the height of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
dynamicTextureWidth |
Number | 0 | tells the entity the width of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
customData |
Object | void | a custom object that can be used by the entity to keep track of user-specified data. example:
let b = new AFrameP5.Box({
customData: {
numClicks: 0
},
clickFunction: function(e) {
numClicks++;
console.log("This element has been clicked " + e.customData.numClicks + " times";
}
});
|
clickFunction |
Function | void | a custom function that will run every time the user clicks on the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
clickFunction: function(e) {
e.setRed(random(255));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
clickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
upFunction |
Function | void | a custom function that will run every time the releases the mouse after the entity has been clicked. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
upFunction: function(e) {
e.spinX(random(360));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
upFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
enterFunction |
Function | void | a custom function that will run every time the mouse hovers over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
enterFunction: function(e) {
e.setScale(2,2,2);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
enterFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
leaveFunction |
Function | void | a custom function that will run every time the mouse stops hovering over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
leaveFunction: function(e) {
e.setScale(1,1,1);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
leaveFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
overFunction |
Function | void | a custom function that will run continually whenever the mouse is hovering over the entity. this function should be implemented to accept two arguments - the first is a reference to the entity that was clicked, and the second is an object that contains information about the interaction that just occured. example: let b = AFrameP5.Box({
overFunction: function(e, intersectionInfo) {
console.log(intersectionInfo);
}
});
intersectionInfo is an object that contains info about how the user is interacting with this entity. it contains the following properties:
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
overFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
tickFunction: function(e) {
e.setRed( random(255) );
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
tickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
AFrameP5.OBJ(Object)
asset |
String | undefined | the id of the element in your HTML file that points to the OBJ file you wish to load. this element must be a a-asset-item tag included under the a-assets tag. see the example program below for more information. |
mtl |
String | undefined | the id of the material file that should be used to texture the OBJ geometry file. this element must be a a-asset-item tag included under the a-assets tag. see the example program below for more information. |
// sketch.js file
let world;
let pikachuModel;
function setup() {
// no canvas needed
noCanvas();
// create a new VR World object
world = new AFrameP5.World('VRScene');
// add a Wavefront (OBJ) model
// you need to make sure to reference the ids of both the OBJ and MTL files here
// these need to be loaded in your 'index.html' file inside of the
// 'a-assets' tag
pikachuModel = new AFrameP5.OBJ({
asset: 'pika_obj',
mtl: 'pika_mtl',
x: 5,
y: 4,
z: 0,
rotationX:180,
scaleX:8,
scaleY:8,
scaleZ:8,
});
world.add(pikachuModel);
}
<!-- index.html file -->
<body>
<a-scene id="VRScene">
<a-assets id="VRAssets">
<a-asset-item id="pika_obj" src="images/Model.obj"></a-asset-item>
<a-asset-item id="pika_mtl" src="images/Model.mtl"></a-asset-item>
</a-assets>
</a-scene id="VRScene">
</body>
| Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
lookAtUser() : void |
Rotation | forces the entity to orient itself so that it is facing the user. |
getVisibility() : boolean |
Visibility | returns the current visibility state of the entity |
hide() : void |
Visibility | hides the entity by setting its visible property to false |
show() : void |
Visibility | shows the entity by setting its visible property to true |
toggleVisibility() : void |
Visibility | hides the entity if it is current visible and shows the entity if it is current hidden |
getScale() : Object |
Scale | returns the scale of the entity as an object (i.e. {x:0, y:0, z:0} |
getScaleX() : Number |
Scale | returns the x scale of the entity |
getScaleY() : Number |
Scale | returns the y scale of the entity |
getScaleZ() : Number |
Scale | returns the z scale of the entity |
setScale(x,y,z) : void |
Scale | sets the scale of the object in all axes |
setScaleX(x) : void |
Scale | sets the x scale of the object |
setScaleY(y) : void |
Scale | sets the y scale of the object |
setScaleZ(z) : void |
Scale | sets the z scale of the object |
getAsset() : String |
Material | returns the current id of the asset being used to texture this entity |
getBlue() : Number |
Material | returns the current blue color of the entity |
getGreen() : Number |
Material | returns the current green color of the entity |
getMetalness() : Number |
Material | returns the current metalness setting for the texture of the entity (range = 0.0 to 1.0) |
getOpacity() : Number |
Material | returns the current opacity of the entity |
getRed() : Number |
Material | returns the current red color of the entity |
setRoughness(Number) : void |
Material | sets the roughness for the texture of the entity (range = 0.0 to 1.0) |
getSide() : String |
Material | returns which faces of the entity will be textured (valid values are front, back and double) |
getTransparent() : boolean |
Material | returns the current transparency of the entity |
setAsset(String) : void |
Material | sets the id for the asset to texture this entity |
setColor(red, green, blue) : void |
Material | sets the color of the entity |
setBlue(blue) : void |
Material | sets the blue color of the entity |
setGreen(green) : void |
Material | sets the green color of the entity |
setMetalness(Number) : void |
Material | sets the metalness for the texture of the entity (range = 0.0 to 1.0) |
setOpacity(Number) : void |
Material | sets the opacity of the entity (range = 0.0 to 1.0) |
setRed(red) : void |
Material | sets the red color of the entity |
getRoughness() : Number |
Material | returns the current roughness setting for the texture of the entity (range = 0.0 to 1.0) |
setTransparent(boolean) : void |
Material | sets whether the entity supports transparent textures |
setSide(String) : void |
Material | sets which faces of the entity will be textured (valid values are front, back and double) |
add(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. alias for addChild. |
addChild(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
No entity-specific methods
A Graphics Language Transmission Format 3D model (.GLTF file format)
AFrameP5.GLTF(Object)
| Parameter | Data Type | Default | Description |
x |
Number (float) | 0 | x-position of the entity |
y |
Number (float) | 0 | y-position of the entity |
z |
Number (float) | 0 | z-position of the entity |
opacity |
Number (float) | 1.0 | how transparent this entity is (0.0 = fully transparent, 1.0 = fully opaque) |
transparent |
Boolean | false | whether the texture associated with this entity supports transparency (i.e. a PNG file with an alpha channel) |
shader |
String | 'standard' | the ThreeJS shader to use to render this entity - other valid value is flat |
side |
String | 'front' | which side of the entity should be set up with a visual material. default is the front of the entity - other valid values are back and double |
roughness |
Number (float) | 0.5 | how 'rough' the material appears. valid range = 0.0 to 1.0 |
metalness |
Number (float) | 0.1 | how 'metallic' the material appears. valid range = 0.0 to 1.0 |
red |
Number (integer) | 255 | how red the entity appears. valid range = 0 to 255 |
green |
Number (integer) | 255 | how green the entity appears. valid range = 0 to 255 |
blue |
Number (integer) | 255 | how blue the entity appears. valid range = 0 to 255 |
repeatX |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the x-axis of each face of the object. valid range = any positive number |
repeatY |
Number (integer) | 1 | how many times to repeat the texture associated with the entity along the y-axis of each face of the object. valid range = any positive number |
asset |
String | 'None' | the id (String) of the element that should be used as a texture for this entity. all textures should be set up in the 'index.html' file inside of the a-assets tag. |
scaleX |
Number (float) | 1.0 | the scale of the object in the x-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleY |
Number (float) | 1.0 | the scale of the object in the y-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleZ |
Number (float) | 1.0 | the scale of the object in the z-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
rotationX |
Number (float) | 0 | the rotation of the object along the x-axis. |
rotationY |
Number (float) | 0 | the rotation of the object along the y-axis. |
rotationZ |
Number (float) | 0 | the rotation of the object along the z-axis. |
visible |
Boolean | true | determines whether the entity is visible in the scene. |
dynamicTexture |
Boolean | false | sets whether the texture used on the entity is being drawn from a dynamically drawn canvas element. see these examples for more information: Dynamic textures, Multiple dynamic textures and Interactive dynamic textures |
dynamicTextureHeight |
Number | 0 | tells the entity the height of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
dynamicTextureWidth |
Number | 0 | tells the entity the width of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
customData |
Object | void | a custom object that can be used by the entity to keep track of user-specified data. example:
let b = new AFrameP5.Box({
customData: {
numClicks: 0
},
clickFunction: function(e) {
numClicks++;
console.log("This element has been clicked " + e.customData.numClicks + " times";
}
});
|
clickFunction |
Function | void | a custom function that will run every time the user clicks on the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
clickFunction: function(e) {
e.setRed(random(255));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
clickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
upFunction |
Function | void | a custom function that will run every time the releases the mouse after the entity has been clicked. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
upFunction: function(e) {
e.spinX(random(360));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
upFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
enterFunction |
Function | void | a custom function that will run every time the mouse hovers over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
enterFunction: function(e) {
e.setScale(2,2,2);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
enterFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
leaveFunction |
Function | void | a custom function that will run every time the mouse stops hovering over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
leaveFunction: function(e) {
e.setScale(1,1,1);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
leaveFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
overFunction |
Function | void | a custom function that will run continually whenever the mouse is hovering over the entity. this function should be implemented to accept two arguments - the first is a reference to the entity that was clicked, and the second is an object that contains information about the interaction that just occured. example: let b = AFrameP5.Box({
overFunction: function(e, intersectionInfo) {
console.log(intersectionInfo);
}
});
intersectionInfo is an object that contains info about how the user is interacting with this entity. it contains the following properties:
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
overFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
tickFunction: function(e) {
e.setRed( random(255) );
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
tickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
AFrameP5.GLTF(Object)
asset |
String | undefined | the id of the element in your HTML file that points to the GLTF file you wish to load. this element must be a a-asset-item tag included under the a-assets tag. see the example program below for more information. |
// sketch.js file
let world;
let dogModel;
function setup() {
// no canvas needed
noCanvas();
// create a new VR World object
world = new AFrameP5.World('VRScene');
// add a GLTF model
// you need to make sure to reference id of the GLTF file here
// this need to be loaded in your 'index.html' file inside of the
// 'a-assets' tag
dogModel = new AFrameP5.GLTF({
asset: 'dog',
x: 5,
y: 4,
z: 0,
rotationX:180,
scaleX:8,
scaleY:8,
scaleZ:8,
});
world.add(dogModel);
}
<!-- index.html file -->
<body>
<a-scene id="VRScene">
<a-assets id="VRAssets">
<a-asset-item id="dog" src="images/scene.gltf"></a-asset-item>
</a-assets>
</a-scene id="VRScene">
</body>
| Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
lookAtUser() : void |
Rotation | forces the entity to orient itself so that it is facing the user. |
getVisibility() : boolean |
Visibility | returns the current visibility state of the entity |
hide() : void |
Visibility | hides the entity by setting its visible property to false |
show() : void |
Visibility | shows the entity by setting its visible property to true |
toggleVisibility() : void |
Visibility | hides the entity if it is current visible and shows the entity if it is current hidden |
getScale() : Object |
Scale | returns the scale of the entity as an object (i.e. {x:0, y:0, z:0} |
getScaleX() : Number |
Scale | returns the x scale of the entity |
getScaleY() : Number |
Scale | returns the y scale of the entity |
getScaleZ() : Number |
Scale | returns the z scale of the entity |
setScale(x,y,z) : void |
Scale | sets the scale of the object in all axes |
setScaleX(x) : void |
Scale | sets the x scale of the object |
setScaleY(y) : void |
Scale | sets the y scale of the object |
setScaleZ(z) : void |
Scale | sets the z scale of the object |
getAsset() : String |
Material | returns the current id of the asset being used to texture this entity |
getBlue() : Number |
Material | returns the current blue color of the entity |
getGreen() : Number |
Material | returns the current green color of the entity |
getMetalness() : Number |
Material | returns the current metalness setting for the texture of the entity (range = 0.0 to 1.0) |
getOpacity() : Number |
Material | returns the current opacity of the entity |
getRed() : Number |
Material | returns the current red color of the entity |
setRoughness(Number) : void |
Material | sets the roughness for the texture of the entity (range = 0.0 to 1.0) |
getSide() : String |
Material | returns which faces of the entity will be textured (valid values are front, back and double) |
getTransparent() : boolean |
Material | returns the current transparency of the entity |
setAsset(String) : void |
Material | sets the id for the asset to texture this entity |
setColor(red, green, blue) : void |
Material | sets the color of the entity |
setBlue(blue) : void |
Material | sets the blue color of the entity |
setGreen(green) : void |
Material | sets the green color of the entity |
setMetalness(Number) : void |
Material | sets the metalness for the texture of the entity (range = 0.0 to 1.0) |
setOpacity(Number) : void |
Material | sets the opacity of the entity (range = 0.0 to 1.0) |
setRed(red) : void |
Material | sets the red color of the entity |
getRoughness() : Number |
Material | returns the current roughness setting for the texture of the entity (range = 0.0 to 1.0) |
setTransparent(boolean) : void |
Material | sets whether the entity supports transparent textures |
setSide(String) : void |
Material | sets which faces of the entity will be textured (valid values are front, back and double) |
add(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. alias for addChild. |
addChild(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
No entity-specific methods
A large 'sky sphere' that surrounds the user. The sphere is textured using a specially prepared equirectangular image that provides a 360 display.
AFrameP5.Sky(Object)
radius |
Number (float) | 500 | radius of the sky sphere (in meters) |
asset |
String | 'None' | the id (String) of the element that should be used as a texture for this entity. all textures should be set up in the 'index.html' file inside of the a-assets tag. note that images used on a sky sphere should be 'equirectangular' in nature - a standard rectangular image will appear distorted if projected onto a sphere. |
dynamicTexture |
Boolean | false | sets whether the texture used on the entity is being drawn from a dynamically drawn canvas element. see these examples for more information: Dynamic textures, Multiple dynamic textures and Interactive dynamic textures |
dynamicTextureHeight |
Number | 0 | tells the entity the height of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
dynamicTextureWidth |
Number | 0 | tells the entity the width of a dynamic texture. this is used when computing intersection points with the entity and allows you to know the 2D position on the texture where the user is touching. this property must be used along with dynamicTexture and dynamicTextureHeight For more information see this example:
Interactive dynamic textures
|
// sketch.js file
// variable to hold a reference to our A-Frame world
let world;
function setup() {
// no canvas needed
noCanvas();
// construct the A-Frame world
// this function requires a reference to the ID of the 'a-scene' tag in our HTML document
world = new AFrameP5.World('VRScene');
// create a new 'sky' entity - this functions as a huge sphere (500 meter radius) that
// is wrapped using an 'equirectangular' image (simliar to a "mercator projection" for a map)
// the image is loaded in the 'index.html' file
let sky = new AFrameP5.Sky({
asset: 'sky1'
});
world.add(sky);
}
<!-- index.html file -->
<body>
<a-scene id="VRScene">
<a-assets id="VRAssets">
<img id="sky1" src="images/equirectangular_image.jpg"><
</a-assets>
</a-scene id="VRScene">
</body>
| Method | Category | Description |
getRadius() : Number |
Geometry | returns the current radius of the entity |
setRadius(Number) : void |
Geometry | sets the radius of the entity |
changeRadius(Number) : void |
Geometry | updates the radius by the value provided (i.e. entity.changeRadius(0.1); will increase the radius by 0.1 meters. |
getAsset() : String |
Material | returns the current id of the asset being used to texture this entity |
setAsset(String) : void |
Material | sets the id for the asset to texture this entity |
A 2D entity that renders arbitrary text.
AFrameP5.Text(Object)
text |
String | "" | the text to display |
textAlign |
String | "center" | text alignment - accepted values are "center", "left" and "right" |
font |
String | "roboto" | font to render text, either the name of one of A-Frame’s stock fonts or a URL to a font file. |
red |
Number (integer) | 128 | how red the entity appears. valid range = 0 to 255 |
green |
Number (integer) | 128 | how green the entity appears. valid range = 0 to 255 |
blue |
Number (integer) | 128 | how blue the entity appears. valid range = 0 to 255 |
side |
String | 'front' | which side of the entity should be set up with a visual material. default is the front of the entity - other valid values are back and double |
opacity |
Number (float) | 1.0 | how transparent this entity is (0.0 = fully transparent, 1.0 = fully opaque) |
x |
Number (float) | 0 | x-position of the entity |
y |
Number (float) | 0 | y-position of the entity |
z |
Number (float) | 0 | z-position of the entity |
side |
String | 'front' | which side of the entity should be set up with a visual material. default is the front of the entity - other valid values are back and double |
scaleX |
Number (float) | 1.0 | the scale of the object in the x-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleY |
Number (float) | 1.0 | the scale of the object in the y-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
scaleZ |
Number (float) | 1.0 | the scale of the object in the z-axis. 1.0 means normal size - numbers smaller than 1.0 represent a smaller object (i.e. 0.5 means 50% of normal size). numbers larger than 1.0 represent a larger object (i.e. 2.0 means 200% of normal size). |
rotationX |
Number (float) | 0 | the rotation of the object along the x-axis. |
rotationY |
Number (float) | 0 | the rotation of the object along the y-axis. |
rotationZ |
Number (float) | 0 | the rotation of the object along the z-axis. |
visible |
Boolean | true | determines whether the entity is visible in the scene. |
customData |
Object | void | a custom object that can be used by the entity to keep track of user-specified data. example:
let b = new AFrameP5.Box({
customData: {
numClicks: 0
},
clickFunction: function(e) {
numClicks++;
console.log("This element has been clicked " + e.customData.numClicks + " times";
}
});
|
clickFunction |
Function | void | a custom function that will run every time the user clicks on the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
clickFunction: function(e) {
e.setRed(random(255));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
clickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
upFunction |
Function | void | a custom function that will run every time the releases the mouse after the entity has been clicked. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
upFunction: function(e) {
e.spinX(random(360));
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
upFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
enterFunction |
Function | void | a custom function that will run every time the mouse hovers over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
enterFunction: function(e) {
e.setScale(2,2,2);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
enterFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
leaveFunction |
Function | void | a custom function that will run every time the mouse stops hovering over the entity. this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
leaveFunction: function(e) {
e.setScale(1,1,1);
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
leaveFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
overFunction |
Function | void | a custom function that will run continually whenever the mouse is hovering over the entity. this function should be implemented to accept two arguments - the first is a reference to the entity that was clicked, and the second is an object that contains information about the interaction that just occured. example: let b = AFrameP5.Box({
overFunction: function(e, intersectionInfo) {
console.log(intersectionInfo);
}
});
intersectionInfo is an object that contains info about how the user is interacting with this entity. it contains the following properties:
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
overFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = new AFrameP5.Box({
tickFunction: function(e) {
e.setRed( random(255) );
}
});
as with the other interaction handler functions, this this function can access the customData property of the entity if desired. example: let b = new AFrameP5.Box({
customData: {
currentRed: 0,
colorChangeSpeed: 1
},
tickFunction: function(e) {
e.customData.currentRed += e.customData.colorChangeSpeed;
if (e.customData.currentRed >= 255 || e.customData.currentRed <= 0) {
e.customData.colorChangeSpeed *= -1;
}
e.setRed( e.customData.currentRed );
}
});
|
// sketch.js file
// variable to hold a reference to our A-Frame world
let world;
function setup() {
// no canvas needed
noCanvas();
// construct the A-Frame world
// this function requires a reference to the ID of the 'a-scene' tag in our HTML document
world = new AFrameP5.World('VRScene');
// text primitive
// you can select a font from one on this list: https://aframe.io/docs/1.2.0/components/text.html#stock-fonts
// note that you can increase the text size using the 'scale' property
let text = new AFrameP5.Text({
text: 'Hello, World!',
red: 128, green: 128, blue: 128,
side: 'double',
x: 0, y: 2, z: 0,
scaleX: 5, scaleY: 5, scaleZ: 5
});
world.add(text);
}
| Method | Category | Description |
setText(String) : void |
Text | sets the text to display for this entity |
getText() : String |
Text | returns the current text being displayed by this entity |
setFont(String) : void |
Text | sets the font being used by this entity. can be either the name of one of A-Frame’s stock fonts or a URL to a font file. |
getFont() : String |
Text | returns the current font being used by this entity. can be either the name of one of A-Frame’s stock fonts or a URL to a font file. |
setTextAlign(String) : void |
Text | sets the alignment of the text ('center', 'left' or 'right') |
getText() : String |
Text | returns the current alignment of the text ('center', 'left' or 'right') |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
getVisibility() : boolean |
Visibility | returns the current visibility state of the entity |
hide() : void |
Visibility | hides the entity by setting its visible property to false |
show() : void |
Visibility | shows the entity by setting its visible property to true |
toggleVisibility() : void |
Visibility | hides the entity if it is current visible and shows the entity if it is current hidden |
getScale() : Object |
Scale | returns the scale of the entity as an object (i.e. {x:0, y:0, z:0} |
getScaleX() : Number |
Scale | returns the x scale of the entity |
getScaleY() : Number |
Scale | returns the y scale of the entity |
getScaleZ() : Number |
Scale | returns the z scale of the entity |
setScale(x,y,z) : void |
Scale | sets the scale of the object in all axes |
setScaleX(x) : void |
Scale | sets the x scale of the object |
setScaleY(y) : void |
Scale | sets the y scale of the object |
setScaleZ(z) : void |
Scale | sets the z scale of the object |
getRed() : Number |
Material | returns the current red color of the entity |
getBlue() : Number |
Material | returns the current blue color of the entity |
getGreen() : Number |
Material | returns the current green color of the entity |
getOpacity() : Number |
Material | returns the current opacity of the entity |
getSide() : String |
Material | returns which faces of the entity will be textured (valid values are front, back and double) |
setColor(red, green, blue) : void |
Material | sets the color of the entity |
setRed(red) : void |
Material | sets the red color of the entity |
setBlue(blue) : void |
Material | sets the blue color of the entity |
setGreen(green) : void |
Material | sets the green color of the entity |
setOpacity(Number) : void |
Material | sets the opacity of the entity (range = 0.0 to 1.0) |
setSide(String) : void |
Material | sets which faces of the entity will be textured (valid values are front, back and double) |
add(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. alias for addChild. |
addChild(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the new entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
Copyright 2017-2024 Craig Kapp
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.