Craig M. Kapp
Clinical Professor
Department of Computer Science
New York University

A-Frame P5

A-Frame P5 is a library created by Craig Kapp that serves as a simple wrapper around the A-Frame Web VR framework. Its primary function is to make it easy to construct VR worlds algorithmically using the p5 graphical framework.

Versions & CDN Links

Version 2.1 (latest stable release)

Getting Started

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
  • images: a folder that contains external assets used by the sketch

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.

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

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 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
var world;
			  		
function setup() {
   // no canvas needed
   noCanvas();
   
   world = new 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.
getFlying() : boolean Gets whether the world currently supports "flying"
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}
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)
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
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 aframep5. 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.

Class: Box (entity)

Used to construct a six-faced box entity.

+ Constructor Parameters (common to all entities)

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
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: 
var b = new Box({
   clickFunction: function(e) { 
      e.setRed(random(255)); 
   }
});
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: 
var b = new Box({
   upFunction: function(e) { 
      e.spinX(random(360)); 
   }
});
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: 
var b = new Box({
   enterFunction: function(e) { 
      e.setScale(2,2,2); 
   }
});
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: 
var b = new Box({
   leaveFunction: function(e) { 
      e.setScale(1,1,1); 
   }
});
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: 
var b = new 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.

+ Constructor Parameters (specific to this class)

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

var world;
var box;
			  		
function setup() {
   // no canvas needed
   noCanvas();
   
   // create a new VR World object
   world = new World('VRScene');
   
   // construct a new box
   box = new 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
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)

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
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: 
var b = new Box({
   clickFunction: function(e) { 
      e.setRed(random(255)); 
   }
});
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: 
var b = new Box({
   upFunction: function(e) { 
      e.spinX(random(360)); 
   }
});
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: 
var b = new Box({
   enterFunction: function(e) { 
      e.setScale(2,2,2); 
   }
});
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: 
var b = new Box({
   leaveFunction: function(e) { 
      e.setScale(1,1,1); 
   }
});
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: 
var b = new 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.

+ 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

var world;
var plane;
			  		
function setup() {
   // no canvas needed
   noCanvas();
   
   // create a new VR World object
   world = new World('VRScene');
   
   // construct a new plane to serve as the 'ground' for our world
   plane = new 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
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)

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
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: 
var b = new Box({
   clickFunction: function(e) { 
      e.setRed(random(255)); 
   }
});
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: 
var b = new Box({
   upFunction: function(e) { 
      e.spinX(random(360)); 
   }
});
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: 
var b = new Box({
   enterFunction: function(e) { 
      e.setScale(2,2,2); 
   }
});
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: 
var b = new Box({
   leaveFunction: function(e) { 
      e.setScale(1,1,1); 
   }
});
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: 
var b = new 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.

+ Constructor Parameters (specific to this class)

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

var world;
var circle;
			  		
function setup() {
   // no canvas needed
   noCanvas();
   
   // create a new VR World object
   world = new World('VRScene');
   
   // construct a new circle to serve as a circular 'ground' for our world
   circle = new 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
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)

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
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: 
var b = new Box({
   clickFunction: function(e) { 
      e.setRed(random(255)); 
   }
});
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: 
var b = new Box({
   upFunction: function(e) { 
      e.spinX(random(360)); 
   }
});
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: 
var b = new Box({
   enterFunction: function(e) { 
      e.setScale(2,2,2); 
   }
});
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: 
var b = new Box({
   leaveFunction: function(e) { 
      e.setScale(1,1,1); 
   }
});
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: 
var b = new 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.

+ Constructor Parameters (specific to this class)

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

var world;
var ring;
			  		
function setup() {
   // no canvas needed
   noCanvas();
   
   // create a new VR World object
   world = new World('VRScene');
   
   // construct a new ring
   ring = new 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
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)

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
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: 
var b = new Box({
   clickFunction: function(e) { 
      e.setRed(random(255)); 
   }
});
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: 
var b = new Box({
   upFunction: function(e) { 
      e.spinX(random(360)); 
   }
});
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: 
var b = new Box({
   enterFunction: function(e) { 
      e.setScale(2,2,2); 
   }
});
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: 
var b = new Box({
   leaveFunction: function(e) { 
      e.setScale(1,1,1); 
   }
});
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: 
var b = new 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.

+ Constructor Parameters (specific to this class)

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

