Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Master fundamental JavaScript and Three.js concepts through five comprehensive standalone projects in this 85-minute tutorial. Begin with a roadmap that outlines the Three.js toolbox, core components including scene, camera, and renderer, plus geometries, materials, meshes, lighting, and animations across beginner, intermediate, and advanced skill levels. Explore texture application techniques including simple textures, aspect ratio handling, normal and roughness maps, materials and lighting interactions, and experimentation with different texture types. Build an interactive 3D globe featuring a textured sphere, starfield background, floating country outlines, atmospheric fog effects, and dynamic color variations. Create engaging particle effects including smoke, fire, and sparkly dot animations while learning to manipulate particle properties and rotation mechanics. Develop scroll-triggered animations by setting up HTML and CSS, linking Three.js to the DOM, responding to scroll events, loading and applying matcap materials to 3D models, creating starfields, and implementing smooth animation transitions. Conclude with physics integration using Rapier physics engine, covering scene setup, HDR environment lighting, metallic and reflective objects, various geometries, rotational physics, collider visualization, convexHull implementation for custom colliders, enhanced mouse interactivity, GLTF model integration, and color palette systems. Each project includes complete source code repositories and can be completed independently, allowing learners to focus on specific areas of interest while building practical Three.js development skills.
