Modern Three.js for Real Websites

Name: Modern Three.js for Real Websites
Rating: 4.4 (212 reviews)

Learn to develop a premium quality, 3D portfolio site that'll put you leagues ahead of your competition

Created byChristopher Lis

Last updated 2/2022

English

What you'll learn

How to install Three js and import it into your project
How buffer attributes work and how to decode them within arrays
How to use the Three js raycaster to create mouse-to-scene interactions
How to use Three js point clouds to create a galaxy of stars
How to traverse your scene with 3D camera movement
How to resize your scene using JavaScript event listeners
How to edit your scene realtime using a graphical user interface (GUI)
How to set up a simple Vite server for importing and exporting modules
How geometries and materials work together to form meshes
How to add HTML and CSS web elements to your scene
How to launch your site to a Netlify development server
How to integrate your project into a framework (Nuxt js) so you can seamlessly transition to different web pages from your 3D scene

Course content

2 sections • 24 lectures • 4h 55m total length

What We're Developing1:26
Install Three.js and Vite15:42
Scenes, Cameras, and Renderers6:45
Your First Mesh8:46
The Plane Geometry6:08
Directional Lights2:55
Manipulating Geometries with Depth and Jaggedness10:06
Real-Time Scene Editing with Dat.GUI15:00
Orbit Controls and Scene Rotation4:42
Geometry Hover Effects30:43
Color Fade Hover Effect7:43
Tailor Plane to Exact Dimensions4:49
Randomized Vertex Movement22:17
Overlay HTML and CSS On Scene17:07
Create a Starfield9:42
To add a field of stars around our plane, we're going to need to use Three.js' Points object. This is very similar to a mesh, except it only utilizes a geometry's position attribute to populate your screen full of points.
This episode will teach you how to create and use this Points object, and how to rotate your starfield so you get the effect of stars swirling around a rotating planet.
Animate Text On Initial Load10:21
To make our page look as clean and professional as possible, we'll want to add in some text animation that occurs whenever our page is loaded. This video will show you how to exactly this using CSS, JavaScript, and GSAP.
Camera Movement Transitions10:54
Animating HTML with GSAP proved to be simple, next up: animating three.js' camera so that it travels in a predetermined path we set for it.
This episode will teach you:
How to animate three.js objects
How to run GSAP animations in sequence
How to rotate your camera using radians
Scene Responsiveness and Browser Resizing9:46
Our scene looks great on load, but once we start resizing our browser window a bit, it's obvious something is off. In order to get our scene to adhere to the dimensions of our browser window, we must select our renderer and call its setSize() function.
Then, to maintain our scene's aspect ratio, we must update our camera's aspect property and call a function known as updateProjectionMatrix().
This video will show you how to do all of that, while giving you some general mobile-responsive tips with CSS.
Link to External Website When Animation Completes4:18
To change pages once your GSAP animation ends, you can use window.location to set your browser page dynamically using JavaScript. This gets the job done and is great if you need something quick and easy, but the only issue is, when changing pages using window.location, all of your CSS and JavaScript assets are reloaded in their entirety. It would be much more efficient to only load new content that is appearing, rather than all of the CSS and JS we loaded previously.
The rest of this series will show you how to do exactly that, creating a seamless transition into a work page using the single page app framework: Nuxt.js.

Refactor and Integrate Into Nuxt.js29:01
NOTICE FOR ORBIT-CONTROLS-ES6:
NPM updated, requiring that all new packages have specific peer dependencies declared before a successful package install.

If you have trouble installing orbit-controls-es6, run the following:
npm install orbit-controls-es6 --legacy-peer-deps
This will ensure the package is installed and you can continue with the course.

Video Description:
To create a seamless transition into a separate page on our site, we're going to need to use a single-page framework like Nuxt or Next.js. Since Nuxt uses Vue, it is by default a much easier framework to use in my opinion, so we'll be going with that.
To get our three.js piece working in Nuxt, we need to do quite a bit of refactoring, mainly because Nuxt renders its HTML on the server side of things for enhanced performance and SEO. It's a bit of extra work, but by doing so, we'll be able to utilize Nuxt's wonderful routing system that'll load only the exact content we need without ever having to do a full page refresh.
Follow along and let me guide you through the complete refactor process to get three.js working in a real-world project.
Nuxt Google Fonts13:55
NOTICE FOR NUXT GOOGLE FONTS:
NPM updated, requiring that all new packages have specific peer dependencies declared before a successful package install.

