Three.js 3D Graphics for the Web: Tips, Tricks and Techniques

Simpliv

Course

Online

£ 20 VAT inc.

The best 3D courses

See all

See all

Description

  • Type

    Course

  • Methodology

    Online

  • Start date

    Different dates available

Effective recipes for building stunning graphics for the web.Three.js is one of the most popular JavaScript frameworks for displaying 3D content (such as models, games, music videos, scientific and data visualizations, or anything else you can imagine), on the web, right in your browser (and including mobile devices!).In this course, you'll learn neat tips, tricks, and techniques for using the library that will take your skills to the next level. You will start with advanced geometry techniques you can use to create models, then learn how to work with GLSL, and master Three.js physics and particles. You will also learn about various Three.js helpers and debugging techniques you can use to track down problems and use Chrome's developer tools in to edit 3D projects at runtime. Next, you will delve into path-finding techniques and 3D audio tricks (such as navigation mesh and AudioListeners/analyzers) to add life to your 3D projects.By the end of the course, your expertise in using Three.js for your 3D graphics and visualization projects will be richer and broader, thus separating you from the competition.All code files and supporting files for this course are available on Github: About the Author
.
Nik Lever started work in 1980 as a cartoon animator. 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. He has also produced several courses on Three.js. The majority of his working life has been devoted to creating games, first in Flash and then Director, as the latter published the first widely available 3D library that would run in a browser using a plugin. Nik has developed online content for the BBC, Johnson and Johnson, Deloitte, Mars Corporation, and many other blue-chip clients

Facilities

Location

Start date

Online

Start date

Different dates availableEnrolment now open

About this course

Learn about geometry classes (usually omitted from most tutorials)
Learn to use helper classes and developer tools to debug your projects
Find out how GLSL can create amazing effects at the speed of your GPU
Physics is fun! Find out how to utilize two different libraries to add physical motion to your scenes
Learn to create terrains from a simple function
Go from novice to expert by using particles to add many effects
Use path-finding techniques to overcome the tricky process of navigating a camera around a complex environment
Find out how to use AudioListeners to add immersive 3D sound to your scenes

Questions & Answers

Add your question

Our advisors and other users will be able to reply to you

Who would you like to address this question to?

Fill in your details to get a reply

We will only publish your name and question

Reviews

This centre's achievements

2021

All courses are up to date

The average rating is higher than 3.7

More than 50 reviews in the last 12 months

This centre has featured on Emagister for 4 years

Subjects

  • Access
  • Options
  • Javascript training
  • Javascript
  • Flash
  • Geometry
  • 3d training
  • Graphics
  • 3D
  • Web
  • Project

Course programme

Advanced Geometry Techniques 6 lectures 38:47 The Course Overview This video will give you an overview about the course. Working with Curves Shows how to use the CurvesExtra.js file to create geometry using the TubeBufferGeometry class.
  • Create a curve from the CurvesExtra file
  • Create geometry from the curve
  • Create a mesh
Using Shapes Learn to use the THREE.Shapes class to create complex shapes.
  • Create a shape using the shape class method
  • Extrude the geometry in various ways
  • Create a mesh
ExtrudeGeometry and the EdgesGeometry Class Learn to use the ExtrudeBufferGeometry and EdgesGeometry classes.
  • Create a shape using the custom Star Shape class
  • Extrude the star using different options
  • Create a mesh
BufferGeometry and Attributes Learn how to use the BufferAttributes of the BufferGeometry class to create and edit complex meshes.
  • Access the attribute using getAttribute
  • Use the array to generate new meshes
  • Align the meshes to the normals
Parametric Geometry Learn to use the THREE.ParametricBufferGeometry class.
  • Create a parametric function
  • Create geometry using the function
  • Create a mesh
Advanced Geometry Techniques - Quiz Advanced Geometry Techniques 6 lectures 38:47 The Course Overview This video will give you an overview about the course. Working with Curves Shows how to use the CurvesExtra.js file to create geometry using the TubeBufferGeometry class.
  • Create a curve from the CurvesExtra file
  • Create geometry from the curve
  • Create a mesh
Using Shapes Learn to use the THREE.Shapes class to create complex shapes.
  • Create a shape using the shape class method
  • Extrude the geometry in various ways
  • Create a mesh
ExtrudeGeometry and the EdgesGeometry Class Learn to use the ExtrudeBufferGeometry and EdgesGeometry classes.
  • Create a shape using the custom Star Shape class
  • Extrude the star using different options
  • Create a mesh
BufferGeometry and Attributes Learn how to use the BufferAttributes of the BufferGeometry class to create and edit complex meshes.
  • Access the attribute using getAttribute
  • Use the array to generate new meshes
  • Align the meshes to the normals
