Hands-on Three.js 3D Web Visualisations

Name: Hands-on Three.js 3D Web Visualisations
Rating: 4.2 (222 reviews)

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

Created byPackt Publishing

Last updated 12/2019

English

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

The Course Overview3:33
This video will give you an overview about the course.
Introducing the THREE.js website4:37
This video shows how to get hold of the THREE.js library, and how to source documentation and examples.
• Visit Threejs.org
• Download the library
• Review the documentation and examples
3D Basics4:50
This video will give you a short introduction about real-time 3D using WebGL.
• Coordinate space in 3D
• Learn about vertices, faces, and normal
• Explore cameras and the rendering pipeline
Your first THREE.js web page`8:51
In here, explore using CodePen to create a very simple THREE.js web page.
• Add the library
• Create a scene, camera, and renderer
• Add a mesh
The THREE.js Editor9:54
Here, learn the THREE.js library classes quickly by using the online editor.
• Visit threejs.org/editor
• Add a sphere
• Create a moon orbiting the earth
Debugging Your Pages9:25
In this video, learn to use Chrome Developer Tools to debug your web app.
• Use breakpoints
• Review the callstack
• Use the Local window to edit properties
Test Your Knowledge

Let’s Keep It Simple: Starting with a Box7:44
In this video, we learn to create a Jenga style tower. It introduces cloning of meshes.
• Create a block mesh
• In two loops, clone the block
• Position and rotate the blocks
Materials One – Basic and Wireframe4:38
In this video, learn about the simplest THREE.js materials.
• Create the materials
• Apply to the boxes
• Manipulate the properties
Spheres and Cylinders7:02
In this video, create a capsule object by learning about the SphereGeometry and CylinderGeometry classes, and grouping.
• Create a half sphere
• Create an uncapped cylinder
• Combine to create a capsule
Materials Two – Lambert and Phong6:14
In this video, learn about maps and normal maps, while studying the MeshPhongMaterial and MeshStandardMaterial classes.
• Adjust the properties of a Phong material
• Play with normal maps
• Learn the standard material class
Cones and Tori4:59
In this video, learn to create a cone, torus, and torus knot.
• Create the geometry
• Adjust the parameters
• Rotate the mesh
Test Your Knowledge

Scene Hierarchy7:28
In this video, learn how child-parent relationships affect the position and orientation of your meshes, and how to adjust the geometry to affect the rotation position.
• Create a four block mesh
• Position them in a chain
• Rotate in the z axis
Perspective Camera4:33
Here, learn about the THREE.PerspectiveCamera class.
• Create a camera
• Adjust the field of view
• Change the frustrum
Orthographic Camera5:04
In this video, learn about the THREE.OrthographicCamera class.
• Create a camera
• Adjust the left, right, top, and bottom
• Change the frustrum
Dummy Cameras and Lerping7:24
Here, use a dummy object to adjust the camera position.
• Create a dummy object
• Learn about the parent dummy object
• Use Vector3.lerp to blend position
Complex Camera Paths6:02
Heer, send a camera down a tube created, using TubeBufferGeometry.
• Create the geometry
• Use getPointAt to position the camera
• Use getPointAt to orientate camera
Test Your Knowledge

Ambient and Hemisphere Lighting4:58
In this video, learn how to add ambient lights to your scene. Include a Hemisphere light, that has a different ambient color for the sky and the ground.
• Create an AmbientLight
• Set the color and intensity
• Add it to your scene
Directional and Point Lighting5:26
In this video, learn to use the most popular real-time lights: Directional and Point lights.
• Create a DirectionalLight
• Set the color, intensity, and position
• Add a target
Spot and RectArea Lighting4:31
In this video, learn to use a SpotLight and a RectArea light in your scenes.
• Create a SpotLight
• Use a SpotLightHelper to adjust the settings
• Adjust the penumbra
Adding Shadows to Your Scenes4:23
In this video, follow four simple steps to get perfect real-time shadows in your scenes.
• Enable shadows for the renderer
• Configure shadows for your light(s)
• Configure you meshes to cast or receive shadows
Physically Correct Lighting3:51
Here, use the latest technology, Physically Correct Lighting in your scenes.
• Configure the renderer
• Set the exposure
• Set the power for your lights
Test Your Knowledge

Online Sources of 3D Assets6:24
Here, learn how add source great and often free assets from some useful online libraries.
• Visit the online site
• Use their search tools
• Download the asset
Using Blender with THREE.js5:43
Blender is a great open source 3d application program and best of all, it is available free of cost. Here, learn the basics of using this app.
• Download Blender
• Learn to navigate the app
• Export and view a model
The GLTFLoader Class7:43
GLTF is becoming a popular format for sharing complex 3D assets. In this video, learn to use the THREE.js loader class, in order to load these models into your THREE.js app.
• Get a 3D model
• Convert using Blender
• Use GLTFLoader to load into your app
The FBXLoader Class6:21
Another popular format for sharing 3D assets is FBX. Here, learn to use the THREE.js loader class, in order to load these models into your THREE.js app.
• Get a 3D model
• Edit and convert in Blender
• Use FBXLoader to load in your app
LatheGeometry and ExtrudeGeometry9:31
Learn to use two important geometry classes to create complex assets using the THREE.js library.
• Create some points that define a curve
• Use LatheGeometry to create a mesh
• Add the mesh to your scene
Test Your Knowledge

The Basics of the Animation System9:48
In this video, learn about the THREE.js animation system.
• Create an AnimationMixer
• Create an AnimationAction, using the mixer and a clip
• Play the action
Skinned Meshes6:50
The THREE.js animation system can animate an object using a skeleton.
• Use Blender to create an armature
• Animate and export as a glb file
• Load, create, and play actions
Switching and Blending Animations7:14
Using an AnimationMixer, we can layer animations and blend from one animation to another over a time interval.
• Use Mixamo to source multiple animations
• Load the skin and the animations
• Switch and blend animations with the mixer
Splitting an Animation Clip4:19
In this video, learn to create subclips from a longer clip, and create actions from them.
• Use the subclip function to split an animation
• Turn the subclips into actions
• Use the mixer to blend between actions
A WASD Control System for a Player Character7:23
Extend the earlier WASD control to show a fully animated character. In this video, learn how to add a finished animation event listener.
• Create the actions
• Display the correct action for the context
• Use an action.next property to switch action
Test Your Knowledge

THREE.js Post Processing6:37
In this video, learn about using Post Processing with the THREE.js library.
• Create an EffectComposer
• Add a RenderPass and change the update function
• Add a post processing pass
Introducing GLSL – ShaderMaterial6:08
Here, use the ShaderMaterial class, and create your first fragment shader.
• Create a ShaderMaterial instance
• Write the fragment shader
• Apply to ShaderMaterial constructor
Introducing GLSL – Vertex Shaders5:42
In this video, get introduced to vertex shaders. Also, learn how to convert local coordinates to clip coordinates with matrix multiplication.
• Create a vertex shader string
• Calculate and assign gl_Position
• Apply to ShaderMaterial constructor
Introducing GLSL – Importance of Noise Function4:55
In this video, learn the importance of noise functions and also learn to use vertex displacement, along the normal to create a bubbling ball.
• Pass time to the shader, using uniforms
• Use time and normal to create a displacement
• Apply displacement to vertex calculation
Introducing GLSL – Textures6:04
Learn to use textures to calculate the pixel color.
• Pass the texture to the shader using a uniform
• Select the pixel using noise passed from the vertex shader
• Get color using the texture2D function
Test Your Knowledge

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!

Hands-on Three.js 3D Web Visualisations

What you'll learn

Explore related topics

Course content

Build Your First 3D Web Page with THREE.js6 lectures • 41min

Geometry and Materials5 lectures • 31min

Scene Hierarchy and Cameras5 lectures • 31min

Lights and Shadows5 lectures • 23min

Sourcing, Creating, and Loading Assets5 lectures • 36min

The THREE.js Animation System5 lectures • 36min

Post Processing and GLSL5 lectures • 29min

Requirements

Description

Who this course is for: