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

Phaser 3
21

Thanks :smiley:

This is not a question of a fix. It is a question of the right settings.

You could, for example, device the device resolution by 2,

scale: {
  mode: Phaser.Scale.FIT,
  autoCenter: Phaser.Scale.CENTER_BOTH,
  width: window.innerWidth / 2,
  height: window.innerHeight / 2
},

disable antialias,

...Canvas({ antialias: false })

or ignore objects that are too far away.

this.third.camera.far = 40
this.third.camera.updateProjectionMatrix()

Or you could simple purchase a better device.

22

Anyone looking for a first person shooter example?

2 Likes
23

wow you are really pumping these out! great job with this!

also i love that the bullets bounce :joy:

24

I’m on :fire: these days!

I admit, it does not look very realistic :rofl:

25

While I was coding my latest example, I thought, it would be cool to have a 3d version of the Phaser Dude.

Unfortunately I do have almost zero 3d design skills. So I’m asking you guys. It there someone with the skills and time to design a 3d dude with one or two simple animations?

Would be nice to have a .blend file which exports a .glb file :smiley:

26

@yannick : an you make this run @ 60 FPS? I LOVE the 3D being used in Phaser 3, but it is really slow. I use NVidia GeForce 960M.

27

You can’t expect to run it at 60fps on a old device, in a high resolution with antialias enabled.

I already wrote what you could do to increase the performance in post #21.

In addition you could also disable the shadows.

Most 3d games have a menu where you can adjust the graphics settings. Just add such a menu to your game and you are good to go.

28

@Yannick : My system is not that old. What do you consider ‘old’ & why?

29

I guess I mean old or (too) slow.

Still, if it does not run at 60fps, try the adjustments I suggested.

Or try a different browser.

Also, browser plugins can have a huge impact on the performance. Try it in the incognito mode without plugins.

30

More likely it’s not running on the 960M, but on the slower integrated gpu. Although even that one should be able to run such simple scene at 60 FPS.

31

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

32

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

33

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

1 Like
34

Starter Template

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

35

And another very cool example.

Switching between 2d and 3d (orthographic and perspective camera) at runtime.

Edit:

Forgot to share the link.

2 Likes
36

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

1 Like
37

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.

1 Like
38

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.

2 Likes
39

@yannick : it is on github?

40

Yes, please check the first post.