Parametric Geometry Learn to use the THREE.ParametricBufferGeometry class.
  • Create a parametric function
  • Create geometry using the function
  • Create a mesh
Advanced Geometry Techniques - Quiz The Course Overview This video will give you an overview about the course. The Course Overview This video will give you an overview about the course. The Course Overview This video will give you an overview about the course. The Course Overview This video will give you an overview about the course. This video will give you an overview about the course. This video will give you an overview about the course. Working with Curves Shows how to use the CurvesExtra.js file to create geometry using the TubeBufferGeometry class.
  • Create a curve from the CurvesExtra file
  • Create geometry from the curve
  • Create a mesh
Working with Curves Shows how to use the CurvesExtra.js file to create geometry using the TubeBufferGeometry class.
  • Create a curve from the CurvesExtra file
  • Create geometry from the curve
  • Create a mesh
Working with Curves Shows how to use the CurvesExtra.js file to create geometry using the TubeBufferGeometry class.
  • Create a curve from the CurvesExtra file
  • Create geometry from the curve
  • Create a mesh
Working with Curves Shows how to use the CurvesExtra.js file to create geometry using the TubeBufferGeometry class.
  • Create a curve from the CurvesExtra file
  • Create geometry from the curve
  • Create a mesh
Shows how to use the CurvesExtra.js file to create geometry using the TubeBufferGeometry class.
  • Create a curve from the CurvesExtra file
  • Create geometry from the curve
  • Create a mesh
Shows how to use the CurvesExtra.js file to create geometry using the TubeBufferGeometry class.
  • Create a curve from the CurvesExtra file
  • Create geometry from the curve
  • Create a mesh
Using Shapes Learn to use the THREE.Shapes class to create complex shapes.
  • Create a shape using the shape class method
  • Extrude the geometry in various ways
  • Create a mesh
Using Shapes Learn to use the THREE.Shapes class to create complex shapes.
  • Create a shape using the shape class method
  • Extrude the geometry in various ways
  • Create a mesh
Using Shapes Learn to use the THREE.Shapes class to create complex shapes.
  • Create a shape using the shape class method
  • Extrude the geometry in various ways
  • Create a mesh
Using Shapes Learn to use the THREE.Shapes class to create complex shapes.
  • Create a shape using the shape class method
  • Extrude the geometry in various ways
  • Create a mesh
Learn to use the THREE.Shapes class to create complex shapes.
  • Create a shape using the shape class method
  • Extrude the geometry in various ways
  • Create a mesh
Learn to use the THREE.Shapes class to create complex shapes.
  • Create a shape using the shape class method
  • Extrude the geometry in various ways
  • Create a mesh
ExtrudeGeometry and the EdgesGeometry Class Learn to use the ExtrudeBufferGeometry and EdgesGeometry classes.
  • Create a shape using the custom Star Shape class
  • Extrude the star using different options
  • Create a mesh
ExtrudeGeometry and the EdgesGeometry Class Learn to use the ExtrudeBufferGeometry and EdgesGeometry classes.
  • Create a shape using the custom Star Shape class
  • Extrude the star using different options
  • Create a mesh
ExtrudeGeometry and the EdgesGeometry Class Learn to use the ExtrudeBufferGeometry and EdgesGeometry classes.
  • Create a shape using the custom Star Shape class
  • Extrude the star using different options
  • Create a mesh
ExtrudeGeometry and the EdgesGeometry Class Learn to use the ExtrudeBufferGeometry and EdgesGeometry classes.
  • Create a shape using the custom Star Shape class
  • Extrude the star using different options
  • Create a mesh
Learn to use the ExtrudeBufferGeometry and EdgesGeometry classes.
  • Create a shape using the custom Star Shape class
  • Extrude the star using different options
  • Create a mesh
Learn to use the ExtrudeBufferGeometry and EdgesGeometry classes.
  • Create a shape using the custom Star Shape class
  • Extrude the star using different options
  • Create a mesh
BufferGeometry and Attributes Learn how to use the BufferAttributes of the BufferGeometry class to create and edit complex meshes.
  • Access the attribute using getAttribute
  • Use the array to generate new meshes
  • Align the meshes to the normals
BufferGeometry and Attributes Learn how to use the BufferAttributes of the BufferGeometry class to create and edit complex meshes.
  • Access the attribute using getAttribute
  • Use the array to generate new meshes
  • Align the meshes to the normals
BufferGeometry and Attributes Learn how to use the BufferAttributes of the BufferGeometry class to create and edit complex meshes.
  • Access the attribute using getAttribute
  • Use the array to generate new meshes
  • Align the meshes to the normals
BufferGeometry and Attributes Learn how to use the BufferAttributes of the BufferGeometry class to create and edit complex meshes.
  • Access the attribute using getAttribute
  • Use the array to generate new meshes
  • Align the meshes to the normals
