Learn Three.js while building a 3D game with physics

In this course, we create a 3D game with physics. We will use Three.js to generate the 3D graphics and Cannon.js to simulate physics in this game. This tutorial is primarily for beginners.

If you haven’t used these libraries before don’t worry. This is an introductory course both for Three.js and Cannon.js. We will go through everything in detail. We go through, how to set up the scene, how to add lights, how to set up the camera, how to add animation and event handlers, and finally, we will add physics. The only thing you need to be familiar with is JavaScript, but we won’t do anything crazy with that either. So if you have a basic understanding of JavaScript, and you want to learn Three.js then this is a good start.

👉 You can find the whole game and its source code on Codepen: https://codepen.io/HunorMarton/pen/MWjBRWp

0:00 Introduction
1:11 A first example
1:56 A scene with a box
3:16 Lights
5:31 Camera options
9:09 The renderer
10:20 Setting up our game
15:10 Event handling and animation
19:30 Splitting a box
27:40 Adding physics with Cannon.js
34:44 Next steps

The game in the video is heavily inspired by the mobile game Stack: https://apps.apple.com/us/app/stack/id1080487957

Website — http://hunormarton.github.io/
CodePen — https://codepen.io/HunorMarton
Twitter — https://twitter.com/HunorBorbely

#threejs #cannonjs #javascript #game #codepen

Видео Learn Three.js while building a 3D game with physics канала Hunor Márton Borbély