Update
You can now use 3D objects and physics in your Phaser 3 games using enable3d.
- See some example on enable3d.io
- Inspect the source code on github
- Watch a quick introduction video on youtube
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. 
impressive! I haven’t seen anything else using the backers’ library yet. I agree, let’s hope the efforts are continuing!
, for the time it takes to achieve acceptable results with my skills.
it!
Could you fix that? Thank you!