Learn how to use the BufferAttributes of the BufferGeometry class to create and edit complex meshes.
  • Access the attribute using getAttribute
  • Use the array to generate new meshes
  • Align the meshes to the normals
Learn how to use the BufferAttributes of the BufferGeometry class to create and edit complex meshes.
  • Access the attribute using getAttribute
  • Use the array to generate new meshes
  • Align the meshes to the normals
Parametric Geometry Learn to use the THREE.ParametricBufferGeometry class.
  • Create a parametric function
  • Create geometry using the function
  • Create a mesh
Parametric Geometry Learn to use the THREE.ParametricBufferGeometry class.
  • Create a parametric function
  • Create geometry using the function
  • Create a mesh
Parametric Geometry Learn to use the THREE.ParametricBufferGeometry class.
  • Create a parametric function
  • Create geometry using the function
  • Create a mesh
Parametric Geometry Learn to use the THREE.ParametricBufferGeometry class.
  • Create a parametric function
  • Create geometry using the function
  • Create a mesh
Learn to use the THREE.ParametricBufferGeometry class.
  • Create a parametric function
  • Create geometry using the function
  • Create a mesh
Learn to use the THREE.ParametricBufferGeometry class.
  • Create a parametric function
  • Create geometry using the function
  • Create a mesh
Advanced Geometry Techniques - Quiz Advanced Geometry Techniques - Quiz Advanced Geometry Techniques - Quiz Advanced Geometry Techniques - Quiz Helpers and Debugging Tips 5 lectures 26:52 Using Light Helpers to Track Down Shadow Problems Realtime shadows can cause headaches. Especially when a mesh moves around. In this video, we look at how useful helpers can be in tracking down such problems.
  • Create a light helper
  • Target the light
  • Move the light with its target
Using Helpers to Visualize Collision Boundaries Raycasting can be a useful technique for collision detection. But visualizing the ray can be hard. Using helpers makes it easy.
  • Create a new SphereHelper
  • Set its radius to the collision detection distance
  • Visualize the collisions
Displaying the Normals for a Mesh Using Helpers Normals are critical for lighting calculations. But sometimes knowing where the normal are set can be useful. Time to use a helper.
  • Create a VertexNormalsHelper
  • Set its size and color
  • Visualize the normal
Light Helpers PointLights, SpotLights and RectAreaLights all have helper classes and in this video, we show how to use them all.
  • Create a light
  • Create a helper
  • Visualize the light
Using Developer Tools in Chrome to Debug Your Project Chrome has some terrific tools for the developer. In this video we review the most important for a THREE.js project.
  • Open Developer tools
  • Set a breakpoint
  • Examine complex assets at runtime
Helpers and Debugging Tips - Quiz Helpers and Debugging Tips. 5 lectures 26:52 Using Light Helpers to Track Down Shadow Problems Realtime shadows can cause headaches. Especially when a mesh moves around. In this video, we look at how useful helpers can be in tracking down such problems.
  • Create a light helper
  • Target the light
  • Move the light with its target
Using Helpers to Visualize Collision Boundaries Raycasting can be a useful technique for collision detection. But visualizing the ray can be hard. Using helpers makes it easy.
  • Create a new SphereHelper
  • Set its radius to the collision detection distance
  • Visualize the collisions
Displaying the Normals for a Mesh Using Helpers Normals are critical for lighting calculations. But sometimes knowing where the normal are set can be useful. Time to use a helper.
  • Create a VertexNormalsHelper
  • Set its size and color
  • Visualize the normal
Light Helpers PointLights, SpotLights and RectAreaLights all have helper classes and in this video, we show how to use them all.
  • Create a light
  • Create a helper
  • Visualize the light
Using Developer Tools in Chrome to Debug Your Project Chrome has some terrific tools for the developer. In this video we review the most important for a THREE.js project.
  • Open Developer tools
  • Set a breakpoint
  • Examine complex assets at runtime
Helpers and Debugging Tips - Quiz Using Light Helpers to Track Down Shadow Problems Realtime shadows can cause headaches. Especially when a mesh moves around. In this video, we look at how useful helpers can be in tracking down such problems.
  • Create a light helper
  • Target the light
  • Move the light with its target
Using Light Helpers to Track Down Shadow Problems Realtime shadows can cause headaches Create your...

Additional information

This course is suitable for JavaScript developers who are familiar with the Three.js library and want to use it to its full potential in order to build better 3D graphics and web browser visualizations. Basic knowledge of the Three.js library is assumed

See related categories

Three.js 3D Graphics for the Web: Tips, Tricks and Techniques

£ 20 VAT inc.

The best 3D courses

See all

See all