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