Skip to content
UdemyWeb DevelopmentPaid courseIntermediate levelCertificate

Hands-on Three.js 3D Web Visualisations (Udemy.com)

Create stunning visualizations and 3D scenes using the Three.js library

Created by: Packt Publishing

Last updated December 2019

icon
What you will learn

  • Learn the basics of 3D applications: vertices, faces, meshes, cameras, and renderers
  • Learn how to set up a Three .js web app: the scene, camera, and renderer
  • Master the scene hierarchy and child-parent relationships, and how they affect the final location and orientation of objects
  • Explore simple mesh shapes (such as boxes, spheres, cylinders, planes, and cones) using the Three .js library
  • Learn how to source, create, and load complex assets, including textures
  • Discover how to use the brilliant animation system that is part of the THREE .js library
  • Add a post-processor to a rendered image, to make it look like an old film or a dot screenprint

How it compares

Against the other 815 rated Udemy courses in Web Development on CourseDuck:

  • Rating4.2 out of 5higher than 13% of them
  • Reviews222#446 of 816 by number of reviews
  • Length3.8 hoursshorter than 72% of them
  • Last updatedDecember 2019earlier than 86% of them

icon
Course Description

Three.js is the most popular JavaScript library for displaying 3D content on the web, giving you the power to display incredible models, games, music videos, and scientific/data visualizations in your browser and even on your smartphone!

This course begins with a 3D beginner-level primer to 3D concepts and some basic examples to get you started with the most important features that Three.js has to offer. You'll learn how to quickly create a scene, camera, and renderer and how to add meshes using the Geometry primitives included with the library. You'll explore troubleshooting steps that will focus on some of the common pitfalls developers face. You'll learn the very sophisticated animation system included with the library. The course concludes by introducing post-processing, essentially adding filters to your rendered scene, and GLSL, the shading language that is used by all materials included with the library. You'll see how creating your materials is easier than you'd imagine using GLSL.

By the end of this course, you'll be able to quickly add advanced features to your 3D scenes, improve the way users interact with them, and make them look stunning.

About the Author

Nik Lever started work in 1980 as a cartoon animator. Buying a Sinclair ZX81 in 1982 was the start of a migration to a role as a full-time programmer. The ZX81 was quickly swapped for the Sinclair Spectrum; a Z80 processor and a massive 48K of RAM made this a much better computer on which to develop games and he developed games using Sinclair Basic and then Z80 Assembler. The Spectrum was swapped for a Commodore Amiga and Nik developed more games in the shareware market, moving on to use C. At this stage, programming was essentially a hobby. Paid work was still animated TV commercials.

Nik finally bought a PC in the early nineties, created a sprite library ActiveX control, and authored his first book, aimed at getting designers into programming. In the mid-nineties along came Flash and the company he was now running, Catalyst Pictures, became known for creating games.

Since then, the majority of his working life has been devoted to creating games, first in Flash and then Director, as Director published the first widely available 3D library that would run in a browser using a plugin.

In recent years, his game development has involved using HTML5 and Canvas to create 2D and 3D games using both custom code and various libraries. His preference is to use the latest version of Adobe Flash, now called Animate, which exports to JavaScript via the Createjs library and uses the THREE.js WebGL library.

Nik has developed online content for the BBC, Johnson and Johnson, Deloitte, Mars Corporation, and many other blue-chip clients. The company he's run for over 30 years has won several awards and has been nominated for a BAFTA twice, the UK equivalent to the Oscar.

Over the last 20 years, he has been struck by just how difficult it has been to get good developers and has decided to do something about this rather than just complain. He runs a CodeClub for 9-13-year-old kids and has developed several courses for Udemy in the hope of inspiring and educating new developers.

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

Packt Publishing

Packt are an established, trusted, and innovative global technical learning publisher, founded in Birmingham, UK with over eighteen years experience delivering rich premium content from ground-breaking authors and lecturers on a wide range of emerging and established technologies for professional development.


Packt’s purpose is to help technology professionals advance their knowledge and support the growth of new technologies by publishing vital user focused knowledge-based content faster than any other tech publisher, with a growing library of over 9,000 titles, in book, e-book, audio and video learning formats, our multimedia content is valued as a vital learning tool and offers exceptional support for the development of technology knowledge.


We publish on topics that are at the very cutting edge of technology, helping IT professionals learn about the newest tools and frameworks in a way that suits them.

