Created using Three.js and various JavaScript libraries, this virtual 3D aquarium environment generated inside a web page allows the user to interact with five tanks of water containing different kinds of sea animals that are animated inside. The user is able to move and jump using keyboard controls and mouse movement. Custom designed informational signs made through Adobe Illustrator are applied as textures and displayed in front of its respective tank.
VISIT THE VIRTUAL AQUARIUM - LIVE DEMO
VIRTUAL AQUARIUM WEBSITE (opens in new browser)
or
http://sarahjhan.design/explorations/virtual-aquarium/aquarium.html
Please wait until all assets have been loaded before walking around.
Controls: W, A, S, D = Move, SPACE BAR = Jump, MOUSE = Look around
Note: Works best in Chrome or Firefox on desktop
VIRTUAL AQUARIUM WEBSITE (opens in new browser)
or
http://sarahjhan.design/explorations/virtual-aquarium/aquarium.html
Please wait until all assets have been loaded before walking around.
Controls: W, A, S, D = Move, SPACE BAR = Jump, MOUSE = Look around
Note: Works best in Chrome or Firefox on desktop
DESCRIPTION
- The user is able use ‘W’ ‘A’ ‘S’ ‘D’ keys to move, space bar to jump, and mouse movement to change their angle of view.
- The user is able to jump on top of objects.
- The sea creatures are displayed swimming around or floating up and down, but are contained within each aquarium environment.
- Five aquarium tanks were created with different sea animals swimming inside.
- Custom informational signs about each sea animal were created and positioned in front of its respective aquarium tank.
- Different textures, geometries and materials were implemented.
- The user is able use ‘W’ ‘A’ ‘S’ ‘D’ keys to move, space bar to jump, and mouse movement to change their angle of view.
- The user is able to jump on top of objects.
- The sea creatures are displayed swimming around or floating up and down, but are contained within each aquarium environment.
- Five aquarium tanks were created with different sea animals swimming inside.
- Custom informational signs about each sea animal were created and positioned in front of its respective aquarium tank.
- Different textures, geometries and materials were implemented.
AQUARIUM COMPONENTS (OBJECTS/ANIMATION)
1. The first pond contains two STL Loaded shark that swim in clockwise rotation.
2. The second pond contains STL Loaded jellyfish that float up and down.
3. The third pond has fish that move across random positions but swim within the pond boundaries.
4. The fourth pond has a school of fish that revolve in the pond in one direction.
5. The fifth pond contains plants and seahorses that float from side to side.
6. Information signs were custom designed through Adobe Illustrator, exported as .jpg format, and applied as textures onto the geometries in the scene.
1. The first pond contains two STL Loaded shark that swim in clockwise rotation.
2. The second pond contains STL Loaded jellyfish that float up and down.
3. The third pond has fish that move across random positions but swim within the pond boundaries.
4. The fourth pond has a school of fish that revolve in the pond in one direction.
5. The fifth pond contains plants and seahorses that float from side to side.
6. Information signs were custom designed through Adobe Illustrator, exported as .jpg format, and applied as textures onto the geometries in the scene.
INCORPORATE FROM THREE.JS LIBRARY
1. ImgLoader (textures, signs, materials)
2. Different geometries meshes to create sea animals
3. Custom noise shader to imply subtle water movement within the aquarium tanks
4. Animations and movements of sea animals, bubbles, (i.e. rotation, position)
5. Materials used on sea animals and/or geometries
1. ImgLoader (textures, signs, materials)
2. Different geometries meshes to create sea animals
3. Custom noise shader to imply subtle water movement within the aquarium tanks
4. Animations and movements of sea animals, bubbles, (i.e. rotation, position)
5. Materials used on sea animals and/or geometries
STL OBJECTS
- Shark
- Jellyfish
- Fish
- Sea plants
- Seahorse
- Lotus
- Palm tree
- Beach chair
- Shark
- Jellyfish
- Fish
- Sea plants
- Seahorse
- Lotus
- Palm tree
- Beach chair
GEOMETRIES
- Sphere
- Cylinder
- Plane
- Cube
- Sphere
- Cylinder
- Plane
- Cube
JAVASCRIPT LIBRARIES USED
1. STLLoader (sea animals and sea plants)
2. ObjLoader (sea animals and sea plants)
3. Pointer Lock API Controls (movement of the user)
1. STLLoader (sea animals and sea plants)
2. ObjLoader (sea animals and sea plants)
3. Pointer Lock API Controls (movement of the user)
Special Thanks to Dr. Alvaro Monge