A-Frame P5

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.

Latest Stable Version & CDN Link

Version 2.3 (latest stable release, 2024)

Legacy Versions & CDN Links

Version 2.2 (legacy release, 2023)

Version 2.1 (legacy release, 2021)

Getting Started (A-Frame P5 version 2.3)

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 loaded

Once 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:

Scene & Asset Management

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.

Coordinate System

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!)

Navigation

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:

  • Listen for when the mouse/VR Trigger is down and move the user forward using their current heading. This method is shown in the Basic mouse movement demo.
  • Set up interaction events (i.e. click/touch events on particular objects) and then reposition the user using a method such as teleportToObject, setUserPosition and slideToObject - this method is shown in the Click to move interaction demo.
  • Use the buttons on a VR controller. A demo of this can be found here (tested on the Oculus Quest line of devices)

Deploying to VR

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.

Library Documentation

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.


Class: World

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.

+ Constructor

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.

+ Example

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>

+ Methods

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).

+ VR Controller Methods

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

Class: Box (entity)

Used to construct a six-faced box entity.

+ Constructor Parameters (common to all entities)

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:
  • distance : a float describing how far away the user is
  • point3d : an object with three properties (x, y & z) describing where the user is touching the entity
  • point2d : an object with two properites (x & y) describing where the user is touching the entity in 2D space (useful for determining where on a dynamic canvas the user is touching)
  • uv : an object with two properies (x & y) describing the raw textural offset (used to compute point2d)
For an example please see the Interactive dynamic textures sample program.

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 ); 
   }
});

+ Constructor Parameters (specific to this class)

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)

+ Example

// 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);
}

+ Methods (common to all entities)

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.

+ Methods (specific to this class)

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

Class: Plane (entity)

Used to construct a flat two dimensional plane entity.

+ Constructor Parameters (common to all entities)

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:
  • distance : a float describing how far away the user is
  • point3d : an object with three properties (x, y & z) describing where the user is touching the entity
  • point2d : an object with two properites (x & y) describing where the user is touching the entity in 2D space (useful for determining where on a dynamic canvas the user is touching)
  • uv : an object with two properies (x & y) describing the raw textural offset (used to compute point2d)
For an example please see the Interactive dynamic textures sample program.

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 ); 
   }
});

+ Constructor Parameters (specific to this class)

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)

+ Example

// 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);
}

+ Methods (common to all entities)

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.

+ Methods (specific to this class)

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

Class: Circle (entity)

Used to construct a flat two dimensional circular entity.

+ Constructor Parameters (common to all entities)

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:
  • distance : a float describing how far away the user is
  • point3d : an object with three properties (x, y & z) describing where the user is touching the entity
  • point2d : an object with two properites (x & y) describing where the user is touching the entity in 2D space (useful for determining where on a dynamic canvas the user is touching)
  • uv : an object with two properies (x & y) describing the raw textural offset (used to compute point2d)
For an example please see the Interactive dynamic textures sample program.

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 ); 
   }
});

+ Constructor Parameters (specific to this class)

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.

+ Example

// 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);
}

+ Methods (common to all entities)

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.

+ Methods (specific to this class)

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

Class: Ring (entity)

Used to construct a flat two dimensional ring entity.

+ Constructor Parameters (common to all entities)

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:
  • distance : a float describing how far away the user is
  • point3d : an object with three properties (x, y & z) describing where the user is touching the entity
  • point2d : an object with two properites (x & y) describing where the user is touching the entity in 2D space (useful for determining where on a dynamic canvas the user is touching)
  • uv : an object with two properies (x & y) describing the raw textural offset (used to compute point2d)
For an example please see the Interactive dynamic textures sample program.

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 ); 
   }
});

+ Constructor Parameters (specific to this class)

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)

+ Example

// 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);
}

+ Methods (common to all entities)

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.

+ Methods (specific to this class)

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

Class: Sphere (entity)

Used to construct a three dimensional spherical entity.

+ Constructor Parameters (common to all entities)

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:
  • distance : a float describing how far away the user is
  • point3d : an object with three properties (x, y & z) describing where the user is touching the entity
  • point2d : an object with two properites (x & y) describing where the user is touching the entity in 2D space (useful for determining where on a dynamic canvas the user is touching)
  • uv : an object with two properies (x & y) describing the raw textural offset (used to compute point2d)
For an example please see the Interactive dynamic textures sample program.

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 ); 
   }
});

