Final Project Done- Environment Map Change with audio

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.

Final Project Update- CubeMap effect

I change my mind and want to use CubeMap function to create a interactive scene.
My current work look like that:

The scene is created by using 6 pictures from different angels and sides on a cube. The arrangements is like that:

I found a website which can convert panorama picture into cube sides pictures. 

http://gonchar.me/panorama/

And another link which can download different cube textures:

http://www.humus.name/index.php?page=Textures

Next I will add sound into the scene and try to realize more interactive function on the control panel.

Final Project Update_1 -Uncaught TypeError

The following is my html file screen shot:

But when I run it, it has some Uncaught TypeError: said that setTranslation is not a function.

So I found some reference and working on solving those problems:

i) http://threejs.org/docs/#Manual/Introduction/Matrix_transformations

ii)https://www.toptal.com/javascript/10-most-common-javascript-mistakes

iii)http://stackoverflow.com/questions/7850184/jquery-ajax-function-chrome-throwing-uncaught-syntaxerror-unexpected-number

Final Project Idea

General Description:

My thought for the final is that I want to make a project that combine movements with sound. The visual part will be a ground plane with grids. When my mouse move to the specific position, the corresponding grid will convex. For the audio part, I want to add sound when the cube appears on the plane. It may look like the following scene but I will make some changes to it.  I may also add some function like color change, mouse control etc to it. 

Process of Finishing My Project:

·    Continue learning textbook Learning Three.js

·     Figure out the logic of the source code 

·     Start creating the scene of my project

·     Design the visualization, movements and sound

·     Final adjustment base on real situation and ability

Referred Textbook :


I. On Aesthetics in Science

   Author: Judith Wechsler
   Hardcover: 208 Pages  
   Publisher: MIT Press; 1st Edition (June 1978)

II. Learning Three.js: The JavaScript 3D Library for WebGL (E-Book)

   Author: Jos Dirksen
   Publisher: Packt Publishing-ebooks Account; 2 edition( March 31, 2015) 
   File Size: 10942 KB
   Print Length: 422 pages

Reference of Project Idea:

I.   http://mrdoob.com/lab/javascript/webgl/voxels_liquid/index.html

My project will base on this and add some other effects such as sound, color, movement etc.

II.   https://www.chromeexperiments.com/experiment/bloom-parametric-flora

The above is the source code of my project.

III.  http://japhr.blogspot.com/2013/02/adding-sound-to-threejs-games.html

It tells how to add sound in a game, I think it may help to solve my questions.

   

  

Project Completed_06-Adjust the sound and add mute toggle

With the help of Yoyo, the music I added no longer sounds wired as I move the flower. The method is to add the sound in the background rather than simply add it to the scene. Besides, Yoyo also help me add a toggle button which can mute or unmute the  background music. I really appreciate her assistance which make my project work more smoothly.

Here is the link to the final version of this project:
shanyan923.github.io/chapter-08/Lotus with sound control.html

Project Update_05-Solved some problems and added sound source

Based upon the problem I encountered in last post, the following is the link I found which answer my doubts.

I. How to use GUI function

My project need to have a control panel to transform the object. And it is gui function in Three.js could make this happen. The following link uses some text animation effect to demonstrate how to use gui function.

http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage

Also, I checked the correspond contents in textbook Learning Three.js named Using dat.GUI to make experimenting easier(Chapter-1)

II. Change the color value

The problem I had was after I create color control button in gui. It failed to work. Hence I found the following link which introduces different ways to make color value change.

http://threejs.org/docs/#Reference/Math/Color

But later I found it was still a little bit abstract for me to apply them into my project, I found the source code of Bloom made by Felix Faire and got my problem solved. Here is the screen shot:

However, I can only make the light color change and still have no idea how to change the mesh color itself after tried various methods.

III. Light Usage

What kind of light I need to use and how to use them was a big problem for me. So I checked the textbook Learning Three.js and found that Chapter-3 named Working with the Different Light Sources Available in Three.js explains each light sources and its usage in details.  And this attached chart in it clearly shows the differences among all the light sources.

In addition, the link below tells you different vertices means different direction of the light such as top, back, left, right etc.

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL

IV. Add sound

I found an example and checked the source code.

http://threejs.org/examples/misc_sound.html


Currently my project works like that:

shanyan923.github.io/chapter-08/Lotus.html

Project Update_04-Got control panel working

I adjusted the camera position and added control panel to my work. But some control functions like color still need to be adjusted. What I left is to add sound source and try to fix the problems to finish this work.

Here is the link:
shanyan923.github.io/chapter-08/Lotus.html