Class: Sprite3D

Sprite3D

new Sprite3D(spriteSheet)

Sprite3D basically is a 2D container moving around in the 3D world that always faces direct front. Instead of rotating, it moves through images in a spritesheet that represent a 360 degree rotation of an object (such as a 360 degree render) around either the X or Y axis. In this way we have a 3D rendering that can be rotated in DepthJS.

See createjs.Container to understand the properties, methods, and events it inherits from createjs.Container.

Due to some complexity in the way 3D euler angles work (i.e. 2 different combos of rotX, rotY, rotZ can technically lead to the same exact orientation) using the true concatenated 3D angles doesn't work so hot. A good way to approximate for these purposes, however, is to just add the local rotY of the child and every parent (or rotX if that's what you're using) just for figuring what frame the Sprite3D should be on for its rotation. It's not technically perfectly accurate for complex usage, but for most usage it works fine.
Parameters:
Name Type Description
spriteSheet createjs.SpriteSheet A createjs.SpriteSheet instance to use for the Sprite3D.
Source:

Extends

Members

inverse :Boolean

A value of true inverts the axis of rotation in case your 3D sprite turns out to have been animated backwards to what the Sprite3D class expects.
Type:
  • Boolean
Default Value:
  • false
Source:

rotationOffset :Number

Offsets the Sprite3D zero rotation with your animation. Example: offsetting by 180 would make the middle of your animation be considered the 0 degree showing frame. Note: never set to more than + or - your rotationRange. Can be positive or negative.
Type:
  • Number
Default Value:
  • 0
Source:

rotationRange :Number

For load speed purposes if you're not using the full 360 degree rotation of your object you can tell Sprite3D how many degrees its supposed to cover when dividing up your animation sprite. Never set to more than 360. Positive numbers only.
Type:
  • Number
Default Value:
  • 360
Source:

rotX :Number

The rotX property sets the x-axis rotation value for the DisplayObject3D instance in degrees.
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.
Type:
  • Number
Inherited From:
Default Value:
  • 0
Source:

rotZ :Number

The rotY property sets the y-axis rotation value for the DisplayObject3D instance in degrees.
Type:
  • Number
Inherited From:
Default Value:
  • 0
Source:

sprite :createjs.Sprite

The createjs.Sprite instance used by the Sprite3D class.
Type:
  • createjs.Sprite
Source:

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:

transform3D :Transform3D

Contains the DipslayObject3D's local and global transform data.
Type:
Inherited From:
Source:

useRotX :Boolean

Set this to true if your animation is around the x-axis instead of y-axis.
Type:
  • Boolean
Default Value:
  • false
Source:

x :Number

The x property sets the x coordinate value for the DisplayObject3D instance.
Type:
  • Number
Inherited From:
Default Value:
  • 0
Source:

y :Number

The y property sets the y coordinate value for the DisplayObject3D instance.
Type:
  • Number
Inherited From:
Default Value:
  • 0
Source:

z :Number

The z property sets the z coordinate value for the DisplayObject3D instance.
Type:
  • Number
Inherited From:
Default Value:
  • 0
Source: