top of page
Featured Posts

Open Source Cinema | Elements | Protagonist, Setting, Breadcrumb

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).

  1. Change & adjust setting setting

  • Same as character’s features above.

  • Ambience sound instead of dialogue lines.

#OpenSourceCinema #threejs #360

Recent Posts
Search By Tags
No tags yet.
Related Posts
bottom of page