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

Project Update_03-Basic Scene Completed

Recently I found the source code of previous reference(the blooming flower) I post:

However, the logic and the original mesh created by Felix Faire are different from my thoughts, so I need to make some adjustments. And some functions he used in it still looked a little bit confused to me, I will further explore it.

I also find his Tweeter page and start following him to see if he create some new works related to Three.Js:

Because Blender can export 3D model as .obj file which is recognized by Javascript language and Maya cannot make this happen, I follow a tutorial to create a flower in it and it worked!

Then I used OBJLoader function in Three.js and set the color and light of my mesh. Currently it works like this:

http://shanyan923.github.io/chapter-08/FLOWER.html

My next step is trying to add control panel and music into it. Hope it will work.

Project Update_02-Creating the visual model

I'm working on making an simple 3D model of my project, after it finished, I will import it into three.js editor and add movement and music to my model.

Now the problem I have is that I was unable to import Maya file into Unity(it has format can be imported into Three.js editor).

Then I found an tutorial on Youtube and tried, but it still cannot work. I will continue figuring it out. If the 3D model fail to work in the end, I will consider try to use code to make my visual model just as the reference I showed you before.

Here is the tutorial video if you need:

And the following is part of my project model(it look like sort of underwater creature such as sea urchin), it is not the final version, I will continue adjusting it.

As for the text, now I am exploring the topic Aesthetics of Natures in the book Art forms in Nature. And I am moving on to Chapter-3 in Learning Three.js.

Just feel free to post your comments and advice here. Thanks!

Project Update_01-The work I tried before

shanyan923.github.io/chapter-12/06-audio copy.html

Midterm Project

Project Name: Originate From Nature

General Description:

What I think is to use Three.js to make an visual effect related to nature living creatures such as marine organism, plants etc. with some basic movements and sounds in Three.js. I may also want to add some control functions in it, for instance, the player can transform the object like scale, rotation and so forth or add some similar objects as they want. It just an immature thought because I have no idea whether can I make it or not then.

The above idea was coming from the text I chose- Art Forms in Nature, which introduce a lots of beautiful and symmetrical form within the body of nature living creatures themselves. The abundant illustrations in this book can give inspiration of visual design in my project. The project may not be very complicated because I am a totally green hand in Javascript. But I will try to learn as much as I can to complete this project and make it match with my original thought.

                         

Process of Finishing My Project:

·    Continue learning about Three.js and Javascript (use the textbook Learning Three.js and   
    resources on Three.js Website)

·     Keep on finding more useful reference

·     Start creating the scene  of my project

·     Design the visualization, movements and sound

·     Final adjustment base on real situation and ability

Referred Textbook :

I. Art Forms in Nature

   Author: Ernst Haeckel  
   Paperback: 140 Pages  
   Publisher Prestel( August 25, 2008)


II. On Aesthetics in Science

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

III. 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.    https://www.chromeexperiments.com/experiment/arkadia

I may use this as reference for my project’s visualization because the color and shape are kind of matching with my ideas.

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

     

 

It has a control panel on the right side top area. I will figure out how it work and corresponding code

in javascript.

III.  http://helloenjoy.com/2013/from-unity-to-three-js/

This instruction shows how to import from unity to three.js. Since Unity support javascript, I 

can further study this if create some mesh is necessary.

   

Three Topics I choose in Art Forms in Nature

I. Organic Symmetries

II. Aesthetics  of Nature

III. The Artist in the Scientist

Three Topics I choose in On Aesthetics in Science

I. On Broken Symmetries

II. The Mathematical Unconscious

III. Rationality and Intuition