Phaser in 3D with Physics (yes, it works, using enable3d!)

Update

You can now use 3D objects and physics in your Phaser 3 games using enable3d.


Is there someone working to enhance this cool 3D stuff? Will there be 3D stuff in Phaser 4. I’m really curious.

Last week I was playing around with the Phaser 3D class. I added some spheres onto the canvas, added a ground, change the Phaser 3D class a bit, ported that bit to TypeScript, added physical bodies to the few objects I had, wrote a nice API for it and bundled it to a nice package, ready to publish to npm.

For now, it only support physics for spheres and grounds (boxes).

I will not publish the source code just now, because I am using a lot of code which is for backers only. So I’m am not sure if I can publish it?

I really hope @rich gives me the permission to publish it to github and npm to make it publicly available.

Anyways, here is the example game I made:
https://phaser3-typescript.s3.eu-central-1.amazonaws.com/3d-with-physics-example/index.html

And this is how the mainScene.ts looks like:

import Phaser3D from 'phaser3d'
import { Object3D } from 'phaser3d/dist/types'

export default class extends Phaser.Scene {
  phaser3D: Phaser3D
  sphere: Object3D
  constructor() {
    super({ key: 'MainScene' })
  }

  create() {
    // adding perspective or orthographic camera
    const camera = Phaser3D.PerspectiveCamera(this, { x: 3, y: 7, z: 18 })
    // const camera = Phaser3D.OrthographicCamera(this, { x: 3, y: 7, z: 18 })

    // start phaser 3D
    this.phaser3D = new Phaser3D(this, camera)

    // camera should look at the center of the scene
    this.phaser3D.camera.lookAt(this.phaser3D.scene.position)

    // adding orbit controls
    Phaser3D.OrbitControls(camera, this.scale.parent)

    // ground without physics
    this.phaser3D.add.ground({ width: 25, height: 10, depth: 1, y: 5 })

    // ground with physics
    const ground = this.phaser3D.physics.add.ground({ width: 25, height: 10, depth: 1, y: -5 })
    ground.body.setRestitution(1)

    // 3 spheres with physics
    const sphereConfig = {
      radius: 1,
      widthSegments: 16,
      heightSegments: 12
    }
    this.phaser3D.physics.add.sphere({ ...sphereConfig, color: 0xff0000, y: 20, z: 0 }).body.setRestitution(0.8)
    this.phaser3D.physics.add.sphere({ ...sphereConfig, color: 0xffff00, x: 0.25, y: 25, z: 0.25 }).body.setRestitution(0.8)
    this.phaser3D.physics.add.sphere({ ...sphereConfig, color: 0xff00ff, x: 0.25, y: 30, z: -0.25 }).body.setRestitution(0.8)

    // controllable sphere
    this.sphere = this.phaser3D.physics.add.sphere({ ...sphereConfig, radius: 0.5, color: 0x0000ff, x: -5, y: -3, z: 4 })
    this.sphere.body.setRestitution(0.2)

    this.input.keyboard.on('keydown', event => {
      const { key } = event,
        force = 5,
        velocity = 2

      switch (key) {
        case ' ':
          if (Math.abs(ground.position.y - this.sphere.position.y) <= 1.05) this.sphere.body.applyForceY(force)
          break
        case 'w':
          this.sphere.body.setVelocityZ(-velocity)
          break
        case 'a':
          this.sphere.body.setVelocityX(-velocity)
          break
        case 's':
          this.sphere.body.setVelocityZ(velocity)
          break
        case 'd':
          this.sphere.body.setVelocityX(velocity)
          break
      }
    })

    // light
    this.phaser3D.add.hemisphereLight({ skyColor: 0xddeeff, groundColor: 0x808080, intensity: 1 })
    this.phaser3D.add.directionalLight({ intensity: 1, x: 100, y: 100, z: 100 })
  }

  update() {
    // restart the scene once the blue ball falls down the ground
    if (this.sphere.position.y < -10) this.scene.restart()
  }
}

