Making a realistic scene on the web is easier than you think with Three.js, a cross-browser JavaScript library and API that uses WebGL to create and display animated 3D computer graphics in a web browser.

Texture mapping is a method for defining high-frequency detail, surface texture, or color information on a computer-generated graphic or 3D model. Using texture mapping techniques allow for the simulation of a more realistic 3D scene in realtime with a dramatically smaller number of polygons and lighting calculations.

Three.js supports bump, normal, displacement, and specular mapping and makes it simple to apply it to an object. I wrote this program really quickly so it doesn't look as good as something that gets more time put into it, but it provides a quick glimpse into what you can do. See the mapping example below to see a few mappings in action. Use your mouse to look around!

Here is a pretty neat use of normal mapping.

(You can inspect the Three.js code for this example by clicking on the JS tab in the Codepen demo below.)

See the Pen Cabin by Bryan Jones (@bartuc) on CodePen.