EXPERIENCE FLOATING MEMORIES - LIVE DEMO
FLOATING MEMORIES (opens in new browser)
or
http://sarahjhan.design/explorations/panoTestImages.html

Please wait until all images are loaded before pressing the playing button. Turn up the volume for the music :]
Interact and change the view of the scene using the three mouse buttons (rotate, zoom in, pan view). Try clicking, dragging and scrolling using the mouse buttons in the scene.
(Left mouse button: rotate, Scroll mouse: zoom in and out, Right mouse button: pan view)

Note: Works best in Chrome or Firefox on desktop
PROJECT OVERVIEW

The technologies of WebGL, Three.js and Web Audio API were combined to show audio visualization through a rotating interactive scene of images that scale in size. All images were taken by myself through my travels in Japan and Hong Kong with my BFA Graphic Design class.
ENVIRONMENT / SCENE CREATION

The 360 equirectangular image was generated into six separate images to create a Cubemap environment. The spheres geometries in the environment also use the Cubemap image as a reflective mirror material. Texture images of gold, water, and the moon were loaded onto geometries and the objects to add a sense of dream-like surrealism in the scene. 


IMAGES

- 32 iPhone images
- 360 image (for the background environment and reflective material for the sphere geometries)
- Gold, moon, and water texture image



GEOMETRIES

- Cube
- Plane
- Sphere
- Torus
- TorusKnot



STL LOADED OBJECTS

- Kinkakuji Temple
- Koi Fish
- Paper Crane



JAVASCRIPT LIBRARIES USED

- Three.js
- jQuery
- OrbitControls
- STLLoader



API USED

- Web Audio API


MUSIC

- "Nighttime" by Re:plus
IMAGES USED
EQUIRECTANGULAR IMAGE USED TO GENERATE CUBEMAP
Special Thanks to Dr. Alvaro Monge
Back to Top