icon
More courses by Packt Publishing

$64.99

$11.99

$11.99

$59.99

$59.99

$59.99

icon
More Web Development courses

$19.99

$89.99

$89.99

$79.99

$10.99

$84.99

icon
Reviews

4.2

222 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

By Sety Vyas on 6/13/2022

Instructions are easy to follow. Instructor is very knowledgeable, and gives lots of helpful tips along the way. The exercise files are very beneficial. I could play around with .js files and test different things. Overall pace of instructions is also good. I had a reasonable experience with javascript coding, which made things easy for me. But someone with no JS experience could struggle a bit (just something to keep in mind).

By Candi Bella on 8/5/2021

There are so many things that I find wrong with this tutorial. Firstly, it should have been taught using a normal text editor. Next, it doesn't fully explain all ways of writing/executing the code. I detest tutorials that don't fully explain WHY things are done a certain way. How do I import custom files? When do I use functions and not? Why/why not? I can copy the code written here and have it work but I am still completely confused about how and why most stuff works the way it does.

By Ben Randle on 2/2/2021

i took a lot from this course. i would have liked to have seen a little more information about the animation system, maybe actually using some more of the functions like crossFadeTo etc. GLSL was a bonus i didn't expect to see but i felt it could be omitted in order to concentrate on more specific Three.js topics. it was also really nice to see blender used heavily in some examples as a game dev it helps me understand more about what the artists see/export to me.

By Alan Swithenbank on 1/29/2021

This is an excellent course and I learned a lot of useful information from it. I'm confident I now at least know how and where to look to carry on from here. I couldn't quite justify a 5 star rating as it needs some updates. Some of the code pad links are broken, and, though it isn't a blender course, it covers a good bit in blender 2.7, and the current blender 2.8/9 user interface is radically different (in a good way IMHO).

By Luis Orozco on 6/28/2020

Excellent course. I think you probably should be very familiar with javascript before trying out this course. And if you know another 3d program (like unity or blender), a lot of the concepts will be very familiar. There's a ton of information packed in this course. It's a huge subject to learn, but the author goes through enough of the needed concepts to get you up to speed with three.js, but by no means you'll be an expert after the course. You'll probably need to enforce this with other courses about: GLSL, Blender, Physics for games.

By J Ho on 5/13/2020

Since I'm a beginner, this really helped show some of the basic capabilities of what can be done with Three.js. I followed most lessons quite well and could understand the bulk of the course. However, there are some problems with the template & the completed script not matching up. For example, this is especially frustrating when I'm following along with the video, typing symbol for symbol in the template and not have the script work in the end. Then, when I compare it with the completed code, there are a couple of lines that were completely different or added/missing in the video or template! This is probably what this course needs work on - updating the videos and these files. Thanks!

By Dan Lauer on 4/23/2020

Good succinct overview to review concepts and terminology very quickly without being boring. The only negative that I have for this course is that most of the codepen locations have changed, so that really forces you to use the downloaded code instead. Which really isn't much of a problem. Ideally, all of the URLs that are shown in the video would be clickable links below. The instructor is terrific. He keeps things interesting.

By Mikey Haklander on 2/16/2020

The teacher obviously knows hes stuff and gives great examples. The only problem is that he only show examples and barely explains why he is doing something or why he gives certain parameters.. So you know how to replicate hes examples, but you won't learn how to apply it to your own project or learn to understand which methods to use to achieve your own ideas...

By Raja Ranjan Senapati on 12/15/2019

One of the best courses on Three.js in Udemy. Nik covers a gamut of topics related to 3D concepts essential to be a skilled 3D programmer, not limiting himself to only three.js features. His style of teaching is engaging and very easy to understand. Totally recommend it.

By Ryan Zola on 11/18/2019

I had fun taking this course. There was a lot to cover so I feel like a lot of the earlier topics get only very brief explanations to make more room for more of the fun/flashy stuff later on. The section on animations was probably my favorite and paves the way for lots of experimentation with the abundance of resources provided. I found having to hand-type CodePen links to be a bit of a sloppy exchange, and a lot of the links that were supposed to be a "getting started" point for the video were actually already completed. I found the same for a few of the downloadable examples from Github. All-in-all, I found it to be a great starting point for someone who already has an ok grasp of the basics and is looking to jump back in with some fun code-alongs

Showing all 10 reviews on CourseDuck

Read all 222 reviews on Udemy

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 84 / 100