Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications 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 Certification Network & Security Hardware Operating Systems 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 Design Thinking 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 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 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 Yoga Mental Health Dieting 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 Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Modeling Data Analysis Data Science
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Three.JS

Hands-on Three.js 3D Web Visualisations

Create stunning visualizations and 3D scenes using the Three.js library
Rating: 4.3 out of 54.3 (132 ratings)
739 students
Created by Packt Publishing
Last updated 12/2019
English
English
30-Day Money-Back Guarantee

What you'll 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

Course content

7 sections • 36 lectures • 3h 46m total length

  • Preview03:33
  • Introducing the THREE.js website
    04:37
  • 3D Basics
    04:50
  • Your first THREE.js web page`
    08:51
  • The THREE.js Editor
    09:54
  • Debugging Your Pages
    09:25
  • Test Your Knowledge
    5 questions

  • Preview07:44
  • Materials One – Basic and Wireframe
    04:38
  • Spheres and Cylinders
    07:02
  • Materials Two – Lambert and Phong
    06:14
  • Cones and Tori
    04:59
  • Test Your Knowledge
    5 questions

  • Scene Hierarchy
    07:28
  • Perspective Camera
    04:33
  • Orthographic Camera
    05:04
  • Dummy Cameras and Lerping
    07:24
  • Complex Camera Paths
    06:02
  • Test Your Knowledge
    5 questions

  • Ambient and Hemisphere Lighting
    04:58
  • Directional and Point Lighting
    05:26
  • Spot and RectArea Lighting
    04:31
  • Adding Shadows to Your Scenes
    04:23
  • Physically Correct Lighting
    03:51
  • Test Your Knowledge
    5 questions

  • Online Sources of 3D Assets
    06:24
  • Using Blender with THREE.js
    05:43
  • The GLTFLoader Class
    07:43
  • The FBXLoader Class
    06:21
  • LatheGeometry and ExtrudeGeometry
    09:31
  • Test Your Knowledge
    5 questions

  • The Basics of the Animation System
    09:48
  • Skinned Meshes
    06:50
  • Switching and Blending Animations
    07:14
  • Splitting an Animation Clip
    04:19
  • A WASD Control System for a Player Character
    07:23
  • Test Your Knowledge
    5 questions

  • THREE.js Post Processing
    06:37
  • Introducing GLSL – ShaderMaterial
    06:08
  • Introducing GLSL – Vertex Shaders
    05:42
  • Introducing GLSL – Importance of Noise Function
    04:55
  • Introducing GLSL – Textures
    06:04
  • Test Your Knowledge
    5 questions

Requirements

  • Minimum Hardware Requirements:
  • For successful completion of this course, students will require a desktop or laptop with at least the following: OS: Windows, MacOS or Linux Processor: Dual Core processor Memory: 4 GB Storage: 1 GB GPU: WebGL compatible graphics card
  • Recommended Hardware Requirements:
  • For an optimal experience with hands-on labs and other practical activities, we recommend the following configuration: OS: Windows, MacOS or Linux Processor: Dual Core processor Memory: 8 GB Storage: 1 GB GPU: WebGL compatible graphics card
  • Software Requirements:
  • Operating system: Windows, MacOS, Linux Browser: Chrome

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.

Who this course is for:

  • If you are a JavaScript developer and want to learn how to use the Three .js library to create 3D graphics in your browser, then this course is for you!

Instructor

Packt Publishing
Tech Knowledge in Motion
Packt Publishing
  • 3.9 Instructor Rating
  • 58,003 Reviews
  • 349,355 Students
  • 1,420 Courses

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.



  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.