sceneObjects.js

Classes

Element

This class is designed to represent a a-entity element of given type from the AFrame framework, but it can also handle any normal HTML element type. The main idea behind this class is to provide a easy way to handle a-entity elements and to create a base class for more specific a-entity types. The methods of this class are modeled after real HTML operations, so elements of this class can still be used just like any HTML element, while allowingthe possibility of additional operations.

AScene

This class represents a singleton a-scene element for use in the AR.jscontext. This will extend the basic Element class.The class is responsible for setting up the needed markers and managing updates to the a-scene.

This extends the class Element.

AMarker

This class represents a a-marker element for use in the AR.js context.The marker will always be of type "barcode".This is the heart of the scene and all other elements need to be connectedto a marker, for them to be visible in the scene.

For more information about barcode markers and possible values look at:Marker

This extends the class Element.

TextBox

This class represents a a-entity element with a plane geometry and textcomponent. Text added to the scene should be added as TextBox elements.

This extends the class Element.

Element

This class is designed to represent a a-entity element of given type from the AFrame framework, but it can also handle any normal HTML element type. The main idea behind this class is to provide a easy way to handle a-entity elements and to create a base class for more specific a-entity types. The methods of this class are modeled after real HTML operations, so elements of this class can still be used just like any HTML element, while allowing the possibility of additional operations.

Kind: global class
See

• AScene for a specialized a-scene element.
• AMarker for a specialized a-marker element.
• TextBox for a specialized a-entity element, which implements text content in the scene.

• Element
  • new Element(type)
  • .type : string
  • .element : HTMLElement
  • .parent : Element
  • .children : Map.<string, Array.<Element>>
  • .appendChild(child) ⇒ Element
  • .clear() ⇒ void
  • .setAttribute(key, value) ⇒ Element
  • .setAttributes(attributes) ⇒ Element
  • .getAttribute(key) ⇒ string

new Element(type)

Create a instance of the Element class.

Param	Type	Description
type	string	The type of element to create.

Example

const marker = new Element("a-marker");

element.type : string

The type of the element.

Kind: instance property of Element

element.element : HTMLElement

The actual HTML element.

Kind: instance property of Element

element.parent : Element

The parent element, if there is one.

Kind: instance property of Element

element.children : Map.<string, Array.<Element>>

A map of all the children for this element, keyed by their type.

Kind: instance property of Element

element.appendChild(child) ⇒ Element

This method appends a child element to this element. The child needs to be an instance of the Element class too.

Kind: instance method of Element
Returns: Element - Returns the appended child.
Throws:

• TypeError Will throw an error, if the child is no instance of the Element class.

Param	Type	Description
child	Element	The child element.

Example

const parent = new Element("a-scene");
const child = new Element("a-marker");
parent.appendChild(child);

element.clear() ⇒ void

This method clears all the child elements from this element and also removes them from the DOM.

Kind: instance method of Element
Returns: void - This method does not return anything.
Example

const parent = new Element("a-scene");
const child = new Element("a-marker");
parent.clear();
// This removes child from the parent element and the DOM.

element.setAttribute(key, value) ⇒ Element

Setter method for a single attribute on the element.

Kind: instance method of Element
Returns: Element - Returns the the current element for method chaining.

Param	Type	Description
key	string	The name of the attribute.
value	string	The value to set.

Example

const sun = new Element("a-entity");
sun.setAttribute("pros", "life").setAttribute("cons", "deadly laser");
// This will set the two attributes "pros" and "cons".

element.setAttributes(attributes) ⇒ Element

Setter method for multiple attributes on the element at once.

Kind: instance method of Element
Returns: Element - Returns the the current element for method chaining.

Param	Type	Description
attributes	Object.<string, string>	Object, where each key is an attribute name, and the corresponding value is the value of the attribute.

Example

const sun = new Element("a-entity");
sun.setAttributes({
 "pros": "life",
 "cons": "deadly laser"
});
// This will set two attributes "pros" and "cons".

element.getAttribute(key) ⇒ string

Getter method for the value of an attribute on the element.

Kind: instance method of Element
Returns: string - The value of the attribute or null, if the attribute does not exist.

Param	Type	Description
key	string	The name of the attribute.

Example

const universe = new Element("a-entity");
universe.setAttribute("answer", "42");
console.log(element.getAttribute("answer"));
// This will output "42".
console.log(element.getAttribute("question"));
// This will output "null"!

AScene

This class represents a singleton a-scene element for use in the AR.js context. This will extend the basic Element class. The class is responsible for setting up the needed markers and managing updates to the a-scene.

This extends the class Element.

Kind: global class
Singleton:
See: Element for the base class.

• AScene
  • new AScene()
  • instance
    • .update() ⇒ void
    • .clear() ⇒ void
  • static
    • .getInstance() ⇒ AScene
    • .removeInstance() ⇒ void
    • .getDataMarker() ⇒ AMarker

new AScene()

Private constructor, such that this can not be directly instantiated. Throws an error if this is called outside of getInstance.

Throws:

• TypeError Will throw an error, if attempting to instantiate directly.

aScene.update() ⇒ void

