Graphic Mapping Techniques in Threejs

Making a realistic scene on the web is easier than you think using Threejs. It 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.

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

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.