A-Frame P5 AR is a library created by Craig Kapp that serves as a simple wrapper for the AR.js the A-Frame Web VR frameworks. Its primary function is to make it easy to construct Augmented Reality (AR) experiences algorithmically using the p5 graphical framework.
Please note that this library is used for Augmented Reality experiences only. If you are interested in developing a Virtual Reality experience please visit the documentation page for A-Frame P5.
Version 1.0 (latest stable release, 2024)
Version 0.4 (legacy release, 2021)
Important note: A-Frame P5 AR version 1.0 contains significant changes as compared to previous versions. The main difference in version 1.0 is the removal of all A-Frame P5 AR classes from the global context. This means that in version 0.4 you could do something like the following:
let b = new Box({})
In version 1.0 all classes are now contained with an AFrameP5AR
object. The same code for generating a box in version 1.0 would look like the following:
let b = new AFrameP5AR.Box({})
Begin by downloading the example gallery for the A-Frame P5 AR library. This template includes a series of folders that showcase the basic usage of this A-Frame P5 AR library. Each folder contains the following:
Unzip this project 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 experience (boxes, planes, spheres, etc).
When working locally you need to view the examples using a local web server or upload the code to a hosting service that supports https connections. For developing locally I recommend using the free MAMP local web server.
The examples below use fiducial markers as AR triggers images. The markers can be downloaded and printed here: hiro and kanji.
Note that if you are using a legacy version you should download this example gallery file.
Here are a series of live demos for each of the examples:
All A-Frame P5 AR 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> <!-- A-Frame core library --> <!-- documentation: https://aframe.io/ --> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> <!-- AR.js Library --> <!-- documentation: https://ar-js-org.github.io/AR.js-Docs/ --> <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script> <!-- p5.js core library --> <!-- documentation: https://p5js.org/reference/ --> <script src="https://cdn.jsdelivr.net/npm/p5@1.11.1/lib/p5.min.js"></script> <!-- AFrameP5 AR library --> <!-- documentation: https://cs.nyu.edu/~kapp/aframep5-ar --> <script src="https://craignyu.github.io/aframep5-ar/libraries/aframep5_ar-v1.0.js"></script> <!-- Your custom p5.js sketch --> <script src="sketch.js"></script> </head> <body style="margin : 0px; overflow: hidden;"> <!-- A-Frame Scene --> <a-scene id="ARScene" embedded arjs> <!-- set up graphics we want to use as assets, same as in A-Frame VR--> <a-assets> <img src="IMAGE_URL_GOES_HERE" id="ITEM_ID_GOES_HERE"> </a-assets> <!-- markers that we are tracking with a link to the pattern file the AR.js library should be looking for --> <a-marker id="hiro" type="pattern" url="URL_TO_MARKER_FILE_GOES_HERE"></a-marker> <!-- default camera entity (leave this and don't change it) --> <a-entity camera></a-entity> </a-scene> </body> </html>
If you are planning on using external artwork or 3D models in your virtual world they will need to be included in your HTML document. All assets must be given unique ID's which will be referenced whenever you wish to use this texture in your world. This can be done using a <a-assets>
tag, which needs to be nested inside of the <a-scene>
tag.
A-Frame P5 AR currently supports fiducial marker tracking. A fiducial marker is a non-symmetrical black and white symbol that can be used by a computer vision algorithm to (1) identify (2) locate in space and (3) infer rotation. Fiducial markers always include a thick black border with a non-symmetrical pattern inside of this border. A sample fiducial marker looks like the following:
You are free to use the sample markers that are included in the downloadable package, or you can create your own. You will want to make sure to print out these markers on a piece of paper using a high-quality printer so that they appear with as much contrast as possible. Avoid using paper that is glossy and stick to non-reflective paper if possible.
If you choose to build your own markers you will need to prepare a "pattern" file. Pattern files are text files that consist of a series of color values that can be interpreted by the AR.js tracking algorithm. These files need to be prepared in a format that AR.js can understand which can be accomplished using the following steps:
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 an AR experience loads and a marker is detected you will have access to the "container" of that marker. Within that container the origin point is at the center of the marker. 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 through the center of the marker with negative values going below the marker and positive values above the marker. The z axis extends forward and back - negative values extend forward to the top of the marker and positive values extend to the bottom of the marker.
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 AR Examples ZIP archive for a series of comprehensive examples.
Used to connect a p5 sketch to the A-Frame world. Instantiating a 'World' object is required in order to use all other classes in this library. This class requires that an a-scene
tag has been added to the body of the HTML document. The 'World' object also creates a p5 canvas for you with a size of 800px by 600px. The 'World' object manages this canvas and ensures that it is placed on top of the AR viewport in such a way that you can draw 2D elements to the screen that can act as overlays to the video feed.
World(id)
Parameter | Data Type | Default | Description |
id |
String | 'ARScene' | The id of the 'a-scene' tag in the 'body' of the HTML document that should be used to render the AR experience. |
Instantiate a net AFrameP5AR.World object within your 'sketch.js' file. Make sure to declare your world variable in the global scope to allow all functions the ability to access it. Ensure that the ID being passed to the World constructor includes the ID of the a-scene
HTML tag.
// sketch.js file let world; function setup() { // no canvas needed noCanvas(); world = net AFrameP5AR.World('ARScene'); }
In your HTML document make sure to include an a-scene
tag with a valid ID.
<!-- index.html file --> <body> <a-scene id='ARScene' embedded arjs> <!-- default camera (don't change this) --> <a-entity camera></a-entity> </a-scene> </body>
Method | Description |
getMarker(String) : MarkerObject |
Identifies an a-marker tag in the HTML document and creates a net AFrameP5AR.MarkerObject to easily interface with the marker. Once you have obtained a MarkerObject you can algorithmically add and remove entities from the marker, and determine when the marker is visible, where it is located, how it is rotated, etc. For more information see the entry on Marker objects. |
clearDrawingCanvas() : vaoid |
Clears the p5 drawing canvas. |
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. |
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. |
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 |
Used to create a connection to an a-marker
tag in the HTML document and creates a net AFrameP5AR.MarkerObject to easily interface with the marker. Once you have created a MarkerObject you can algorithmically add and remove entities from the marker, and determine when the marker is visible, where it is located, how it is rotated, etc. Marker objects are created using the getMarker
method on the World
class.
// sketch.js file // create a variable to hold our world object let world; // create a variable to hold our marker let marker; function setup() { // create our world (this also creates a p5 canvas for us) world = net AFrameP5AR.World('ARScene'); // grab a reference to the marker that we set up on the HTML side (connect to it using its id) marker = world.getMarker('hiro'); // create some geometry to add to our marker let cube = net AFrameP5AR.Box({ x:0, y:0.5, z:0, red:0, green:255, blue:0, width:1, height:1, depth:1, opacity: 0.5 }); // add the cube to our marker marker.add( cube ); } function draw() { }
Method | Category | Description |
add(Entity) : void |
Hierarchy | adds an entity as a child to the marker. this places the net AFrameP5AR.entity into the coordinate space of this entity. alias for addChild . |
addChild(Entity) : void |
Hierarchy | adds an entity as a child to this marker. this places the net AFrameP5AR.entity into the coordinate space of this entity. |
remove(Entity) : void |
Hierarchy | removes a child entity from this marker. alias for removeChild |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this marker. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this marker |
isVisible() : Boolean |
Visibility | reports whether the marker is currently being visible and being actively tracked by the system. |
getScreenPosition() : Object |
Position | returns an object with two components (x & y) which identifies the position of the object in 2D space. |
Used to construct a six-faced box entity.
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: let b = net AFrameP5AR.Box({ customData: { numClicks: 0 }, clickFunction: function(e) { e.setRed(random(255)); // we can also access our own customData object e.customData.numClicks++; console.log("I've been clicked " + e.customData.numClicks + "times"); } }); |
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = net AFrameP5AR.Box({ tickFunction: function(e) { e.setRed(random(255)); } }); |
Box(Object)
width |
Number (float) | 1 | width of the entity (along the x-axis) |
height |
Number (float) | 1 | height of the entity (along the y-axis) |
depth |
Number (float) | 1 | depth of the entity (along the z-axis) |
// sketch.js file let world; let box; function setup() { // no canvas needed noCanvas(); // create a net AFrameP5AR.AR World object world = net AFrameP5AR.World('ARScene'); // grab a reference to the marker that we set up on the HTML side (connect to it using its id) marker = world.getMarker('hiro'); // construct a net AFrameP5AR.box box = net AFrameP5AR.Box({ x:0, y:0.6, z:0, width: 1, depth: 1.5, height: 1.2, red:255, green:0, blue:0 }); // add the box to the marker marker.add(box); }
Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
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 net AFrameP5AR.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 net AFrameP5AR.entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
Method | Category | Description |
getDepth() : Number |
Geometry | returns the current depth of the entity |
getHeight() : Number |
Geometry | returns the current height of the entity |
getWidth() : Number |
Geometry | returns the current width of the entity |
setDepth(Number) : void |
Geometry | sets the depth of the entity |
setHeight(Number) : void |
Geometry | sets the height of the entity |
setWidth(Number) : void |
Geometry | sets the width of the entity |
Used to construct a flat two dimensional plane entity.
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: let b = net AFrameP5AR.Box({ customData: { numClicks: 0 }, clickFunction: function(e) { e.setRed(random(255)); // we can also access our own customData object e.customData.numClicks++; console.log("I've been clicked " + e.customData.numClicks + "times"); } }); |
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = net AFrameP5AR.Box({ tickFunction: function(e) { e.setRed(random(255)); } }); |
Plane(Object)
width |
Number (float) | 1 | width of the entity (along the x-axis) |
height |
Number (float) | 1 | height of the entity (along the y-axis) |
// sketch.js file let world; let plane; function setup() { // no canvas needed noCanvas(); // create a net AFrameP5AR.AR World object world = net AFrameP5AR.World('ARScene'); // grab a reference to the marker that we set up on the HTML side (connect to it using its id) marker = world.getMarker('hiro'); // construct a net AFrameP5AR.plane to serve as the 'ground' for our world plane = net AFrameP5AR.Plane({ x:0, y:0, z:0, width: 100, height: 100, red:0, green:255, blue:0, rotationX:-90 }); // add the plane to the marker marker.add(plane); }
Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
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 net AFrameP5AR.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 net AFrameP5AR.entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
Method | Category | Description |
getHeight() : Number |
Geometry | returns the current height of the entity |
getWidth() : Number |
Geometry | returns the current width of the entity |
setHeight(Number) : void |
Geometry | sets the height of the entity |
setWidth(Number) : void |
Geometry | sets the width of the entity |
Used to construct a flat two dimensional circular entity.
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: let b = net AFrameP5AR.Box({ customData: { numClicks: 0 }, clickFunction: function(e) { e.setRed(random(255)); // we can also access our own customData object e.customData.numClicks++; console.log("I've been clicked " + e.customData.numClicks + "times"); } }); |
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = net AFrameP5AR.Box({ tickFunction: function(e) { e.setRed(random(255)); } }); |
Circle(Object)
radius |
Number (float) | 1 | radius of the entity (in meters) |
segments |
Number (integer) | 32 | the number of segments to use when drawing the circle (higher numbers will yield a "smoother" looking circle) |
thetaStart |
Number (integer) | 0 | start angle for first segment. can be used to define a partial circle. |
thetaLength |
Number (integer) | 360 | the central angle (in degrees). defaults to 360, which makes for a complete circle. |
// sketch.js file let world; let circle; function setup() { // no canvas needed noCanvas(); // create a net AFrameP5AR.AR World object world = net AFrameP5AR.World('ARScene'); // grab a reference to the marker that we set up on the HTML side (connect to it using its id) marker = world.getMarker('hiro'); // construct a net AFrameP5AR.circle to serve as a circular 'ground' for our world circle = net AFrameP5AR.Circle({ x:0, y:0, z:0, radius:25, red:0, green:255, blue:0, r otationX:-90 }); // add the circle to the marker marker.add(circle); }
Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
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 net AFrameP5AR.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 net AFrameP5AR.entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
Method | Category | Description |
getRadius() : Number |
Geometry | returns the current radius of the entity |
getSegments() : Number |
Geometry | returns the number of segments being used to draw the entity |
getThetaStart() : Number |
Geometry | returns the current thetaStart value for the entity |
getThetaLength() : Number |
Geometry | returns the current thetaLength value for the entity |
setRadius(Number) : void |
Geometry | sets the radius of the entity |
changeRadius(Number) : void |
Geometry | updates the radius by the value provided (i.e. entity.changeRadius(0.1); will increase the radius by 0.1 meters. |
setSegments(Number) : void |
Geometry | sets the number of segments being used to draw the entity |
setThetaStart(Number) : void |
Geometry | sets the the thetaStart value for the entity |
setThetaLength(Number) : void |
Geometry | sets the the thetaLength value for the entity |
Used to construct a flat two dimensional ring entity.
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: let b = net AFrameP5AR.Box({ customData: { numClicks: 0 }, clickFunction: function(e) { e.setRed(random(255)); // we can also access our own customData object e.customData.numClicks++; console.log("I've been clicked " + e.customData.numClicks + "times"); } }); |
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = net AFrameP5AR.Box({ tickFunction: function(e) { e.setRed(random(255)); } }); |
Ring(Object)
radiusInner |
Number (float) | 0.5 | inner radius of the ring (in meters) |
radiusOuter |
Number (float) | 1 | outer radius of the ring (in meters) |
segmentsTheta |
Number (integer) | 32 | number of segments. a higher number means the ring will be more round. |
segmentsPhi |
Number (integer) | 8 | number of triangles within each face defined by segmentsTheta. |
thetaStart |
Number (integer) | 0 | start angle for first segment. |
thetaLength |
Number (integer) | 360 | the central angle (in degrees) |
// sketch.js file let world; let ring; function setup() { // no canvas needed noCanvas(); // create a net AFrameP5AR.AR World object world = net AFrameP5AR.World('ARScene'); // grab a reference to the marker that we set up on the HTML side (connect to it using its id) marker = world.getMarker('hiro'); // construct a net AFrameP5AR.ring ring = net AFrameP5AR.Ring({ x:0, y:2, z:-2, radiusInner: 0.5, radiusOuter: 1, red:0, green:255, blue:0 }); // add the ring to the marker marker.add(ring); }
Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
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 net AFrameP5AR.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 net AFrameP5AR.entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
Method | Category | Description |
getRadiusInner() : Number |
Geometry | returns the current inner radius of the entity |
getRadiusOuter() : Number |
Geometry | returns the current outer radius of the entity |
getSegmentsTheta() : Number |
Geometry | returns the current segmentsTheta value for the entity |
getSegmentsPhi() : Number |
Geometry | returns the current segmentsPhi value for the entity |
getThetaStart() : Number |
Geometry | returns the current thetaStart value for the entity |
getThetaLength() : Number |
Geometry | returns the current thetaLength value for the entity |
setRadiusInner(Number) : void |
Geometry | sets the inner radius of the entity |
setRadiusOuter(Number) : void |
Geometry | sets the outer radius of the entity |
setSegmentsTheta(Number) : void |
Geometry | sets the current segmentsTheta value for the entity |
setSegmentsPhi(Number) : void |
Geometry | sets the current segmentsPhi value for the entity |
setThetaStart(Number) : void |
Geometry | sets the the thetaStart value for the entity |
setThetaLength(Number) : void |
Geometry | sets the the thetaLength value for the entity |
Used to construct a three dimensional spherical entity.
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: let b = net AFrameP5AR.Box({ customData: { numClicks: 0 }, clickFunction: function(e) { e.setRed(random(255)); // we can also access our own customData object e.customData.numClicks++; console.log("I've been clicked " + e.customData.numClicks + "times"); } }); |
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = net AFrameP5AR.Box({ tickFunction: function(e) { e.setRed(random(255)); } }); |
Sphere(Object)
radius |
Number (float) | 1 | radius of the sphere (in meters) |
segmentsWidth |
Number (integer) | 18 | number of horizontal segments |
segmentsHeight |
Number (integer) | 36 | number horizontal segments |
phiStart |
Number (integer) | 0 | horizontal starting angle |
phiLength |
Number (integer) | 360 | horizontal sweep angle size |
thetaStart |
Number (integer) | 0 | start angle for first segment. |
thetaLength |
Number (integer) | 360 | the central angle (in degrees) |
// sketch.js file let world; let sphere; function setup() { // no canvas needed noCanvas(); // create a net AFrameP5AR.AR World object world = net AFrameP5AR.World('ARScene'); // grab a reference to the marker that we set up on the HTML side (connect to it using its id) marker = world.getMarker('hiro'); // construct a net AFrameP5AR.sphere sphere = net AFrameP5AR.Sphere({ x:0, y:2, z:0, red:0, green:255, blue:0 }); // add the sphere to the marker marker.add(sphere); }
Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
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 net AFrameP5AR.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 net AFrameP5AR.entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
Method | Category | Description |
getRadius() : Number |
Geometry | returns the current radius of the entity |
getSegmentsWidth() : Number |
Geometry | returns the current segmentsWidth value for the entity |
getSegmentsHeight() : Number |
Geometry | returns the current segmentsHeight value for the entity |
getPhiStart() : Number |
Geometry | returns the current phiStart value for the entity |
getPhiLength() : Number |
Geometry | returns the current phiLength value for the entity |
getThetaStart() : Number |
Geometry | returns the current thetaStart value for the entity |
getThetaLength() : Number |
Geometry | returns the current thetaLength value for the entity |
setRadius(Number) : void |
Geometry | sets the radius of the entity |
changeRadius(Number) : void |
Geometry | updates the radius by the value provided (i.e. entity.changeRadius(0.1); will increase the radius by 0.1 meters. |
setSegmentsWidth(Number) : void |
Geometry | sets the current segmentsWidth value for the entity |
setSegmentsHeight(Number) : void |
Geometry | sets the current segmentsHeight value for the entity |
setPhiStart(Number) : void |
Geometry | sets the the phiStart value for the entity |
setPhiLength(Number) : void |
Geometry | sets the the phiLength value for the entity |
setThetaStart(Number) : void |
Geometry | sets the the thetaStart value for the entity |
setThetaLength(Number) : void |
Geometry | sets the the thetaLength value for the entity |
Used to construct a three dimensional conical entity.
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: let b = net AFrameP5AR.Box({ customData: { numClicks: 0 }, clickFunction: function(e) { e.setRed(random(255)); // we can also access our own customData object e.customData.numClicks++; console.log("I've been clicked " + e.customData.numClicks + "times"); } }); |
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = net AFrameP5AR.Box({ tickFunction: function(e) { e.setRed(random(255)); } }); |
Cone(Object)
height |
Number (float) | 1 | height of the entity (along the y-axis) |
openEnded |
Boolean | false | whether the cone is open ended or not |
radiusBottom |
Number (float) | 1 | radius of the bottom of the cone (in meters) |
radiusTop |
Number (float) | 1 | radius of the top of the cone (in meters) |
segmentsRadial |
Number (integer) | 36 | number of segmented faces around the circumference of the cone. |
segmentsHeight |
Number (integer) | 18 | Number of rows of faces along the height of the cone. |
thetaStart |
Number (integer) | 0 | start angle in degrees |
thetaLength |
Number (integer) | 360 | the central angle (in degrees) |
// sketch.js file let world; let cone; function setup() { // no canvas needed noCanvas(); // create a net AFrameP5AR.AR World object world = net AFrameP5AR.World('ARScene'); // grab a reference to the marker that we set up on the HTML side (connect to it using its id) marker = world.getMarker('hiro'); // construct a net AFrameP5AR.cone cone = net AFrameP5AR.Cone({ x:0, y:2, z:0, red:0, green:255, blue:0 }); // add the cone to the marker marker.add(cone); }
Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
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 net AFrameP5AR.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 net AFrameP5AR.entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
Method | Category | Description |
getHeight() : Number |
Geometry | returns the current height of the entity |
getOpenEnded() : Boolean |
Geometry | returns whether the entity is open ended or not |
getRadiusBottom() : Number |
Geometry | returns the current bottom radius of the entity |
getRadiusTop() : Number |
Geometry | returns the current top radius of the entity |
getSegmentsRadial() : Number |
Geometry | returns the current segmentsRadial value for the entity |
getSegmentsHeight() : Number |
Geometry | returns the current segmentsHeight value for the entity |
getThetaStart() : Number |
Geometry | returns the current thetaStart value for the entity |
getThetaLength() : Number |
Geometry | returns the current thetaLength value for the entity |
setHeight(Number) : void |
Geometry | sets the height of the entity |
setOpenEnded(Boolean) : void |
Geometry | sets whether the entity is open ended or not |
setRadiusBottom(Number) : void |
Geometry | sets the radiusBottom value for the entity |
setRadiusTop(Number) : void |
Geometry | sets the radiusTop value for the entity |
setSegmentsRadial(Number) : void |
Geometry | sets the current segmentsRadial value for the entity |
setSegmentsHeight(Number) : void |
Geometry | sets the current segmentsHeight value for the entity |
setThetaStart(Number) : void |
Geometry | sets the the thetaStart value for the entity |
setThetaLength(Number) : void |
Geometry | sets the the thetaLength value for the entity |
Used to construct a three dimensional cylindrical entity.
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: let b = net AFrameP5AR.Box({ customData: { numClicks: 0 }, clickFunction: function(e) { e.setRed(random(255)); // we can also access our own customData object e.customData.numClicks++; console.log("I've been clicked " + e.customData.numClicks + "times"); } }); |
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = net AFrameP5AR.Box({ tickFunction: function(e) { e.setRed(random(255)); } }); |
Cylinder(Object)
radius |
Number (float) | 1 | radius of the entity (in meters) |
height |
Number (float) | 1 | height of the entity (along the y-axis) |
openEnded |
Boolean | false | whether the cone is open ended or not |
segmentsRadial |
Number (integer) | 36 | number of segmented faces around the circumference of the cylinder. |
segmentsHeight |
Number (integer) | 18 | Number of rows of faces along the height of the cylinder. |
thetaStart |
Number (integer) | 0 | start angle in degrees |
thetaLength |
Number (integer) | 360 | the central angle (in degrees) |
// sketch.js file let world; let cylinder; function setup() { // no canvas needed noCanvas(); // create a net AFrameP5AR.AR World object world = net AFrameP5AR.World('ARScene'); // grab a reference to the marker that we set up on the HTML side (connect to it using its id) marker = world.getMarker('hiro'); // construct a net AFrameP5AR.cylinder cylinder = net AFrameP5AR.Cylinder({ x:0, y:2, z:0, red:0, green:255, blue:0 }); // add the cylinder to the marker marker.add(cylinder); }
Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
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 net AFrameP5AR.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 net AFrameP5AR.entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
Method | Category | Description |
getRadius() : Number |
Geometry | returns the current radius of the entity |
getHeight() : Number |
Geometry | returns the current height of the entity |
getOpenEnded() : Boolean |
Geometry | returns whether the entity is open ended or not |
getSegmentsRadial() : Number |
Geometry | returns the current segmentsRadial value for the entity |
getSegmentsHeight() : Number |
Geometry | returns the current segmentsHeight value for the entity |
getThetaStart() : Number |
Geometry | returns the current thetaStart value for the entity |
getThetaLength() : Number |
Geometry | returns the current thetaLength value for the entity |
setRadius(Number) : void |
Geometry | sets the radius of the entity |
changeRadius(Number) : void |
Geometry | updates the radius by the value provided (i.e. entity.changeRadius(0.1); will increase the radius by 0.1 meters. |
setHeight(Number) : void |
Geometry | sets the height of the entity |
setOpenEnded(Boolean) : void |
Geometry | sets whether the entity is open ended or not |
setSegmentsRadial(Number) : void |
Geometry | sets the current segmentsRadial value for the entity |
setSegmentsHeight(Number) : void |
Geometry | sets the current segmentsHeight value for the entity |
setThetaStart(Number) : void |
Geometry | sets the the thetaStart value for the entity |
setThetaLength(Number) : void |
Geometry | sets the the thetaLength value for the entity |
Used to construct a three dimensional 12-sided entity.
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: let b = net AFrameP5AR.Box({ customData: { numClicks: 0 }, clickFunction: function(e) { e.setRed(random(255)); // we can also access our own customData object e.customData.numClicks++; console.log("I've been clicked " + e.customData.numClicks + "times"); } }); |
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = net AFrameP5AR.Box({ tickFunction: function(e) { e.setRed(random(255)); } }); |
Dodecahedron(Object)
radius |
Number (float) | 1 | radius of the entity (in meters) |
// sketch.js file let world; let dodecahedron; function setup() { // no canvas needed noCanvas(); // create a net AFrameP5AR.AR World object world = net AFrameP5AR.World('ARScene'); // grab a reference to the marker that we set up on the HTML side (connect to it using its id) marker = world.getMarker('hiro'); // construct a net AFrameP5AR.dodecahedron dodecahedron = net AFrameP5AR.Dodecahedron({ x:0, y:2, z:0, red:0, green:255, blue:0 }); // add the dodecahedron to the marker marker.add(dodecahedron); }
Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
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 net AFrameP5AR.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 net AFrameP5AR.entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
Method | Category | Description |
getRadius() : Number |
Geometry | returns the current radius of the entity |
setRadius(Number) : void |
Geometry | sets the radius of the entity |
changeRadius(Number) : void |
Geometry | updates the radius by the value provided (i.e. entity.changeRadius(0.1); will increase the radius by 0.1 meters. |
Used to construct a three dimensional 8-sided entity.
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: let b = net AFrameP5AR.Box({ customData: { numClicks: 0 }, clickFunction: function(e) { e.setRed(random(255)); // we can also access our own customData object e.customData.numClicks++; console.log("I've been clicked " + e.customData.numClicks + "times"); } }); |
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = net AFrameP5AR.Box({ tickFunction: function(e) { e.setRed(random(255)); } }); |
Octahedron(Object)
radius |
Number (float) | 1 | radius of the entity (in meters) |
// sketch.js file let world; let octahedron; function setup() { // no canvas needed noCanvas(); // create a net AFrameP5AR.AR World object world = net AFrameP5AR.World('ARScene'); // grab a reference to the marker that we set up on the HTML side (connect to it using its id) marker = world.getMarker('hiro'); // construct a net AFrameP5AR.Octahedron octahedron = net AFrameP5AR.Octahedron({ x:0, y:2, z:0, red:0, green:255, blue:0 }); // add the Octahedron to the marker marker.add(octahedron); }
Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
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 net AFrameP5AR.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 net AFrameP5AR.entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
Method | Category | Description |
getRadius() : Number |
Geometry | returns the current radius of the entity |
setRadius(Number) : void |
Geometry | sets the radius of the entity |
changeRadius(Number) : void |
Geometry | updates the radius by the value provided (i.e. entity.changeRadius(0.1); will increase the radius by 0.1 meters. |
Used to construct a three dimensional 4-sided entity.
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: let b = net AFrameP5AR.Box({ customData: { numClicks: 0 }, clickFunction: function(e) { e.setRed(random(255)); // we can also access our own customData object e.customData.numClicks++; console.log("I've been clicked " + e.customData.numClicks + "times"); } }); |
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = net AFrameP5AR.Box({ tickFunction: function(e) { e.setRed(random(255)); } }); |
Tetrahedron(Object)
radius |
Number (float) | 1 | radius of the entity (in meters) |
// sketch.js file let world; let tetrahedron; function setup() { // no canvas needed noCanvas(); // create a net AFrameP5AR.AR World object world = net AFrameP5AR.World('ARScene'); // grab a reference to the marker that we set up on the HTML side (connect to it using its id) marker = world.getMarker('hiro'); // construct a net AFrameP5AR.Tetrahedron tetrahedron = net AFrameP5AR.Tetrahedron({ x:0, y:2, z:0, red:0, green:255, blue:0 }); // add the Tetrahedron to the marker marker.add(tetrahedron); }
Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
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 net AFrameP5AR.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 net AFrameP5AR.entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
Method | Category | Description |
getRadius() : Number |
Geometry | returns the current radius of the entity |
setRadius(Number) : void |
Geometry | sets the radius of the entity |
changeRadius(Number) : void |
Geometry | updates the radius by the value provided (i.e. entity.changeRadius(0.1); will increase the radius by 0.1 meters. |
A torus is a surface of revolution generated by revolving a circle in three-dimensional space about an axis coplanar with the circle.
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: let b = net AFrameP5AR.Box({ customData: { numClicks: 0 }, clickFunction: function(e) { e.setRed(random(255)); // we can also access our own customData object e.customData.numClicks++; console.log("I've been clicked " + e.customData.numClicks + "times"); } }); |
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = net AFrameP5AR.Box({ tickFunction: function(e) { e.setRed(random(255)); } }); |
Torus(Object)
radius |
Number (float) | 1 | radius of the entity (in meters) |
radiusTubular |
Number (float) | 1 | radius of the tubular portion of the entity (in meters) |
segmentsRadial |
Number (integer) | 36 | number of segmented faces around the circumference of the torus. |
segmentsTubular |
Number (integer) | 18 | number of segments along the circumference of the tube face. a higher number means the tube will be more round. |
arc |
Number (integer) | 360 | central angle of the entity |
// sketch.js file let world; let torus; function setup() { // no canvas needed noCanvas(); // create a net AFrameP5AR.AR World object world = net AFrameP5AR.World('ARScene'); // grab a reference to the marker that we set up on the HTML side (connect to it using its id) marker = world.getMarker('hiro'); // construct a net AFrameP5AR.Torus torus = net AFrameP5AR.Torus({ x:0, y:2, z:0, red:0, green:255, blue:0 }); // add the Torus to the marker marker.add(torus); }
Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
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 net AFrameP5AR.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 net AFrameP5AR.entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
Method | Category | Description |
getRadius() : Number |
Geometry | returns the current radius of the entity |
getRadiusTubular() : Number |
Geometry | returns the current radiusTubular of the entity |
getSegmentsRadial() : Number |
Geometry | returns the current segmentsRadial value for the entity |
getSegmentsTubular() : Number |
Geometry | returns the current segmentsTubular value for the entity |
getArc() : Number |
Geometry | returns the current arc value for the entity |
setRadius(Number) : void |
Geometry | sets the radius value for the entity |
changeRadius(Number) : void |
Geometry | updates the radius by the value provided (i.e. entity.changeRadius(0.1); will increase the radius by 0.1 meters. |
setRadiusTubular(Number) : void |
Geometry | sets the radiusTublar value for the entity |
setSegmentsRadial(Number) : void |
Geometry | sets the current segmentsRadial value for the entity |
setSegmentsTubular(Number) : void |
Geometry | sets the current segmentsTubular value for the entity |
setArc(Number) : void |
Geometry | sets the current arc value for the entity |
A torus three dimensional "pretzel" shape.
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: let b = net AFrameP5AR.Box({ customData: { numClicks: 0 }, clickFunction: function(e) { e.setRed(random(255)); // we can also access our own customData object e.customData.numClicks++; console.log("I've been clicked " + e.customData.numClicks + "times"); } }); |
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = net AFrameP5AR.Box({ tickFunction: function(e) { e.setRed(random(255)); } }); |
TorusKnot(Object)
radius |
Number (float) | 1 | radius of the entity (in meters) |
radiusTubular |
Number (float) | 1 | radius of the tubular portion of the entity (in meters) |
segmentsRadial |
Number (integer) | 36 | number of segmented faces around the circumference of the torus. |
segmentsTubular |
Number (integer) | 18 | number of segments along the circumference of the tube face. a higher number means the tube will be more round. |
p |
Number (integer) | 2 | a number that helps define the pretzel shape. the particular shape of the pretzel is defined by a pair of coprime integers, p and q. If p and q are not coprime the result will be a torus link. |
q |
Number (integer) | 3 | a number that helps define the pretzel shape. the particular shape of the pretzel is defined by a pair of coprime integers, p and q. If p and q are not coprime the result will be a torus link. |
// sketch.js file let world; let torusKnot; function setup() { // no canvas needed noCanvas(); // create a net AFrameP5AR.AR World object world = net AFrameP5AR.World('ARScene'); // grab a reference to the marker that we set up on the HTML side (connect to it using its id) marker = world.getMarker('hiro'); // construct a net AFrameP5AR.TorusKnot torusKnot = net AFrameP5AR.TorusKnot({ x:0, y:2, z:0, red:0, green:255, blue:0 }); // add the TorusKnot to the marker marker.add(torusKnot); }
Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
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 net AFrameP5AR.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 net AFrameP5AR.entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
Method | Category | Description |
getRadius() : Number |
Geometry | returns the current radius of the entity |
getRadiusTubular() : Number |
Geometry | returns the current radiusTubular of the entity |
getSegmentsRadial() : Number |
Geometry | returns the current segmentsRadial value for the entity |
getSegmentsTubular() : Number |
Geometry | returns the current segmentsTubular value for the entity |
getP() : Number |
Geometry | returns the current p value for the entity |
getQ() : Number |
Geometry | returns the current q value for the entity |
setRadius(Number) : void |
Geometry | sets the radius value for the entity |
changeRadius(Number) : void |
Geometry | updates the radius by the value provided (i.e. entity.changeRadius(0.1); will increase the radius by 0.1 meters. |
setRadiusTubular(Number) : void |
Geometry | sets the radiusTublar value for the entity |
setSegmentsRadial(Number) : void |
Geometry | sets the current segmentsRadial value for the entity |
setSegmentsTubular(Number) : void |
Geometry | sets the current segmentsTubular value for the entity |
setP(Number) : void |
Geometry | sets the current p value for the entity |
setQ(Number) : void |
Geometry | sets the current q value for the entity |
An empty "container" that can be used to hold other entities. Has no visual representation of its own.
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: let b = net AFrameP5AR.Box({ customData: { numClicks: 0 }, clickFunction: function(e) { e.setRed(random(255)); // we can also access our own customData object e.customData.numClicks++; console.log("I've been clicked " + e.customData.numClicks + "times"); } }); |
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = net AFrameP5AR.Box({ tickFunction: function(e) { e.setRed(random(255)); } }); |
Container3D(Object)
No entity-specific constructor parameters
// sketch.js file let world; let container; function setup() { // no canvas needed noCanvas(); // create a net AFrameP5AR.AR World object world = net AFrameP5AR.World('ARScene'); // grab a reference to the marker that we set up on the HTML side (connect to it using its id) marker = world.getMarker('hiro'); // construct a net AFrameP5AR.Container container = net AFrameP5AR.Container3D({ x:0, y:2, z:0 }); // add two boxes to the container let b1 = net AFrameP5AR.Box({x:-2, red:255, green:0, blue:0}); let b2 = net AFrameP5AR.Box({x:2, red:0, green:0, blue:255}); container.addChild(b1); container.addChild(b2); // add the Container to the marker marker.add(container); } // slowly rotate the container function draw() { container.spinY(1); }
Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
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 net AFrameP5AR.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 net AFrameP5AR.entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
No entity-specific methods
A Wavefront 3D model (.OBJ file format)
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: let b = net AFrameP5AR.Box({ customData: { numClicks: 0 }, clickFunction: function(e) { e.setRed(random(255)); // we can also access our own customData object e.customData.numClicks++; console.log("I've been clicked " + e.customData.numClicks + "times"); } }); |
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = net AFrameP5AR.Box({ tickFunction: function(e) { e.setRed(random(255)); } }); |
OBJ(Object)
asset |
String | undefined | the id of the element in your HTML file that points to the OBJ file you wish to load. this element must be a a-asset-item tag included under the a-assets tag. see the example program below for more information. |
mtl |
String | undefined | the id of the material file that should be used to texture the OBJ geometry file. this element must be a a-asset-item tag included under the a-assets tag. see the example program below for more information. |
// sketch.js file let world; let pikachuModel; function setup() { // no canvas needed noCanvas(); // create a net AFrameP5AR.AR World object world = net AFrameP5AR.World('ARScene'); // grab a reference to the marker that we set up on the HTML side (connect to it using its id) marker = world.getMarker('hiro'); // 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 = net AFrameP5AR.OBJ({ asset: 'pika_obj', mtl: 'pika_mtl', x: 5, y: 4, z: 0, rotationX:180, scaleX:8, scaleY:8, scaleZ:8, }); marker.add(pikachuModel); }
<!-- index.html file --> <body> <a-scene id="VRScene"> <a-assets id="VRAssets"> <a-asset-item id="pika_obj" src="images/Model.obj"></a-asset-item> <a-asset-item id="pika_mtl" src="images/Model.mtl"></a-asset-item> </a-assets> </a-scene id="VRScene"> </body>
Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
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 net AFrameP5AR.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 net AFrameP5AR.entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
No entity-specific methods
A Graphics Language Transmission Format 3D model (.GLTF file format)
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: let b = net AFrameP5AR.Box({ customData: { numClicks: 0 }, clickFunction: function(e) { e.setRed(random(255)); // we can also access our own customData object e.customData.numClicks++; console.log("I've been clicked " + e.customData.numClicks + "times"); } }); |
tickFunction |
Function | void | a custom function that will run once per frame (like draw does for the main sketch). this function should be implemented to accept a single argument which is a reference to the entity that was clicked. example: let b = net AFrameP5AR.Box({ tickFunction: function(e) { e.setRed(random(255)); } }); |
GLTF(Object)
asset |
String | undefined | the id of the element in your HTML file that points to the GLTF file you wish to load. this element must be a a-asset-item tag included under the a-assets tag. see the example program below for more information. |
// sketch.js file let world; let dogModel; function setup() { // no canvas needed noCanvas(); // create a net AFrameP5AR.AR World object world = net AFrameP5AR.World('ARScene'); // grab a reference to the marker that we set up on the HTML side (connect to it using its id) marker = world.getMarker('hiro'); // 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 = net AFrameP5AR.GLTF({ asset: 'dog', x: 5, y: 4, z: 0, rotationX:180, scaleX:8, scaleY:8, scaleZ:8, }); marker.add(dogModel); }
<!-- index.html file --> <body> <a-scene id="VRScene"> <a-assets id="VRAssets"> <a-asset-item id="dog" src="images/scene.gltf"></a-asset-item> </a-assets> </a-scene id="VRScene"> </body>
Method | Category | Description |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
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 net AFrameP5AR.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 net AFrameP5AR.entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
No entity-specific methods
A 2D entity that renders arbitrary text.
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: let b = net AFrameP5AR.Box({ clickFunction: function(e) { e.setRed(random(255)); } }); |
// 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 = net AFrameP5AR.World('ARScene'); // grab a reference to the marker that we set up on the HTML side (connect to it using its id) marker = world.getMarker('hiro'); // text primitive // you can select a font from one on this list: https://aframe.io/docs/1.2.0/components/text.html#stock-fonts // note that you can increase the text size using the 'scale' property let text = net AFrameP5AR.Text({ text: 'Hello, World!', red: 128, green: 128, blue: 128, side: 'double', x: 0, y: 2, z: 0, scaleX: 5, scaleY: 5, scaleZ: 5 }); marker.add(text); }
Method | Category | Description |
setText(String) : void |
Text | sets the text to display for this entity |
getText() : String |
Text | returns the current text being displayed by this entity |
setFont(String) : void |
Text | sets the font being used by this entity. can be either the name of one of A-Frame’s stock fonts or a URL to a font file. |
getFont() : String |
Text | returns the current font being used by this entity. can be either the name of one of A-Frame’s stock fonts or a URL to a font file. |
setTextAlign(String) : void |
Text | sets the alignment of the text ('center', 'left' or 'right') |
getText() : String |
Text | returns the current alignment of the text ('center', 'left' or 'right') |
constrainPosition(xMin, xMax, yMin, yMax, zMin, zMax) : void |
Position | ensures that the entity is constrained within the desired boundaries along all three axes. if an entity exceeds any of the constraints it is nudged back into position accordingly. |
getX() : Number |
Position | returns the current x position of the entity. this is the entity's LOCAL position in relation to its container. |
getY() : Number |
Position | returns the current y position of the entity. this is the entity's LOCAL position in relation to its container. |
getZ() : Number |
Position | returns the current z position of the entity. this is the entity's LOCAL position in relation to its container. |
nudge(x,y,z) : void |
Position | nudges the element based on its current position. accepts three numeric values (i.e. myEntity.nudge(1,0,0); will nudge the entity 1 meter from its current position along the x-axis. this is the entity's LOCAL position in relation to its container. |
setPosition(x,y,z) : void |
Position | sets the position of the entity. this is the entity's LOCAL position in relation to its container. |
setX(x) : void |
Position | sets the x position of the entity. this is the entity's LOCAL position in relation to its container. |
setY(y) : void |
Position | sets the y position of the entity. this is the entity's LOCAL position in relation to its container. |
setZ(z) : void |
Position | sets the z position of the entity. this is the entity's LOCAL position in relation to its container. |
getWorldPosition() : Object |
Position | returns the entity's WORLD position, not it's local position within its current container. this method is often used to compute the absolute position of an element in world space in order to deal with collisions of objects that may be nested inside of containers. |
getRotationX() : Number |
Rotation | returns the current x rotation of the entity. |
getRotationY() : Number |
Rotation | returns the current y rotation of the entity. |
getRotationZ() : Number |
Rotation | returns the current z rotation of the entity. |
rotateX(x) : void |
Rotation | sets the x rotation of the entity |
rotateY(y) : void |
Rotation | sets the y rotation of the entity |
rotateZ(z) : void |
Rotation | sets the z rotation of the entity |
setRotation(x,y,z) : void |
Rotation | sets the rotation of the entity. |
spinX(x) : void |
Rotation | spins the entity along the x axis based on its current rotation. i.e. myEntity.spinX(1); // spin by 1 degree |
spinY(y) : void |
Rotation | spins the entity along the y axis based on its current rotation. i.e. myEntity.spinY(1); // spin by 1 degree |
spinZ(z) : void |
Rotation | spins the entity along the z axis based on its current rotation. i.e. myEntity.spinZ(1); // spin by 1 degree |
getVisibility() : boolean |
Visibility | returns the current visibility state of the entity |
hide() : void |
Visibility | hides the entity by setting its visible property to false |
show() : void |
Visibility | shows the entity by setting its visible property to true |
toggleVisibility() : void |
Visibility | hides the entity if it is current visible and shows the entity if it is current hidden |
getScale() : Object |
Scale | returns the scale of the entity as an object (i.e. {x:0, y:0, z:0} |
getScaleX() : Number |
Scale | returns the x scale of the entity |
getScaleY() : Number |
Scale | returns the y scale of the entity |
getScaleZ() : Number |
Scale | returns the z scale of the entity |
setScale(x,y,z) : void |
Scale | sets the scale of the object in all axes |
setScaleX(x) : void |
Scale | sets the x scale of the object |
setScaleY(y) : void |
Scale | sets the y scale of the object |
setScaleZ(z) : void |
Scale | sets the z scale of the object |
getRed() : Number |
Material | returns the current red color of the entity |
getBlue() : Number |
Material | returns the current blue color of the entity |
getGreen() : Number |
Material | returns the current green color of the entity |
getOpacity() : Number |
Material | returns the current opacity of the entity |
getSide() : String |
Material | returns which faces of the entity will be textured (valid values are front , back and double ) |
setColor(red, green, blue) : void |
Material | sets the color of the entity |
setRed(red) : void |
Material | sets the red color of the entity |
setBlue(blue) : void |
Material | sets the blue color of the entity |
setGreen(green) : void |
Material | sets the green color of the entity |
setOpacity(Number) : void |
Material | sets the opacity of the entity (range = 0.0 to 1.0) |
setSide(String) : void |
Material | sets which faces of the entity will be textured (valid values are front , back and double ) |
add(Entity) : void |
Hierarchy | adds an entity as a child to this entity. this places the net AFrameP5AR.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 net AFrameP5AR.entity into the coordinate space of this entity. |
getChildren() : Array |
Hierarchy | returns an Array of all children of this entity |
removeChild(Entity) : void |
Hierarchy | removes a child entity from this entity. |
Copyright 2017-2024 Craig Kapp
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.