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

Offered by Skillshare,
Learn Three.js while building a 3D game with physics (Skillshare)

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. 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.
In this class, we are going through how to create a game with Three.js and Cannon.js. There are multiple ways you can do your own version of the game. You can take the concepts of this video and build your own version, or you can copy what I came up with and change the game to your liking. You can just go to my version, click the Fork button at the bottom right corner and you can change its code. There are many comments in my version, so if anything was unclear in the course, you can find your answers there.
Make it your own. Make sure your game has a unique look and game logic.
Some challenges you can take:

  • Be more generous. It's impossibly hard to reach a high score in this game so why not help the player a bit? If the placement of the box is close enough, then do not cut it, or maybe even make it a little bigger.
  • Add a cool background and change the color scheme to your liking.
Go to Class
MOOC List is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Related Courses

ES6 JavaScript Classes the Easy Way (Skillshare) Skillshare
Skillshare

ES6 JavaScript Classes the Easy Way (Skillshare)

In 2015, the JavaScript programming language got a major facelift with many improvements to the syntax and tons of new features. This new version is known as ES6, or ES2015, and each year since an updated version has been released. ES6 Classes, as well as instance and static methods, are vitally important to know and understand because so many projects and companies are migrating to the newest version of JavaScript. Many Front End libraries, such as React, rely heavily on the new Class syntax.

Self Paced
Self-Paced
Learn React (Coursera) Coursera
Scrimba

Learn React (Coursera)

The ultimate React 101 - the perfect starting point for any React beginner. Learn the basics of modern React by solving 140+ interactive coding challenges and building eight fun projects. In this 143-part interactive tutorial, you'll learn how to build dynamic, interactive web applications with React.js. With Scrimba’s head of education, Bob Ziroll, as a guide, you’ll get to know all the bang-up-to-date features of React and fix them firmly in your memory by using them to create hands-on projects.

Nov 16th 2026
3 Weeks
The Complete Guide to Aiming in Fortnite (Skillshare) Skillshare
Skillshare

The Complete Guide to Aiming in Fortnite (Skillshare)

Have you been struggling to win Fortnite matches and tournaments? Do you get out-aimed by your opponents? This course is for you! Aiming is crucial in most games out there, and how well you can aim will determine your chances at the Victory Royale. Enhance your Fortnite gameplay by learning how to out-aim your opponents. This course will cover the basic, intermediate, and advanced aspects of aiming along with tactics to maximize your warmups and preparation before casual, arena, or tournament matches.

Self Paced
Self-Paced
Diseño de Videojuegos: Una introducción (Coursera) Coursera
Universidad de los Andes

Diseño de Videojuegos: Una introducción (Coursera)

¡Bienvenidos a Diseño de videojuegos: una introducción! El diseño de videojuegos es el arte de aplicar conceptos de diseño para crear la interacción entre jugadores. Es un ejercicio mental que requiere varios conocimientos en diferentes campos y la habilidad de comunicar qué es lo que se quiere lograr. Este curso hace parte del Programa desarrollo y diseño de videojuegos, de la Universidad de lo Andes, Colombia.

Nov 16th 2026
4 Weeks
JavaScript Interview Challenges (Coursera) Coursera
Scrimba

JavaScript Interview Challenges (Coursera)

Your essential tech interview preparation pack! Practice solving problems and honing the skills you need to succeed in a frontend coding interview. Are you applying for frontend developer roles? Do you wish to test out your JavaScript knowledge? Do you love solving code challenges? If any of the above applies to you, JavaScript Interview Challenges should be your next Scrimba course!

Nov 16th 2026
3 Weeks
Story and Narrative Development for Video Games (Coursera) Coursera
California Institute of the Arts

Story and Narrative Development for Video Games (Coursera)

In this course, you will examine how storytelling acts as a vital mechanism for driving video gameplay forward. Looking at several historical and contemporary games, you will be asked to evaluate and interpret different story styles with the goal of identifying themes and procedures for your own game ideas. We'll examine traditional narrative story processes, such as three-act structure, and how they fit into game story flows and the strategic elements of gameplay. Ultimately, you will learn how to define character, setting, and structure to create a compelling game concept.

Nov 9th 2026
4 Weeks
Interactive Data Visualization: Getting Started with D3.js - V5 (Skillshare) Skillshare
Skillshare

Interactive Data Visualization: Getting Started with D3.js - V5 (Skillshare)

D3.js has become the standard for creating custom interactive data visualizations for the web. This feature-rich open source javascript library allows you to create dynamic and extremely diverse experiences that can interact with users and any other element on a web page. For programmers familiar with Javascript, it is not hard to pick up and run with D3 very quickly. For those with limited javascript experience, it can be intimidating.

Self Paced
Self-Paced
How To Create a Website in a Weekend! (Project-Centered Course) (Coursera) Coursera
The State University of New York

How To Create a Website in a Weekend! (Project-Centered Course) (Coursera)

In this project-centered course*, you’ll design, build, and publish a basic website that incorporates text, sound, images, hyperlinks, plug-ins, and social media interactivity. We’ll provide you with step-by-step instructions, exercises, tips, and tools that enable you to set up a domain name, create an attractive layout for your pages, organize your content properly, ensure that your site functions well across different operating systems and on mobile devices, keep your site safe, and finally, let people know your site is online. We’ll even show you how to track your visitors.

Nov 9th 2026
3 Weeks
Desarrollo de Videojuegos 3D en Unity: Una Introducción (Coursera) Coursera
Universidad de los Andes

Desarrollo de Videojuegos 3D en Unity: Una Introducción (Coursera)

Este curso te permite crear un prototipo de juego 3D, explorando los conceptos necesarios y las herramientas para desarrollo de videojuegos en 3D disponibles en Unity y en la Web. Explorarás y harás uso de herramientas para crear una escena 3D en Unity, podrás agregar personajes y animaciones 3D e integrarlas en los escenarios que crees, podrás definir comportamiento e interacción entre elementos del videojuego, y publicar en la Web los resultados de lo que diseñes. Vas a utilizar como base los conceptos aprendidos en el curso introductorio de desarrollo, ahora aplicados a juegos 3D.

Nov 16th 2026
5-12 Weeks