Infinite Ocean: 3D Art Gallery

Demo

infiniteOceanArtGalleryDemo.mp4

Team

• Aimee Diaz
• David Kromka
• Katrina Webb
• Tri Pham

Features

Mouse Controls:

• Scroll to zoom
• Click and drag to move the camera
• Click on the canvas to move the camera to the specific position
• Easter Egg: Click on sun to toggle night mode

Keyboard Controls:

• Enter to begin the interactive experience
• <- to move to the left canvas
• -> to move to the right canvas
• m to toggle sound

Art

Amazing artists from CSU East Bay provided art:

• Bride - Ebba Wagner
• Waterfall - Ebba Wagner
• Polyfall - Valentina Piraneque Ortiz
• Lunar Eclipse - Valentina Piraneque Ortiz
• At the Gate - Liz Burkhart
• Arrival - Liz Burkhart
• Serene - Mykal Coleman

Photography

Pictures were shot on Tri's Sony A7 III mirrorless camera with the following lenses:

• Sigma 24-70mm f2.8 zoom lens
• Sony 85mm f1.8 prime lens
• Sony G Master 100-400mm f/4.5-5.6 zoom lens

Installation

To install, clone the project and run npm install within the project directory's path in the terminal.

Next, run the command npm i three to download the THREE.js library.

Then, run npm install gsap@3.5.1 to install camera movements.

Finally, enter the command npm run dev to build the project.