Skip to content

🕹️ Standalone 3D Framework / Physics for three.js (using ammo.js) / 3D extension for Phaser 3

License

Notifications You must be signed in to change notification settings

ericdrosas87/enable3d

 
 

Repository files navigation

enable3d logo
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.

NPM version GitHub Workflow Status Three GitHub last commit

WebsitePackagesLicense

Website

Visit the enable3d website for documentation and examples.

Changelog

Upgrade to v0.23.0

Some useful packages are now available on npm:

Package Description
audio 🎵 Audio library for the Web Audio API.
keyboard ⌨️ Handling of keyboard events.
tap 🖱️ Handling of user interactions such as mouse, touch and pointer events.

Enable3d now depends on the dependencies below.
They are all listed as peerDependencies.

{
  "@types/matter-js": "0.17.3",
  "@types/three": "~0.130",
  "matter-js": "0.17.1",
  "phaser": "^3.55.2",
  "poly-decomp": "^0.3.0",
  "three": "~0.130"
}

Upgrade to v0.22.0

Please upgrade npm to v7. npm i -g npm@latest.

Upgrade to v0.21.0

Nothing special to mention.

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.

creately-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.

Development Server

Are you used to use Live Server? Check out Five Server instead!

Multiplayer Game

geckos.io logo

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.

About

🕹️ Standalone 3D Framework / Physics for three.js (using ammo.js) / 3D extension for Phaser 3

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 71.4%
  • JavaScript 28.4%
  • Other 0.2%