The goal of this homework is to practice texture mapping in 3D.
Octahedron
Building on Lab 10, first create a regular octahedron (from scratch -- you may not use the built-in octahedron geometry for this homework) and then texture map it using the texture below:
Requirements:
- It should be texture mapped exactly as shown in the video below. Note carefully the orientation of the faces relative to each other.
- Make your octahedron rotate and choose a camera viewpoint so that the full texture mapping is visible. I need to be able to see it all in order to give you credit.
- Save this part of the homework in a file named octo.html.
Textured Scene
For the next part you will create a fixed scene using textures. The scene may be simply a room, or you can do something more creative as long as it fulfills the requirements below. Put your work for this section in a file called scene.html. A comment at the top of the file should include your reflections and documentation of where each requirement is met.
Requirements:
- You must create at least three planes intersecting at right angles with a different texture on each one. (For example, you can use planes to form a floor and two walls, or one floor, one wall, one ceiling, etc. More than three planes is ok too.) List the planes and the source of the texture image in the comment at the top of your file.
- You may reuse the textures from Lab 10 if you wish, but at least one texture must be one that you have found on your own. There are stock photo sites that offer free textures for download. Cite the download source in the comment at the top of your file. Include all your texture images with your submitted files, so that I can view your scene as it was intended.
- One texture must be "tiled" or repeated across the surface (details below; wall texture in image shows tiling example). For this texture, it should either have a natural boundary for repetition, like a floor tile, or if it is composed of irregular shapes they should "line up" seamlessly on the top/bottom and left/right so that it looks uninterrupted. The wallpaper texture from the lab doesn't quite tile seamlessly, but it could be cropped so that it does. In the comment at the top of your file, indicate where tiling was used.
- At least one texture must have a normal map or bump map applied to give it a 3D effect. You can find free textures with associated maps at various sites. Again, indicate in the comment where a 3D texture was applied.
- Place a moving point or directional light in your scene so that I can see the shading shift on the texture with the bump or normal map.
- Make sure your camera viewpoint shows all the parts of your scene so that I can verify all the required elements.
Feel free to use your imagination here to create a scene that is visually interesting, perhaps including objects or a more complicated structure than a simple box. Work that goes beyond the basic requirements listed here may be considered for extra credit.
A simple example image is shown below, including both tiled and 3D textures.
Repeating Textures
Here are some details on the tiling requirement above. For a large region, usually we want to "tile" the texture instead of using one scaled image. To do this, we can set the repeat number of the texture in each direction (u and v). Example code is shown below:
var loader = new THREE.TextureLoader(); // don't repeat this if you've already done it var texture = loader.load( 'mytexture.jpg' ); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.repeat.set( 2, 3 ); // twice in u and three times in v
Completion
Your reflection must include a checklist telling me where to look for each requirement you have met.
Submit your two HTML files, a representative screenshot of your scene, and all of your texture files.