I. Progress and challenges
Create a Cube Map, load images into it. Six side image.
Create the skybox. So you camera can look it around
Apply CubeMap texture into it.
The thing is I need to find those kind of panorama picture and turn it into six sides of cube. It did cost me some time to do these for six scene.
Create CubeTexture:
http://threejs.org/docs/index.html#Reference/Textures/CubeTexture
create CubeCamera:
http://threejs.org/docs/index.html#Reference/Cameras/CubeCamera
Covert image into panorama:
Here is the website I found which convert your 360 degree panorama picture into six sides.
http://gonchar.me/panorama/
High resolution CubeTexture Image resources:
However, most image I found on Google image just have low resolution and it looks bad when I load them into the three.js scene. Fortunately, I found a website which have open source for people to down super high resolution cubemap images.
https://render.otoy.com/vr_gallery.php?page=1&ipp=10&sortBy=date_z&searchTerm=&showMonth=&show_wip=0
How to switch environment map:
Another difficult thing for me is to realize the function of switching different scene. Different from other mesh which usually only have one texture and material property, cubemap need to have path of six images, texture, material, shader. map reflection and so forth. Though I use a different function other than the following method in the end, it still can be a good reference.
http://stackoverflow.com/questions/24567923/how-to-change-environment-map-texture-dynamically-on-reflection-material
Camera Rotate:
I want to let the camera rotate automatically when user click the button, the effect just like you look around the room. Again, fortunately, new orbitcontrol thing in three.js already has this function, so I don't need to create on my own.
http://stackoverflow.com/questions/18466578/rotate-camera-around-object-with-three-js
Sound Effect:
http://jyunming-chen.github.io/tutsplus/tutsplus20.html
Sound Resources from Freesound:
Timezone:
http://freesound.org/people/dobroide/sounds/70260/
http://freesound.org/people/furbyguy/sounds/331874/
FloatCity:
http://freesound.org/people/natemarler/sounds/338675/
II. Texts and Reference for Guidance
Learning Three. js
It is a really good book. The author explain all the functions in the book in detail and give reader lots of external resources.
Art Forms in Nature
Although there are mainly images in that book, it still give me reference of how a good art work should look like from the color and shape illustration in the book.
Here is the sample project I found on Three.js website. It helped me a lot to create this project.
Sample Project:
http://threejs.org/examples/#webgl_materials_envmaps
SourceCode:
https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_envmaps.html
III. My current work on Github
My idea is that make user feel that they were at home and they can see many beautiful scene through the magic crystal ball.
http://shanyan923.github.io/chapter-12/MAP%20FINAL%20with%20AUDIO.html
There are five other scene set for change, and each scene in the magic crystal ball has different music.
The scene can be rotated by clicking the button on the left top side and you can mute the music as you want.
