three.js - Textures & Texture Mapping
Let's take a look on texture mappings with three.js. We discover how to create textured surfaces with details and character.
Use a color map to add color, use a normal map for bump mapping, a displacement map for changing geometry of the surface, a roughness map to alter light reflections, an ambient occlusion (AO) map for shadow highlighting and a metallic map in combination with environment map for metalic reflections!
Stackblitz Livedemo: https://stackblitz.com/github/tamani-...
Github: https://github.com/tamani-coding/thre...
Also check out:
Three.js Tutorial: • Three.js Tutorial - Learn Three.js Ba...
Three.js Dynamic Shadows: • three.js - Dynamic Shadows
Enable3D: • Enable3D - Javascript 3D engine with ...
(00:00) - Intro
(00:22) - Standard Material
(00:42) - Get some Textures
(01:29) - Demo Scene & Texture Loader
(02:18) - Base Color
(02:56) - Normal Map (the better Bump Mapping)
(03:45) - Displacement Map
(06:13) - Roughness Map
(07:49) - Ambient Occlusion Map (AO)
(09:26) - Metalness Map (+ Environment Map)
(11:43) - Outro
