Advanced Texture Demos
I have created updated versions of the advanced texture demos that run with the current version of THREE and the current version of the class framework.
Originally, I had intended for students to figure this out themselves - but some of the THREE changes are counter-intuitive. So you can look at more modern code.
The demos:
- Woodgrain Demo - useful to see texture wrapping and mirroring
- Environment Map Demo - a basic texture mapping example with shiny objects
- Dynamic Environment Map Demo 1: - simpler version of a dynamic environment map. A single environment map is created for the whole scene, all objects use it.
- Dynamic Environment Map Demo 2: - slightly less simple version of a dynamic environment map. Each shiny object gets its own environment map.
You can see the source code by using “view source code” in the browser.
The Dynamic Environment Map demos give you two different ways to make dynamic environment maps in the class framework.
Dynamic Environment Map Demo 1: creates a single environment map for the entire scene. It does this as a separate “pre-draw” step in the render loop (a feature of the framework). This way, all objects get updated (animated) before the world is drawn. It also is more efficient, since objects share the same map, and only one extra re-draw is required (to create the one map). However, the “point of view” of the map isn’t correct for any object. (js source)
Dynamic Environment Map Demo 2: creates a separate environment map for each object. This is less efficient (since we need to do a full redraw for each map, and there is a map per-object). But, it does mean that each object gets its own map, centered in the right place. However, since the update is done per object in the animation loop, the reflections might be of objects that haven’t been updated yet! (js source)
These two demos use different strategies for avoiding feedback (seeing themselves in their reflection). Demo 1 causes all objects using the environment map to be “vampires” (they don’t appear in the mirror) - you can see the code where the mirrored objects are removed from the display list before the environment map is drawn. Demo 2 uses the near clipping plane to cause the object that the texture is applied to to be removed (this only works because I know that the objects are small spheres).