If you have trouble installing @nuxtjs/google-fonts, run the following:
npm install @nuxtjs/google-fonts --legacy-peer-deps
This will ensure the package is installed and you can continue with the course.

Video Description:
The next step is getting the correct fonts transferred over to our Nuxt project via Google Fonts. Now, although Nuxt doesn't have your standard <head> tag, there is a way to import Google Fonts using nuxt.config.js. However, there's a learning opportunity here - one that'll teach you a much easier way to import your google fonts using an npm package called @nuxtjs/google-fonts (at least easier once you get it installed).
This method will allow you to import any Google font without having to change up your import URL string - you'll use a JS object instead.
Nuxt Routing Integration9:46
It's time to create a new page for our site and redirect to it using Nuxt. We won't be doing a full redirect where we refresh the whole page, but rather, a Nuxt redirect where we visit a separate route to swap out the contents of our page without refreshing our browser at all.
We'll be using Nuxt's convenient page route creation and the Nuxt $router object to do so.
Seamless Page Transitions34:15
Finally we reach the conclusion of this course where we will be adding in animation that occurs when our work page loads. This will create for the ultimate seamless effect while still allowing us to keep our single-page routing in place. There really is no better way to create such a smooth, efficient transition into another page.
Deploy Nuxt with Netlify8:58
Nuxt is great for single page app development, but it can be a little tricky deploying your site so that it's live on the web.
Here, I'll show you one method for deploying a Nuxt site: Netlify.
Netlify is a cloud hosting and build provider that'll run all the necessary steps to get your site up and running on an actual URL. One of the coolest things about (which I admittedly forgot to mention in the video) is that it has automatic deploys, meaning, whenever you push a change up to your Git repo, Netlify will automatically update your site URL with all of your new code.
You'll need a GitHub and Netlify account in order to complete this tutorial, both which are free:
https://github.com/
https://www.netlify.com/
In the end, you'll have your site up and running on a Netlify generated URL, but you'll have to purchase a domain and continue with Netlify's steps on your own if you'd like to go further.

Requirements

Basic JavaScript knowledge, you should be familiar with let, const, loops, arrays, functions, and classes

Description

PLEASE READ: This is a freemium course—the first 2 1/2 hours are free (you can watch right here on Udemy [or YouTube] with each video's "Preview" button), while the remaining 2 1/2 hours require course purchase. I've always been a big advocate of spreading the basics to as many people as possible, as I believe knowledge and personal growth are some of the best ways to better our world as a whole. Enjoy.

Welcome to the Modern Three.js for Real Websites course, where you will learn how to develop a premium quality, 3D portfolio site that'll put you leagues ahead of your competition.

My name is Christopher Lis, and I'm an award winning Full-Stack Engineer with over ten years of web development experience. I've directly worked with clients like Harvard University, The Basketball Tournament, and premium award winning agencies like Brave People.

The number one goal of this course is to get you developing real-world, actual Three.js websites without feeling lost or frustrated. The Three.js library consists of many complex terms that absolutely flustered me when I first started learning it, so I made this course to demystify that lingo and guide you through the development of something you can actually use in a real-world scenario.

Here you'll learn everything from:

- Three.js installation

- Scene setup

- Programmatic geometry alterations

- 3D hover effects

- GUIs

- HTML and Three.js Integration

- Scene responsiveness

- Single page app integration

- Deployment

And so much more.

If you're a JavaScript developer who needs Three.js for their next client project, or you're looking to enhance your portfolio site to obtain a better job, then this course is absolutely for you. You won't feel lost, you won't feel alone, you'll feel confident and secure when developing premium-level 3D sites for you and your team.

Who this course is for:

All levels of JavaScript developers looking to create their first web-based 3D scene

Modern Three.js for Real Websites

What you'll learn

Explore related topics

Course content

Create an Interactive Three.js Space Landscape19 lectures • 3hr 19min

Integrate Into Nuxt.js for Seamless Transitions5 lectures • 1hr 36min

Requirements

Description

Who this course is for: