Threejs

HTML-in-Canvas is a Web standard proposal incubated at WICG by the Chrome team — turning <canvas> children from “invisible …

In the previous lesson, we used GLSL math functions to draw shapes and gradients. This lesson enters the “soul tool” of shaders …

Last lesson covered GLSL basics and ShaderMaterial data channels. This lesson dives deep into math functions — mix / step / smoothstep for …

The first 9 lessons all used Three.js built-in materials (MeshStandardMaterial, MeshBasicMaterial…). This lesson starts writing …

This article clones the two most immersive interactive modules from the moeru.ai landing page: dot grid physics interaction and 3D tag …

In the first 8 lessons, all animations were manually written in the requestAnimationFrame loop. This lesson introduces GSAP tweening and …

In the first 7 lessons, we created geometry with code. In real projects, 3D models are usually made in Blender/Maya, exported as GLTF/GLB, …

The scene graph is the skeleton system of Three.js. Understanding parent-child relationships, transform inheritance, and coordinate system …

Textures are how you “dress up” 3D objects. Understanding UV coordinates, learning to load and control textures, and mastering …

The camera determines “where you look from” and “how much you see”. Master the difference between perspective and …

Lights are the soul of a 3D scene. Master 5 light types and the three shadow elements to transform your scene from “flat” to a …

Materials determine how object surfaces interact with light. Master 6 material types and PBR parameters to transform 3D objects from …

Geometry is the building block of the 3D world. Master 5 basic primitives and you can combine almost any shape. 01 Learning Objectives This …

Everything in Three.js starts with three objects: Scene (stage), Camera (lens), Renderer (projector). Master this trio and you have your …

Trigonometric functions are the core tool for describing periodic phenomena and the mathematical foundation for 3D graphics. This article …