# Graphics Town

## Introduction

This is a web application built with [Three.js](https://threejs.org/). It is a project from the course CS559: Computer Graphics at UW-Madison. This is an individual project with no detailed requirements. Everyone demonstrates their own artistic and programmatical skills and abilities in this project.

## Project Details

### 3D Object List

1. Pool-1\*: A big pool with textured water using customized shaders and textured walls.
2. Bridge-1\*: A bridge with customized drawing using shaders that alternates its colors.
3. BlueHouse-1\*: A textured blue house using geometries written from scratch. 
4. Church-1\*: A textured church using geometries written from scratch. 
5. Castle-1\*: A textured castle using geometries written from scratch. 
6. Truck-1\*: A textured Amazon Prime truck that stops at buildings in the residential area. 
7. Car-1\*: A textured Mercedes Benz car that runs around the town.
8. Carousel-1\*: A colorful carousel ride with rotating horses.
9. Earth-1\*: A textured earth with normal/bump mapping that rotates
10. Globe-1\*: A globe that reflects its surroundings above the pool in the town.
11. Helicopter-1\*: A helicopter that circles around in the sky of the town.
12. Road-1\*: The road structure of the entire town.
13. RoundaboutBall-1\*: A rotating roundabout that has a ball that moves up and down and changes its color according to the color of its collision plane.
14. Seesaw-1\*: A seesaw that goes back and forth with moving objects on each side.
15. Tower-1\*: A tower ride with rotating poles that are attached to swinging horizontal pads.
16. Tree-Cartoon-1\*: A caroon tree with animated leaves, used in the amusement park area.
17. Tree-Realistic-1\*: A realistic tree with textured leaves, used in the residential area.
18. ParkGate-1\*: The textured front gate of the amusement park. 
19. Fence-1\*: The fence structures that are used around the amusement park.

### Some Basic Behaviors

1. Car-1\*: The red car goes around the town.
2. Helicopter-1\*: The helicopter rotating propellers flies over the town.
3. Tower-1\*: The tower ride has rotating poles that are attached with swinging horizontal pads.
4. Truck-1\*: The Amazon Prime truck goes around the town and stops at some buildings for a random amount of time in the residential area.
5. Carousel-1\*: The colorful carousel ride has rotating horses that bounce up and down. 
6. Seesaw-1\*: The seesaw has a horizontal bar that goes back and forth with moving objects on each side. 
7. Bridge-1\*: The bridge has alternating colors. 
8. Tree-Cartoon-1\*: The cartoon trees have animated leaves. 
9. RoundaboutBall-1\*: The rotating roundabout has a ball that moves up and down and changes its color according to the color of its collision plane.

### Some Advanced Behaviors

1. Bridge-1\* (Animated Shader Effect): The bridge is built using customized drawing with shaders and it alternates its colors.
2. Truck-1\* (Complex Behavior): The Amazon Prime truck goes around the town and turns properly at the intersections (big circle concrete). The truck stops at some buildings for a random amount of time in the residential area.
3. Pool-1\* (Curved Surface): The big pool has curved surface using customized shaders and textured walls.
4. Globe-1\* (Dynamic Environment Map): The globe reflects its surroundings above the pool in the town.

### Texture Attributions

1. BlueHouse-1\*:
   1. Body texture (building2.jpg): <https://www.pinterest.com/pin/535646949415150665/>
   2. Roof texture (blue\_tiles.jpg): <https://www.dreamstime.com/texture-blue-house-roof-texture-blue-house-roof-image174230093>
2. Church-1\*:
   1. Body texture (building1.jpg): <https://www.energy.gov/energysaver/doors>
   2. Roof texture (roof\_tiles.jpg): <https://www.textures.com/browse/wood/2133>
3. Castle-1\*:
   1. Castle body texture (castle.png): <https://www.dreamstime.com/photos-images/castle-door.html>
   2. Castle roof texture (castle\_top.jpg): <https://libreshot.com/old-roof-window/>
   3. Pillar body texture (pillar.jpg): <https://www.wildtextures.com/category/free-textures/stone/>
   4. Pillar top texture (pillar\_top.png): <https://motionarray.com/stock-photos/irregular-stone-texture-910664/>
4. Truck-1\*:
   1. Amazon license plate texture (amazon.jpg): <https://www.freepnglogos.com/pics/amazon-png-logo-vector>
   2. Window texture (car\_window\.jpg): <https://www.dreamstime.com/fog-car-window-glass-texture-background-image132822015>
   3. Amazon Prime logo texture (prime.png): <https://www.flickr.com/photos/160866001@N07/50597570511>
5. Car-1\*:
   1. Benz logo texture (benz.png): <https://logosarchive.com/mercedes-benz/>
   2. Window texture (car\_window\.jpg): <https://www.dreamstime.com/fog-car-window-glass-texture-background-image132822015>
   3. Body texture (redcar.jpg): <https://tr.pinterest.com/pin/628674429222816370/>
6. Earth-1\*:
   1. Earth texture (earth.jpg): <https://www.flickr.com/photos/42084302@N05/3884071286/in/photostream/>
7. Pool-1\*:
   1. Water texture (water.jpg): <https://www.flickr.com/photos/41246865@N04/4877078316/>
   2. Round wall texture (brick.jpg): <https://www.flickr.com/photos/coun2rparts/3508864763/in/photolist-6m4Rfk-9sMJeh-5A6jji-attjHR-7LCYQL-atvZcS-atthvg-atvUEd-atw2eG-FeEGuT-atvVUj-dmNZAU-FkPcRw-zxo9Le-nHKPBW-9sJK1D-atvXeq-attoVp-7TgSPm-7TdDpc-97nYto-ciQ2Eo-ymgiym-ciQ3n3-yDCqEx-EqHfNR-ymgjJh-ymhmEN-EVvFm5-yCT3xX-xFRwgf-Fo5gBe-ymhoPN-ohzAhj-zmuiDn-Ar4NW4-oEtLqk-8FmWCn-9newMS-dyxotb-7TdFyr-93bnjY-9bikgt-918vHa-jrYqc-z4TUEU-TCqz8o-ejvH3m-ymgeys-TCqxzJ>
8. Tree-Realistic-1\*:
   1. Trunk texture (trunk.jpg): <https://www.textures.com/category/tree-bark/544>
   2. Leaves texture (leaves.png): <https://www.istockphoto.com/illustrations/leaf-texture>
9. ParkGate-1\*:
   1. 3D object and its textures: <https://free3d.com/3d-model/driveway-gate-old-80884.html>
10. Fence-1\*:
    1. 3D object: <https://sketchfab.com/3d-models/basic-fence-c5229ed4813c4d1396406805e8756166>

### Picture Demo

![](https://9840377-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXD5c60uDzrjAPeW5GX%2Fuploads%2FMgokzo9p5spVdUioEn13%2Fscreenshot1.PNG?alt=media\&token=fc26d1e0-5b8d-464a-abfe-37e95cc684da) ![](https://9840377-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXD5c60uDzrjAPeW5GX%2Fuploads%2FQHvl6Fy3UQfWUuPc6XVv%2Fscreenshot2.PNG?alt=media\&token=80fc1845-6943-45f2-8319-7006cfd21bae) ![](https://9840377-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXD5c60uDzrjAPeW5GX%2Fuploads%2FsOihs5jNuCFR0p74qiPI%2Fscreenshot3.PNG?alt=media\&token=af967367-3599-4669-8468-b898123d1a55) ![](https://9840377-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXD5c60uDzrjAPeW5GX%2Fuploads%2Fua87YpO5XainOqW0AQhZ%2Fscreenshot4.PNG?alt=media\&token=caa45a16-cebb-4f5f-8429-11e04da68d03)

### Video Demo

{% embed url="<https://youtu.be/gBCOsl8ggQI>" %}