Building a Simple 3D Scene with Physics in JavaScript & Three.js
HTML-код
- Опубликовано: 22 фев 2022
- Quick and easy setup of a JavaScript 3d Physics Engine in three.js and ammo.js.
Support me on:
Patreon: / simondevyt
Follow me on:
Twitter: / iced_coffee_dev
Instagram: / beer_and_code
Github: github.com/simondevyoutube/
In this project I'll show you how to use ammo.js and three.js to setup a simple 3d scene with phyics in just a few minutes. We'll step through the basics of how to instantiate your physics world, and what the various options are, which can server to add a whole new dimension of possibilities to your 3D scenes.
What we'll cover:
* Three.js and Ammo.js initialization, how to instantiate your 3d physics world
* Creating rigid bodies and simple shapes such as boxes and spheres
* Using MotionState to synchronize transforms between the physics world and 3d scene.
There's a lot of options for JavaScript 3d engines, like Ammo.js, oimo.js. cannon.js, etc. They're all extremely capable physics engines, but we'll be focusing on one in particular, ammo.js which is a wrapper around the Bullet physics engine.
Full source code for the project is available, so if you're interested in fiddling with the code, screwing around with it, or improving it. 
Наука
If you enjyoed this, check out my GLSL course: simondev.teachable.com/p/glsl-shaders-from-scratch
Or support me on patreon!: www.patreon.com/simondevyt
I just started a project with Three.js physics today - this could not have popped up on my recommendations at a better time. Thanks Simon!
Same here!
Newcomer to Three.js here. Very cool to see you building the solar system this way! Thank you for sharing this
You're content is exceptionally entertaining and educating ... Thanks Simon. I am looking forward for your next video.
That would be super cool if you could do a video explaining web assembly.
I like that idea
Glad to see you back!
Another great video after a long time. I missed these 👍
Glad to have you back, Simon. 😊
Hoping to stick around!
I love your tutorials, it has such good content quality, it's unbelievable it's for free... I thank you for the entire community of developers that like me are being inspired by you! please never stop this I'll to spread the word about this channel!
Thank you :)
Very neat Simon!
I've used ammojs in a project a while ago, not remember precisely what made it really hard to setup (guess the integration with webassembly), but now I use cannon.js and let me tell you it works like a charm and it's really easy to setup and work with. Anyways, thanks for all these great videos!
I haven't tried it, but it looks great. For a while it was unmaintained, which was a negative but it looks like it's been picked up again. I'll try it out :)
@Manuel, aside from the easy-to-use; which one has more stability and bdtrer performance? I'm genuinely curious
@@D3NM0NT3UR Sincerely I have no opinion rather than the developer experience I had. Maybe ammojs is more performant cause the integration with webassembly (but that is just an assumption). If helpful, in a scene with cannonjs I had 300+ sphere collisions and worked just fine.
We need a interactive adventure game where you are the narrative voice.. guiding us to victory!!
Just when I thought he was gone for good, he comes back with something I was looking for!!!!
great explanation bro, love the vid
this video helped me add Bullet Physics to my C++ Game Engine project
Thank you for this video
That rocks! Love it
MY BOY BE POSTIN AGAIN
Missed your content man, great to see you uploading more stuff
Trying :) Life/pandemic has been really getting in the way.
Also, I think I requested an Ammo.js tutorial amongst others. Really glad you're so open about suggestions and requests
@@tomm.4447 Always open to suggestions, can't guarantee I'll do them but every suggestion goes on my list :)
This tutorials are golden😍 I wonder how great it would be to see a legend like you recreating some simple games made in other game engines with three.js like subway surfers or creating a course I would buy one without a second thought.
or a tutorial on reusable game components or design patterns for game programming in JavaScript.
ooh man you literally blow my mind every time do you have a discord channel or smthn?
These are great ideas, wrote them down. Nah no discord, have a twitter account if you wanna reach me there
i love your videos so much thank you
"Code will always make things clear." XD
He's back gents lolololol, let's go!!!!
Wake up, SimonDev posted!
when tmpTransform_ appeared in the step_ function I could no longer follow, but I like to see you do physics now. Maybe there will be a RigidBody Component someday :)
nice
Nice! I have used cannon but not ammo.
At last, clean code. Most of the links I have found just throw the code together in a most messy and disorganised manner and I hope for the sake of humanity that these people are never accepted as true developers or programmers. Thank you.
You put an underscore at the _end_ of your private member names!? ARE YOU OUT OF YOUR MIND!!? lol
You mad lad, you. I approve. 👍
I like to live dangerously
Can you make a small tutorial where u create a networked version of this with client side prediction and stuff?
Hi Simon, picked a random video but my game is finally coming along using all the skills I’ve learned from your videos. Was wondering if you’d be interested in seeing it :)
Neat, got a yt vid?
ammo.js seems good
I am big fan of your work sir, what do you think about creating RTS game with a WebRTC p2p lock-step networking? I believe it's one of the hardest genre to make it work on a browser, so it might provide a very interesting content, I wanted to create it myself but no idea where and how to start as a Threejs game dev guides are very limited to say the least. would appreciate some tips as well.
Very cool idea, wrote it down
I am planning on doing rocks and sand... would this library be a good place to start? the rocks it seems like it would be good, but sand? soil? mud?
Hello simon!!! When I'm trying to deploy my repository github with netlify I have code:2 doesn't matter what kind of project... can you make a video one day about deploy the web... your job is awesome and very easy understand!! 👏🙌
What are the requirements/recommendations to actually follow this project video
Use react-three-fiber
Its on my list!
Can you make a three.js cave generation tutorial ? I am looking for it for a long time but i can't make it.
Maybe try looking up Marching Cubes. There is a great video from Sebastian Lague which explains it greatly.
@@manuelgamez8074 Actually i did found this video but i don't understand 😂
How is the idea of using Svelte for reactivity and less codeing lines?
Could be interesting
Do you mean svelte for UI or for 3D development with three js? Personally I use svelte without even doubting when I have to include small UI components to my threejs apps because they works great with OOP structures and has lightweight bundle sizes. For the 3D, there is a project called svelthree which is like react three fiber but with svelte. Haven't checked it out yet but seems great if you are into functional programming (not my case but still interesting)
Hope I answered!
@@manuelgamez8074 I meant for 3D development using library like three.js with Svelte
Could you please try and move some of your game examples to React Native for Windows?
Yep those are on my list and I'm trying to get to that :)
Would you be willling to upload the code for this 🥺.
where does this.tmpTransform_ come from at 6:20 ?
oh anyway
How can i add gltf model as a rigid body?
That's a bit more advanced, I can go into that at some point.
@@simondev758 I hope so plse
same kinda tricky
Why do you prefer ThreeJS than BabylonJS ?
I don't, just haven't tried BabylonJS. It's eternally on my TODO list.
Anticlimactic boxes that don't fall down to the ground are the worst.
make a game，plz
What kind of game?
Bro you are getting old. 😀 👍
We all are
Something's broken in your set-up. Your fields end in an underscore.
Google JS Style guide
Is Ammo.js better in performance than Cannon.js or Rapier.js? @SimonDev your 12cents on this?
No idea, haven't tested. Pretty sure ammo.js is emscripten of the C++ version, whereas cannon is pure JS? No idea about rapier, if I had to guess between the 3, based on this and nothing else, I'd guess that ammo is the most performant.