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