Update method for recalculating the distance and triggering updates in the Scene instance. The method is invoked recursively using requestAnimationFrame.

Kind: instance method of AScene
Returns: void - This method does not return anything.
See: Scene for the Scene instance.

aScene.clear() ⇒ void

This method clears the two marker in the scene.

Kind: instance method of AScene
Returns: void - This method does not return anything.

AScene.getInstance() ⇒ AScene

This method returns the singleton instance of the AScene class. If the instance does not exist, create it.

Kind: static method of AScene
Returns: AScene - The singleton instance.

AScene.removeInstance() ⇒ void

This method removes the current singleton instance.

Kind: static method of AScene
Returns: void - This method does not return anything.

AScene.getDataMarker() ⇒ AMarker

Getter method for the data marker. If no instance of the AScene class exists, create one.

Kind: static method of AScene
Returns: AMarker - The data marker.

AMarker

This class represents a a-marker element for use in the AR.js context. The marker will always be of type "barcode". This is the heart of the scene and all other elements need to be connected to a marker, for them to be visible in the scene.

For more information about barcode markers and possible values look at: Marker

This extends the class Element.

Kind: global class
See: Element for the base class.

• AMarker
  • new AMarker(value)
  • .getVisibility() ⇒ boolean
  • .highlightMarker(color) ⇒ void
  • .addTextBox(value, width, wrapCount, position, rotation) ⇒ TextBox

new AMarker(value)

Create an instance of the AMarker class.

Param	Type	Description
value	string	The barcode value of the marker.

Example

const oh = new AMarker("0");
const hey = new AMarker("1");
const mark = new AMarker("5");

aMarker.getVisibility() ⇒ boolean

Getter method for the visibility flag of this element, because the flag is not attached to the element directly.

Kind: instance method of AMarker
Returns: boolean - Returns the visibility flag.

aMarker.highlightMarker(color) ⇒ void

The method highlights this marker in the scene, by adding a colored box on top of the marker.

Kind: instance method of AMarker
Returns: void - This method does not return anything.

Param	Type	Description
color	string	The color of the box.

Example

const marker = new AMarker("1");
marker.highlightMarker("red");

Example

const marker = new AMarker("1");
marker.highlightMarker("rgb(255, 0, 100)");

aMarker.addTextBox(value, width, wrapCount, position, rotation) ⇒ TextBox

This method creates a TextBox element and appends it to this marker. The textColor is set to "black". The boxColor is set to "white". The boxOpacityis set to "0.3".

Kind: instance method of AMarker
Returns: TextBox - The added TextBox element.

Param	Type	Description
value	string	The text value of the TextBox.
width	string | number	The width of the text block.
wrapCount	string | number	Number of characters before wrapping text.
position	string	Position of the TextBox relative to the marker position.
rotation	string	Rotation around the center of the new TextBox element in dec.

Example

const marker = new AMarker("1");
marker.addTextBox(
 "Beware of the TextBox-Mimic!", 
 "10", 
 50, 
 "0 1 0.5", 
 "-90 0 10"
);

TextBox

This class represents a a-entity element with a plane geometry and text component. Text added to the scene should be added as TextBox elements.

This extends the class Element.

Kind: global class
See: Element for the base class.

• TextBox
  • new TextBox(value, width, wrapCount, position, rotation, textColor, boxColor, boxOpacity)
  • .changeTextColor(newColor) ⇒ TextBox
  • .changeBoxColor(newColor) ⇒ TextBox

new TextBox(value, width, wrapCount, position, rotation, textColor, boxColor, boxOpacity)

Create an instance of the TextBox class.

Param	Type	Description
value	string	The text value.
width	string | number	The width of the text block.
wrapCount	string | number	Number of characters before wrapping text.
position	string	Relative Position.
rotation	string	Rotation around the center.
textColor	string	The color of the text.
boxColor	string	The color of the box.
boxOpacity	string | number	Opacity of the box.

Example

const angel = new TextBox(
 "Don't blink!", 
 10, 
 "10", 
 "0 0 -1.3", 
 "-90 10 0", 
 "red", 
 "rgb(0, 0, 0)", 
 0.5
);

textBox.changeTextColor(newColor) ⇒ TextBox

This method changes the color of the text component.

Kind: instance method of TextBox
Returns: TextBox - Returns the the current element for method chaining.

Param	Type	Description
newColor	string	New color.

Example

const warning = new TextBox(
 "This is a example!",
 10, 
 "10", 
 "0 0 -1.3", 
 "-90 10 0", 
 "white", 
 "rgb(0, 0, 0)", 
 0.5
);
warning.changeTextColor("red");

textBox.changeBoxColor(newColor) ⇒ TextBox

This method changes the color of the plane.

Kind: instance method of TextBox
Returns: TextBox - Returns the current element for method chaining.

Param	Type	Description
newColor	string	new color.

Example

const text = new TextBox(
 "This is a example!",
 10, 
 "10", 
 "0 0 -1.3", 
 "-90 10 0", 
 "white", 
 "rgb(0, 0, 0)", 
 0.5
);
text.changeTextColor("white").changeBoxColor("black");
// This changes the text from light-mode to dark-mode.