-Hands-on-Three.js-3D-Web-Visualisations icon indicating copy to clipboard operation
-Hands-on-Three.js-3D-Web-Visualisations copied to clipboard

Hands-on Three.js 3D Web Visualisations, published by [Packt]

Hands-on Three.js 3D Web Visualisations [Video]

This is the code repository for Hands-on Three.js 3D Web Visualisations [Video], published by Packt. It contains all the supporting project files necessary to work through the video course from start to finish.

About the Video Course

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. Note: The course uses r105 and the latest is r136.

What You Will 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
  • xplore 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

Instructions and Navigation

Assumed Knowledge

To fully benefit from the coverage included in this course, you will need:
The course consists of a series of videos that are explained by the author as he develops the code required for each step on the road to a deep understanding of the Three.js library.

Technical 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

Related Products