Featured Posts

Open Source Cinema | Elements | Protagonist, Setting, Breadcrumb

April 12, 2018

Homework link:




These are the components of my assignment this week:

  1. Importing an OBJ element and attempting to style it.

  2. Importing a Collada (.dae) animation

  3. Capturing more 360 footages & making the background changeable

  4. Creating breadcrumb in the scene

OBJ : importing and styling


Firstly, I wanted to combine two of DanO’s examples (saving scene + loading different assets). After initial issues with the version of three.js (the cloudfare link is not the most updated!) I managed to do so.


Other issues that I had:

  • I had to comment out all of the kinectron keying functions / lines.

  • I did not have a texture initially, so the console kept throwing error in WebGL (would be great to have a checklist of elements to have before you can see the model in the scene).

  • Finding the actual model. It was really small and was lying down.



Ideally I would want to be able to have a menu to change the skin of the model. But making a UV texture was too complicated a task for me.





I thought that the OBJ model did not make a compelling protagonist – it was still and had its arms up. It would be something else if the model was already in a pose and/or I could impose faces onto the model’s face (this is probably doable with openCV).


So I browsed three,js examples to see if there are examples of importing animated 3D models. 

I came across an example that used JSON, but I got really confused with how three.js controlled the vertices/animation.


Then I found an example with collada file format, and it has a dancing stormtrooper. I ran into some error because I did not include “mixer” in the animate() function, but I managed to adapt the code in.

   // collada

     var loader = new THREE.ColladaLoader();

     loader.load( 'assets/collada/stormtrooper/stormtrooper.dae', function ( collada ) {

       var animations = collada.animations;

       var avatar = collada.scene;

       avatar.position.y = -5;

       avatar.position.z = -2;

       avatar.position.x = 0;

       avatar.rotation.z = -Math.PI;

       mixer = new THREE.AnimationMixer( avatar );

       var action = mixer.clipAction( animations[ 0 ] ).play();

       scene.add( avatar );

     } );

function animate() {


 // Update the textures for each animate frame



 if ( mixer !== undefined ) {

    mixer.update( delta );


 renderer.render(scene,   camera3D);


Changeable 360 Background


I went around with Ricoh Theta last week to capture more footages (because I misinterpreted week 2’s assignment).


For this assignment, I wanted to be able to change the BG, so created an interface to show the name of the setting and buttons to switch between settings. The name/labelling of the setting is important because I think it is the starting point to have “hyperlinked” cinema elements.


I have yet to add the functionality to save selected background to the database.





I used p5 function from the example to load the next available video background. This is an element from week 2’s experiment. I wanted to see if having a “breadcrumb” would make sense in this cinema-making framework.


I’m still undecided if it is useful because I am not sure if the breadcrumb would be part of the viewing experience or the cinema-making.


Some Reflections


Ideally, I would like to have these features:

  1.  Change & adjust protagonist (and other characters)

    •  Connect to an open source Collada / JSON model repository

    • GUI to search for model name and animation

    • GUI to change the styling of the model (it can be broad style like cell-shading, realistic, surreal, etc.)

    • GUI to attach sound clips to the model (or write my own lines for the protagonist).

  2.  Change & adjust setting setting

    •  Same as character’s features above.

    •  Ambience sound instead of dialogue lines.




Share on Facebook
Share on Twitter
Please reload

Related Posts
Please reload

Generative Music | Latent Space Sequencer

December 13, 2018

Please reload

Recent Posts
Please reload

Search By Tags

Hafiyyandi | Creative Technologist

New York, New York | hafiyyandi@gmail.com