Class: Group3D

Group3D

new Group3D(element)

The Group3D class acts as a container for 3D based elements. Any 3D elements inside a Group3D will move and rotate as the Group3D does in a forward kinematic fashion. Group3D instances can also contain other Group3D instances and create infinitely deep forward kinematics.

In automatic scene creation based on the DOM this class is automatically created for any element with a CSS class dom3d-group3d or any elements that do not have any "dom3d-" prefixed CSS classes at all and have child elements.
Parameters:
Name Type Description
element An argument identifying the HTML Element the display object is to associate with. Can be the actual element itself, an HTML string representing an element to create, or a query selector string which will identify the intended HTML element already in the DOM.
Source:

Extends

Members

(readonly) children :Array

Allows access to the Array of child objects for this container. Special care should be taken when accessing to not modify the original Array.
Type:
  • Array
Default Value:
  • [empty Array]
Source:

(readonly) element :HTMLElement

Every DisplayObject3D represents an HTML Element. You can access that element by accessing the object's element property. Conversely any element that has an associated DisplayObject3D will have a property .dom3dObject which references its DisplayObject3D.
Type:
  • HTMLElement
Inherited From:
Default Value:
  • null
Source:

id :String

Each DisplayObject3D has a unique id property. When the element it represents has an id attribute at the time of instantiation it will match its element's id. Otherwise a unique one will be generated. You can also assign your own.
Type:
  • String
Inherited From:
Default Value:
  • ""
Source:

(readonly) isDisplayObject3D :Boolean

Any dom3d object meant to be part of the display list/stage will have this property as true.
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

(readonly) isGroup :Boolean

A Group3D will have an isGroup property of true for identification purposes. The main difference between this and the isGroup3D property is that a Stage3D instance will also have an isGroup property of true, but it will not not an isGroup3D of true. This serves to identify the object as the general concept of a 3D group/container, as opposed to identifying it as a specific Group3D class instance.
Type:
  • Boolean
Default Value:
  • true
Source:

(readonly) isGroup3D :Boolean

A Group3D will have an isGroup3D property of true for identification purposes. isDisplayObject3D (which is inherited) will also exist as a uniform way to identify dom3d display objects in general.
Type:
  • Boolean
Default Value:
  • true
Source:

(readonly) parent :DisplayObject3D

Each DisplayObject3D has a parent property that allows it to tell which object is currently this object's parent in the display list. Null if it is not in the display list.
Type:
Inherited From:
Default Value:
  • null
Source:

rotX :Number

The rotX property sets the x-axis rotation value for the DisplayObject3D instance in degrees.

This property can be set automatically upon instantiation by having a data-rotX attribute on the element set to a number.
Type:
  • Number
Inherited From:
Default Value:
  • 0
Source:

rotY :Number

The rotY property sets the y-axis rotation value for the DisplayObject3D instance in degrees.

This property can be set automatically upon instantiation by having a data-rotY attribute on the element set to a number.
Type:
  • Number
Inherited From:
Default Value:
  • 0
Source:

rotZ :Number

The rotZ property sets the z-axis rotation value for the DisplayObject3D instance in degrees.

This property can be set automatically upon instantiation by having a data-rotZ attribute on the element set to a number.
Type:
  • Number
Inherited From:
Default Value:
  • 0
Source:

(readonly) stage3D :Stage3D

Each DisplayObject3D has a stage3D property that allows it to tell which stage it is currently in the display list of. Is null when not in a display list.
Type:
Inherited From:
Default Value:
  • null
Source:

(readonly) type :String

A Group3D will have a type property of "Group3D" for identification purposes.
Type:
  • String
Default Value:
  • "Group3D"
Source:

x :Number

The x property sets the x coordinate value for the DisplayObject3D instance.

This property can be set automatically upon instantiation by either having a CSS style left property set in pixels, or a data-x attribute on the element set to a number.
Type:
  • Number
Inherited From:
Default Value:
  • 0
Source:

y :Number

The y property sets the y coordinate value for the DisplayObject3D instance.

This property can be set automatically upon instantiation by either having a CSS style top property set in pixels, or a data-y attribute on the element set to a number.
Type:
  • Number
Inherited From:
Default Value:
  • 0
Source:

z :Number

The z property sets the z coordinate value for the DisplayObject3D instance.

This property can be set automatically upon instantiation by having a data-z attribute on the element set to a number.
Type:
  • Number
Inherited From:
Default Value:
  • 0
Source:

Methods

addChild() → {DisplayObject3D}

addChild allows objects to be added to this Group3D. Note: likewise, a Group3D instance is added to another Group3D or to the Stage3D via those instances' addChild methods as well.
Parameters:
Type Description
DisplayObject3D Any object that inherits from DisplayObject3D may be added.
Source:
Returns:
Returns this Group3D object for chaining.
Type
DisplayObject3D

contains() → {Boolean}

contains allows you to check if a DisplayObject3D is contained (has been added via addChild) by the Group3D
Parameters:
Type Description
DisplayObject3D The object to test for.
Source:
Returns:
Returns a Boolean value for whether the Group3D contains the object or not.
Type
Boolean

getChildByElement() → {DisplayObject3D}

getChildByElement allows you to get a child of the Group3D by its associated HTML Element.
Parameters:
Type Description
HTMLElement The associated HTMLElement of the display object you're looking for.
Source:
Returns:
Returns a the DisplayObject3D found if it is found. Returns null of none found.
Type
DisplayObject3D

getChildById() → {DisplayObject3D}

getChildById allows you to get a child of the Group3D by its id property (which, remember, will match the actual element's id attribute if it had one).
Parameters:
Type Description
String The String id to look for.
Source:
Returns:
Returns a the DisplayObject3D found if it is found. Returns null of none found.
Type
DisplayObject3D

removeChild() → {Group3D}

removeChild allows objects that were added via addChild to be removed.
Parameters:
Type Description
DisplayObject3D Any object that inherits from DisplayObject3D and has been added may be removed.
Source:
Returns:
Returns this Group3D object for chaining purposes.
Type
Group3D

setX(value) → {DisplayObject3D}

setX (and likewise the setY, setZ, setRotX, setRotY, and setRotZ which are not documented because they operate the same as setX but for their respective properties) is a method that allows you to set the x coordinate value in a chainable way like is familiar in libraries such as jQuery. So myObj.setX(20).setY(20); is legitimate to set the x and y to 20. It also allows relative changes via a string using operators, such as "+=20", "*=2" or just "++" and "--" increments. This is much slower than just setting the properties, but useful nonetheless in some situations.
Parameters:
Name Type Description
value Number | String The new number value to set it to, or the string indicating the relative change to happen.
Inherited From:
Source:
Returns:
Returns this DisplayObject3D for chaining purposes.
Type
DisplayObject3D