var world;
var sphere;
			  		
function setup() {
   // no canvas needed
   noCanvas();
   
   // create a new VR World object
   world = new World('VRScene');
   
   // construct a new sphere
   sphere = new 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
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)

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
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: 
var b = new Box({
   clickFunction: function(e) { 
      e.setRed(random(255)); 
   }
});
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: 
var b = new Box({
   upFunction: function(e) { 
      e.spinX(random(360)); 
   }
});
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: 
var b = new Box({
   enterFunction: function(e) { 
      e.setScale(2,2,2); 
   }
});
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: 
var b = new Box({
   leaveFunction: function(e) { 
      e.setScale(1,1,1); 
   }
});
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: 
var b = new 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.

+ Constructor Parameters (specific to this class)

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

var world;
var cone;
			  		
function setup() {
   // no canvas needed
   noCanvas();
   
   // create a new VR World object
   world = new World('VRScene');
   
   // construct a new cone
   cone = new 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
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)

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
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: 
var b = new Box({
   clickFunction: function(e) { 
      e.setRed(random(255)); 
   }
});
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: 
var b = new Box({
   upFunction: function(e) { 
      e.spinX(random(360)); 
   }
});
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: 
var b = new Box({
   enterFunction: function(e) { 
      e.setScale(2,2,2); 
   }
});
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: 
var b = new Box({
   leaveFunction: function(e) { 
      e.setScale(1,1,1); 
   }
});
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: 
var b = new 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.

+ Constructor Parameters (specific to this class)

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

var world;
var cylinder;
			  		
function setup() {
   // no canvas needed
   noCanvas();
   
   // create a new VR World object
   world = new World('VRScene');
   
   // construct a new cylinder
   cylinder = new 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
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)

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
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: 
var b = new Box({
   clickFunction: function(e) { 
      e.setRed(random(255)); 
   }
});
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: 
var b = new Box({
   upFunction: function(e) { 
      e.spinX(random(360)); 
   }
});
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: 
var b = new Box({
   enterFunction: function(e) { 
      e.setScale(2,2,2); 
   }
});
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: 
var b = new Box({
   leaveFunction: function(e) { 
      e.setScale(1,1,1); 
   }
});
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: 
var b = new 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.

+ Constructor Parameters (specific to this class)

Dodecahedron(Object)

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

+ Example

// sketch.js file

var world;
var dodecahedron;
			  		
function setup() {
   // no canvas needed
   noCanvas();
   
   // create a new VR World object
   world = new World('VRScene');
   
   // construct a new dodecahedron
   dodecahedron = new 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
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)

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
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: 
var b = new Box({
   clickFunction: function(e) { 
      e.setRed(random(255)); 
   }
});
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: 
var b = new Box({
   upFunction: function(e) { 
      e.spinX(random(360)); 
   }
});
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: 
var b = new Box({
   enterFunction: function(e) { 
      e.setScale(2,2,2); 
   }
});
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: 
var b = new Box({
   leaveFunction: function(e) { 
      e.setScale(1,1,1); 
   }
});
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: 
var b = new 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.

+ Constructor Parameters (specific to this class)

Octahedron(Object)

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

+ Example

// sketch.js file

var world;
var octahedron;
			  		
function setup() {
   // no canvas needed
   noCanvas();
   
   // create a new VR World object
   world = new World('VRScene');
   
   // construct a new Octahedron
   octahedron = new 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
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)

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
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: 
var b = new Box({
   clickFunction: function(e) { 
      e.setRed(random(255)); 
   }
});
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: 
var b = new Box({
   upFunction: function(e) { 
      e.spinX(random(360)); 
   }
});
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: 
var b = new Box({
   enterFunction: function(e) { 
      e.setScale(2,2,2); 
   }
});
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: 
var b = new Box({
   leaveFunction: function(e) { 
      e.setScale(1,1,1); 
   }
});
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: 
var b = new 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.

+ Constructor Parameters (specific to this class)

Tetrahedron(Object)

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

+ Example

// sketch.js file

var world;
var tetrahedron;
			  		