+ Constructor Parameters (specific to this class)

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)

+ Example

// 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);
}

+ Methods (common to all entities)

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.

+ Methods (specific to this class)

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

Class: Cone (entity)

Used to construct a three dimensional conical entity.

+ Constructor Parameters (common to all entities)

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:
  • distance : a float describing how far away the user is
  • point3d : an object with three properties (x, y & z) describing where the user is touching the entity
  • point2d : an object with two properites (x & y) describing where the user is touching the entity in 2D space (useful for determining where on a dynamic canvas the user is touching)
  • uv : an object with two properies (x & y) describing the raw textural offset (used to compute point2d)
For an example please see the Interactive dynamic textures sample program.

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 ); 
   }
});

+ Constructor Parameters (specific to this class)

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)

+ Example

// 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);
}

+ Methods (common to all entities)

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.

+ Methods (specific to this class)

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

Class: Cylinder (entity)

Used to construct a three dimensional cylindrical entity.

+ Constructor Parameters (common to all entities)

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:
  • distance : a float describing how far away the user is
  • point3d : an object with three properties (x, y & z) describing where the user is touching the entity
  • point2d : an object with two properites (x & y) describing where the user is touching the entity in 2D space (useful for determining where on a dynamic canvas the user is touching)
  • uv : an object with two properies (x & y) describing the raw textural offset (used to compute point2d)
For an example please see the Interactive dynamic textures sample program.

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 ); 
   }
});

+ Constructor Parameters (specific to this class)

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)

+ Example

// 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);
}

+ Methods (common to all entities)

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.

+ Methods (specific to this class)

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

Class: Dodecahedron (entity)

Used to construct a three dimensional 12-sided entity.

+ Constructor Parameters (common to all entities)

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:
  • distance : a float describing how far away the user is
  • point3d : an object with three properties (x, y & z) describing where the user is touching the entity
  • point2d : an object with two properites (x & y) describing where the user is touching the entity in 2D space (useful for determining where on a dynamic canvas the user is touching)
  • uv : an object with two properies (x & y) describing the raw textural offset (used to compute point2d)
For an example please see the Interactive dynamic textures sample program.

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 ); 
   }
});

+ Constructor Parameters (specific to this class)

AFrameP5.Dodecahedron(Object)

radius Number (float) 1 radius of the entity (in meters)

+ Example

// 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);
}

+ Methods (common to all entities)

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.

+ Methods (specific to this class)

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.

Class: Octahedron (entity)

Used to construct a three dimensional 8-sided entity.

+ Constructor Parameters (common to all entities)

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:
  • distance : a float describing how far away the user is
  • point3d : an object with three properties (x, y & z) describing where the user is touching the entity
  • point2d : an object with two properites (x & y) describing where the user is touching the entity in 2D space (useful for determining where on a dynamic canvas the user is touching)
  • uv : an object with two properies (x & y) describing the raw textural offset (used to compute point2d)
For an example please see the Interactive dynamic textures sample program.

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 ); 
   }
});

+ Constructor Parameters (specific to this class)

AFrameP5.Octahedron(Object)

radius Number (float) 1 radius of the entity (in meters)

+ Example

// 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);
}

+ Methods (common to all entities)

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.

+ Methods (specific to this class)

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.

Class: Tetrahedron (entity)

Used to construct a three dimensional 4-sided entity.

+ Constructor Parameters (common to all entities)

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:
  • distance : a float describing how far away the user is
  • point3d : an object with three properties (x, y & z) describing where the user is touching the entity
  • point2d : an object with two properites (x & y) describing where the user is touching the entity in 2D space (useful for determining where on a dynamic canvas the user is touching)
  • uv : an object with two properies (x & y) describing the raw textural offset (used to compute point2d)
For an example please see the Interactive dynamic textures sample program.

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 ); 
   }
});

+ Constructor Parameters (specific to this class)

AFrameP5.Tetrahedron(Object)

radius Number (float) 1 radius of the entity (in meters)

+ Example

// 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);
}

+ Methods (common to all entities)

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.

+ Methods (specific to this class)

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.

Class: Torus (entity)

A torus is a surface of revolution generated by revolving a circle in three-dimensional space about an axis coplanar with the circle.

