kirilledelman / pixelbox

THREE.js extension for rendering point cloud sprites

PixelBox - an extension for three.js, for rendering voxel sprites.

It includes base classes, a sprite and scene editor, and some examples.

PixelBox was originally developed to create Santa Drop game for iOS, and then expanded with extra tools and released as open source.

Links

• Example 1: Single scene
• Example 2: Transitions and composer
• Example 3: Animations and tweens
• Example 4: Instancing templates and object recycling
• Example 5: Animation events
• Example 6: Snow
• Example 7: Paths
• Example 8: Physics
• Example 9: Animated Sprites
• Scene Editor / Sprite Editor - works best with Google Chrome.

Project source also contains above examples, as well as the Scene Editor as Google Chrome extension / app.

Documentation

PixelBox Wiki has all available documentation for this project.

PixelBox sprites

• Based on THREE.PointCloud.
• Multiple named animations, that can be played or looped at variable speed, forward or backward.
• Named anchors that are animated along with sprite's frames. They can be used, for example, to specify where the character's hand is during different animations. Other objects can be added to anchors, which serve as simple containers.
• Ability to tween any property, such as opacity, position, or color.
• Support transparent and self-illuminated voxels.
• Cast and receive shadows.
• Sprite opacity, tint, and additive color.
• Sprite stipple (pattern transparency).
• Animation and anchor events.
• Static scenery can be merged into a single pointcloud for faster drawing.

PixelBoxScene class

• Parses / populates scenes created with PixelBox scene editor.
• Easy scene hierarchy access by object name. e.g. scene.robot.head.eyeball
• Supports instancing of templates created with scene editor.
• Object recycling: instead of destroying objects, they get recycled for quicker reuse.
• CANNON physics integration.

PixelBoxAssets class

• Easy preloading of assets - PixelBox scenes, sprites, image textures, and json files.
• Load progress and complete notifications.

PixelBoxRenderer class

• Used to switch between PixelBox scenes, with or without transitions.
• Scene transitions using textures or blends are adopted from three.js examples.
• Built-in downsampling of resolution rendering.

LinePath class

• Moves objects along a path in space using tweens.
• Integrated into Scene Editor.

FxSprite class

• Play Adobe Flash MovieClips animations.
• Supplied exporter (JSFL) for Adobe Flash CS6 or higher.

Contact

You can contact the developer by email