3D for Web, Mobile and PC

Written in TypeScript, uses three.js and ammo.js, brings physics to your three.js project and the third dimension to your Phaser 3 game.

Website

Visit the enable3d website for documentation and examples.

Upgrade to v0.20.0

ES2015

enable3d now targets es2015+. If you use TypeScript or Babel, set your target to es2015 (es6) or higher.

Dual Canvas Mode in Phaser

Since three.js r118, it is hard (impossible) to share the WebGL context with Phaser. Enable3d will therefore create a second canvas for 3d elements. It does this automatically. You do not have to make any changes manually.

Phaser Config

If you are using the Phaser 3D Extension, you have to add { transparent: true } to the Phaser game config and remove backgroundColor (if present).

const config = {
  type: Phaser.WEBGL,
  transparent: true,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: 1280,
    height: 720
  },
  scene: [MainScene],
  ...Canvas()
}

Packages

This project is split into many separate npm packages. To better understand the structure and relationships between the packages, see the diagram.

enable3d A standalone 3D Framework on top of three-graphics.
@enable3d/phaser-extension Allows to integrate the three-graphics package into your Phaser 3 Games.
@enable3d/ammo-physics The core Physics package. Wraps ammo.js physics.
@enable3d/ammo-on-nodejs Enables you to run ammo.js on your node.js server.
@enable3d/three-graphics The core 3D Objects package. A beautiful API for many three.js elements.
@enable3d/three-wrapper Wraps the three.js library and some of its examples in one package.
@enable3d/common Some common code used by almost every package.

Multiplayer Game

Want to make a Real-Time Multiplayer Game? Check out geckos.io.

License

The GNU General Public License v3.0 (GNU GPLv3) 2019 - Yannick Deubel. Please have a look at the LICENSE for more details.

Milkhan/enable3d