+ Constructor Parameters (common to all entities)

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:
  • distance : a float describing how far away the user is
  • point3d : an object with three properties (x, y & z) describing where the user is touching the entity
  • point2d : an object with two properites (x & y) describing where the user is touching the entity in 2D space (useful for determining where on a dynamic canvas the user is touching)
  • uv : an object with two properies (x & y) describing the raw textural offset (used to compute point2d)
For an example please see the Interactive dynamic textures sample program.

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 ); 
   }
});

+ Constructor Parameters (specific to this class)

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

+ Example

// 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);
}

+ Methods (common to all entities)

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.

+ Methods (specific to this class)

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

Class: TorusKnot (entity)

A torus three dimensional "pretzel" shape.

+ Constructor Parameters (common to all entities)

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:
  • distance : a float describing how far away the user is
  • point3d : an object with three properties (x, y & z) describing where the user is touching the entity
  • point2d : an object with two properites (x & y) describing where the user is touching the entity in 2D space (useful for determining where on a dynamic canvas the user is touching)
  • uv : an object with two properies (x & y) describing the raw textural offset (used to compute point2d)
For an example please see the Interactive dynamic textures sample program.

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 ); 
   }
});

+ Constructor Parameters (specific to this class)

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.

+ Example

// 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);
}

+ Methods (common to all entities)

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.

+ Methods (specific to this class)

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

Class: Container3D (entity)

An empty "container" that can be used to hold other entities. Has no visual representation of its own.

+ Constructor Parameters (common to all entities)

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:
  • distance : a float describing how far away the user is
  • point3d : an object with three properties (x, y & z) describing where the user is touching the entity
  • point2d : an object with two properites (x & y) describing where the user is touching the entity in 2D space (useful for determining where on a dynamic canvas the user is touching)
  • uv : an object with two properies (x & y) describing the raw textural offset (used to compute point2d)
For an example please see the Interactive dynamic textures sample program.

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 ); 
   }
});

+ Constructor Parameters (specific to this class)

AFrameP5.Container3D(Object)

No entity-specific constructor parameters

+ Example

// 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);
}

+ Methods (common to all entities)

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.

+ Methods (specific to this class)

No entity-specific methods


Class: OBJ (entity)

A Wavefront 3D model (.OBJ file format)

+ Constructor Parameters (common to all entities)

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:
  • distance : a float describing how far away the user is
  • point3d : an object with three properties (x, y & z) describing where the user is touching the entity
  • point2d : an object with two properites (x & y) describing where the user is touching the entity in 2D space (useful for determining where on a dynamic canvas the user is touching)
  • uv : an object with two properies (x & y) describing the raw textural offset (used to compute point2d)
For an example please see the Interactive dynamic textures sample program.

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 ); 
   }
});

+ Constructor Parameters (specific to this class)

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.

+ Example

// 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>

+ Methods (common to all entities)

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.

+ Methods (specific to this class)

No entity-specific methods


Class: GLTF (entity)

A Graphics Language Transmission Format 3D model (.GLTF file format)

+ Constructor Parameters (common to all entities)

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:
  • distance : a float describing how far away the user is
  • point3d : an object with three properties (x, y & z) describing where the user is touching the entity
  • point2d : an object with two properites (x & y) describing where the user is touching the entity in 2D space (useful for determining where on a dynamic canvas the user is touching)
  • uv : an object with two properies (x & y) describing the raw textural offset (used to compute point2d)
For an example please see the Interactive dynamic textures sample program.

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 ); 
   }
});

+ Constructor Parameters (specific to this class)

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.

+ Example

// 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>

+ Methods (common to all entities)

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.

+ Methods (specific to this class)

No entity-specific methods


Class: Sky (entity)

A large 'sky sphere' that surrounds the user. The sphere is textured using a specially prepared equirectangular image that provides a 360 display.

+ Constructor Parameters (specific to this class)

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

+ Example

// 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>

+ Methods (specific to this class)

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

Class: Text (entity)

A 2D entity that renders arbitrary text.

+ Constructor Parameters (specific to this class)

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:
  • distance : a float describing how far away the user is
  • point3d : an object with three properties (x, y & z) describing where the user is touching the entity
  • point2d : an object with two properites (x & y) describing where the user is touching the entity in 2D space (useful for determining where on a dynamic canvas the user is touching)
  • uv : an object with two properies (x & y) describing the raw textural offset (used to compute point2d)
For an example please see the Interactive dynamic textures sample program.

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 ); 
   }
});

+ Example

// 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);
}

+ Methods (specific to this class)

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.

License (MIT)

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.