Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Software Development Tools No-Code Development
Business
Entrepreneurship Communication Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certifications Network & Security Hardware Operating Systems & Servers Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Paid Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement & Gardening Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition & Diet Yoga Mental Health Martial Arts & Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Learning Teacher Training Test Prep Other Teaching & Academics
Web Development JavaScript React Angular CSS Node.Js PHP HTML5 Vue JS
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Amazon AWS Cisco CCNA Microsoft AZ-900 CompTIA Security+
Microsoft Power BI SQL Tableau Data Modeling Business Analysis Business Intelligence MySQL Qlik Sense Data Analysis
Unity Unreal Engine Game Development Fundamentals C# 3D Game Development C++ Unreal Engine Blueprints 2D Game Development Blender
Google Flutter iOS Development Android Development Swift React Native Dart (programming language) Kotlin Mobile App Development SwiftUI
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting Canva InDesign Character Design Procreate Digital Illustration App
Life Coach Training Personal Development Neuro-Linguistic Programming Personal Transformation Life Purpose Mindfulness Sound Therapy Meditation CBT Cognitive Behavioral Therapy
Business Fundamentals Entrepreneurship Fundamentals Freelancing Business Strategy Startup Business Plan Online Business Blogging Leadership
Digital Marketing Social Media Marketing Marketing Strategy Google Analytics Internet Marketing Email Marketing Copywriting YouTube Marketing Startup
2022-04-28T12:59:50Z

DevelopmentWeb DevelopmentThree.JS

Intermediate Three.js with Shaders

Create an interactive 3d globe with custom ThreeJS shaders
Rating: 4.5 out of 54.5 (17 ratings)
441 students
Created by Christopher Lis
Last updated 3/2022
English
English [Auto]

What you'll learn

  • Create and understand ThreeJS shader composition and setup
  • How to import textures into your shader to create a globe
  • How to create vertex and fragment shaders
  • How to import shaders into a vite project
  • Understand complex 3D terms like normals, attributes, varyings, and UVs
  • How to draw interactive data points onto a globe with latitude and longitude
  • How to import bulk data and read it onto a scene
  • How to animate generated meshes with GSAP
  • How to add click and drag functionality to the globe
  • How to scale a 3D scene for smaller screen sizes
  • How to add mobile event listeners

Requirements

  • You must have development environment with ThreeJS setup already - I use Vite here for mine, which you can learn how to do by taking my Modern ThreeJS course also on Udemy
  • Vite with ThreeJS installed is recommended for a frontend server, but not required
  • ThreeJS version ^0.128.0 is recommended (it's what's used in the course), but not required
  • You should have a basic math background (the basics of matrices are covered, but not to the detail of a math course)

Description

Notice: This is a freemium course—a good majority of the first module's lessons are free (you can watch right here on Udemy with each video's "Preview" button), while the remaining 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 Intermediate ThreeJS with Shaders course, where you will learn how to create an interactive 3d globe with custom ThreeJS shaders.

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 goal of this course is to get you writing your own custom ThreeJS shaders with GLSL, and to help you understand how to import these shaders into a practical ThreeJS scene. You'll also learn how to dynamically place data points on a globe based on the latitude and longitude of different countries. There are little to no videos out there that actually go into this topic in-depth so I figured I should tackle it.

In this course, you'll learn everything from:


- Vertex Shaders

- Fragment Shaders

- Import Shaders with Vite Plugins

- Normals

- Uniforms

- Attributes

- Varyings

- Point clouds and particles

- Bulk Data Imports

- Rectangular Mesh Animation

- Click and Drag Functionality

- Scene Responsiveness

- Touch Event Listeners


And so much more.

If you're serious about taking your ThreeJS skills to the next level, then shaders are logically the next step after become acquainted with the framework. Let me guide you through the full production of a 3d scene you can actually use for a real website.

Who this course is for:

  • Intermediate ThreeJS Developers who know how to create scenes with materials, geometries, and meshes

Instructor

Christopher Lis
Founder of Chris Courses / Senior Full-Stack Engineer
Christopher Lis
  • 4.5 Instructor Rating
  • 80 Reviews
  • 1,167 Students
  • 3 Courses

I'm Christopher Lis, an award winning, full-stack web developer who has worked professionally for clients such as Harvard University, The Basketball Tournament, and Brave People (I made their site and won two Awwwards for it). I'm also an instructor / YouTuber, and founded the JavaScript learning platform, Chris Courses.

I started my teaching journey in 2016 when I taught basic web development to high-school classes through the Girls Who Code program. Since then, I've digitized my teaching, amassing over 50k subscribers on YouTube, and earning over $20k through my custom built, educational SaaS platform called Chris Courses.

Top companies choose Udemy Business to build in-demand career skills.
NasdaqVolkswagenBoxNetAppEventbrite
  • Udemy Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Investors
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Accessibility statement
Udemy
© 2022 Udemy, Inc.