I hope that I will soon be able to publish and enhance it. :slight_smile:

6 Likes

No comments after one week? Don’t you think it is great to be able to add 3D objects and physics to your Phaser game with a Phaser like api?

I did even manage to coordinate 2D and 3D positions. Means you could, for example, add a 3D character (with animations) to your 2D jump’n’run game.

My first look today, wow :upside_down_face: impressive! I haven’t seen anything else using the backers’ library yet. I agree, let’s hope the efforts are continuing!

Of course it is great, but at least in my case I have always used game frameworks for their 2d qualities (xna (rip), libgdx, monogame), since 3d has never interested me at the developer level.

I am a fan of blender and have spent many hours creating “art” with it, and as anyone enjoyed watching the spectacular scenes that can be achieved. However, as hobbyist developer, working with 3d scares me :smile: , for the time it takes to achieve acceptable results with my skills.
This is why I don’t use frameworks like babylonjs and i’m not interested in adding another dimension.

Regards.

Does it mean the answer to this will be yes if it is published?

Same here. I have no experiences with 3D development. I tried babylon a while ago, but abandoned it quickly. I started few days ago looking deeper into Phaser 3D and then THREE.js, ammo.js and blender.

One huge advantage over 2D (I noticed so far) is that it is much easier to get animated characters. Just create your own character in blender or buy one and apply some animations from mixamo.

I guess if the api will be similar to the one phaser uses, many people will use it. I really think this can be great. I will definitely use it to create a 3D game in the future.

I will work further on it and hopefully publish it soon. I guess @rich will be ok with it, since I change the library a lot! And there is actually nothing “secret” about it. See this example.

I will also publish many examples.

Yes :slight_smile:

I have published the library to github.com.

And added a video on youtube. (Sorry for bad quality and sound).

You can already do much more than shown in the video. Like adding 3D character with animations or adding constraints. I will work on a document soon.

Hope you :heart: it!

UPDATE

I just uploaded some nice examples. You will find them on enable3d.io :grin:

1 Like

Great stuff @yannick

Similar to @jjcapellan I’ve always shied away from working in 3D. Your example game ran pretty smooth, nice work, I jumped up into infinity it seemed, took a while to fall back down, haha. Moving my view via the mouse worked perfectly. Perhaps its time I take a look into 3D, I have been wondering about if its actually easier to animate things when you have a defined 3d model.

I tried enable3d.io but none of the examples were working for me there. No console errors to report, I was just getting a small black box in the top left corner of browser window (I tried Firefox and Chrome).

Thanks :slight_smile:

Do you mean none of the example worked on your machine? I tested them on Linux, Windows and Android using Firefox and Chrome and all examples worked and still do.

Have you also tested my latest Virtual Reality example on your phone?
https://enable3d.io/examples/virtual-reality.html

Tested enable.io again from my home PC, examples are working fine now.

Likewise that VR example on my phone, seems to work too, that’s really cool. (I don’t have the goggles so I was just looking at two images)

Glad to hear that :slight_smile:

There are some more very cool feature I will implement in the next few days :+1:

This is very great news! Phaser 3 is one of the best game engine I ever tried, the only thing that was missing is 3D (and perhaps a Entity Component System as well… not sure though) ! Thank you very much for bringing it to us !

EDIT: By the way, does enable3d.io support PBR materials?

:slight_smile:

If three.js supports it, enable3d.io will (or does already) support it.

Since I do not know PBR, I search for it and found MeshStandardMaterial. I guess this is it?

// This is how you would use it:
this.third.add.box(
    { /* The Geometry Parameters */ },
    { standard: { /* The MeshStandardMaterial Parameters */ } }
)

Can you share a working example of what you expect? Then I will try to reproduce it in enable3d, to make sure it work correctly :slight_smile:

BTW, I will work almost every day on improving enable3d in the next few weeks. The goal is to be able to use every element of Phaser, three.js and ammo.js together without restrictions.

It does not need to be included into Phaser. You can already make use of it, if you use TypeScript Mixins.