function setup() {
   // no canvas needed
   noCanvas();
   
   // create a new VR World object
   world = new World('VRScene');
   
   // construct a new Tetrahedron
   tetrahedron = new 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
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)

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
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: 
var b = new Box({
   clickFunction: function(e) { 
      e.setRed(random(255)); 
   }
});
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: 
var b = new Box({
   upFunction: function(e) { 
      e.spinX(random(360)); 
   }
});
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: 
var b = new Box({
   enterFunction: function(e) { 
      e.setScale(2,2,2); 
   }
});
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: 
var b = new Box({
   leaveFunction: function(e) { 
      e.setScale(1,1,1); 
   }
});
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: 
var b = new 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.

+ Constructor Parameters (specific to this class)

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

var world;
var torus;
			  		
function setup() {
   // no canvas needed
   noCanvas();
   
   // create a new VR World object
   world = new World('VRScene');
   
   // construct a new Torus
   torus = new 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
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)

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
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: 
var b = new Box({
   clickFunction: function(e) { 
      e.setRed(random(255)); 
   }
});
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: 
var b = new Box({
   upFunction: function(e) { 
      e.spinX(random(360)); 
   }
});
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: 
var b = new Box({
   enterFunction: function(e) { 
      e.setScale(2,2,2); 
   }
});
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: 
var b = new Box({
   leaveFunction: function(e) { 
      e.setScale(1,1,1); 
   }
});
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: 
var b = new 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.

+ Constructor Parameters (specific to this class)

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

var world;
var torusKnot;
			  		
function setup() {
   // no canvas needed
   noCanvas();
   
   // create a new VR World object
   world = new World('VRScene');
   
   // construct a new TorusKnot
   torusKnot = new 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
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)

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
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: 
var b = new Box({
   clickFunction: function(e) { 
      e.setRed(random(255)); 
   }
});
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: 
var b = new Box({
   upFunction: function(e) { 
      e.spinX(random(360)); 
   }
});
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: 
var b = new Box({
   enterFunction: function(e) { 
      e.setScale(2,2,2); 
   }
});
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: 
var b = new Box({
   leaveFunction: function(e) { 
      e.setScale(1,1,1); 
   }
});
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: 
var b = new 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.

+ Constructor Parameters (specific to this class)

Container3D(Object)

No entity-specific constructor parameters

+ Example

// sketch.js file

var world;
var container;
			  		
function setup() {
   // no canvas needed
   noCanvas();
   
   // create a new VR World object
   world = new World('VRScene');
   
   // construct a new Container
   container = new Container3D({
      x:0, 
      y:2, 
      z:0
   });
   
   // add two boxes to the container
   var b1 = new Box({x:-2, red:255, green:0, blue:0});
   var b2 = new 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
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)

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
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: 
var b = new Box({
   clickFunction: function(e) { 
      e.setRed(random(255)); 
   }
});
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: 
var b = new Box({
   upFunction: function(e) { 
      e.spinX(random(360)); 
   }
});
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: 
var b = new Box({
   enterFunction: function(e) { 
      e.setScale(2,2,2); 
   }
});
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: 
var b = new Box({
   leaveFunction: function(e) { 
      e.setScale(1,1,1); 
   }
});
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: 
var b = new 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.

+ Constructor Parameters (specific to this class)

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

var world;
var pikachuModel;
			  		
function setup() {
   // no canvas needed
   noCanvas();
   
   // create a new VR World object
   world = new 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 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
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)

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
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: 
var b = new Box({
   clickFunction: function(e) { 
      e.setRed(random(255)); 
   }
});
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: 
var b = new Box({
   upFunction: function(e) { 
      e.spinX(random(360)); 
   }
});
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: 
var b = new Box({
   enterFunction: function(e) { 
      e.setScale(2,2,2); 
   }
});
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: 
var b = new Box({
   leaveFunction: function(e) { 
      e.setScale(1,1,1); 
   }
});
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: 
var b = new 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.

+ Constructor Parameters (specific to this class)

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

var world;
var dogModel;
			  		
function setup() {
   // no canvas needed
   noCanvas();
   
   // create a new VR World object
   world = new 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 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
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)

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

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.
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: 
var b = new Box({
   clickFunction: function(e) { 
      e.setRed(random(255)); 
   }
});
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: 
var b = new Box({
   upFunction: function(e) { 
      e.spinX(random(360)); 
   }
});
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: 
var b = new Box({
   enterFunction: function(e) { 
      e.setScale(2,2,2); 
   }
});
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: 
var b = new Box({
   leaveFunction: function(e) { 
      e.setScale(1,1,1); 
   }
});
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: 
var b = new 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.

+ 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 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
   var text = new 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-2021 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.