# 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

![](/files/pgTzasisqvShGLK8ewTy) ![](/files/Y8dH6lJh9ssNOr6PYo9o) ![](/files/36gjT2NwezGJsjQZ7eBY) ![](/files/bo5RgfWeXWZxriRzhIHU)

### Video Demo

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://blog.yushunchen.com/projects/graphics-town.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.