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. :slight_smile:

great job please make video tutorial in udemy I will buy it,thanks

[image] ansonben: please make video tutorial in udemy I would love to make videos, but this takes a lot of time which I do not have right now :confused: But I will continue to develop it and publish great examples like this one

I just released version 13. You can now add all kinds of physical shapes to your objects. [enable3d.io_examples_compare-physics-body-shapes.html]

Starter Template In case you want to get started fast. I just published the enable3d-project-template.

And another very cool example. Switching between 2d and 3d (orthographic and perspective camera) at runtime. Edit: Forgot to share the link.

Glad to hear :slight_smile: Just make sure, if you want to place an element behind the 3d elements, to set the depth to < 0. Like the background image in the example above. But this only works if the 3d scene (this.third.scene) has no background, which it does not have by default.

I finally released version 0.0.15 and wrote the documentation. The package on npmjs.com is now called @enable3d/phaser-extension It is now possible to use enable3d in standalone mode or as a simple physics plugin for three.js.

Yes, please check the first post.

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

Phaser 3

rexrainbow March 1, 2020, 11:08am 36

Thanks for sharing this framework, I had tested enable3d with my rexUI plugin successfully.

Topic		Replies	Views
Tutorial requests Phaser 3	63	10764	December 19, 2021
Phaser 3 TypeScript Examples Website Examples	1	1407	September 6, 2020
3D games with Phaser Phaser 3	4	846	January 3, 2020
First Phaser Game (3d version) Showcase	17	2632	December 2, 2020
Is it possible to make my game in Phaser? Phaser 3	0	358	August 27, 2021

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

Related topics