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 :]
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
(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.
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
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