Video hell
The definition of insanity is doing the same thing over and over again and expecting a different result.
After successfully being able to load videos into three.js as mentioned in a previous post, I thought it would be smooth sailing from there.
Oh boy I couldn't have been more wrong.
After dealing with CORS, I thought all the video trouble was behind me, but that was only the beginning. The plan was simple. I have three videos I want to showcase on a single object. I thought of an extruded triangle shape that would work well for this.
Firstly I looked on the three.js docs to see if there was any info about displaying videos on faces of an object. There was not. Onto google then. I read a few posts and got the idea that this wasnt (easily) possible without delving into shaders.
I wanted to avoid shaders as long as possible since that would require me to merge all three videos into one in order to map each uv coordinate to the shape. This would mean I couldn't play any audio of a video individually, so this was a no go.
Alright then, on to the second idea. I thought about just creating each face individually, aligning them manually, grouping them and adding the videos to each plane. This would've worked perfectly, if only it was a bit easier to align. Of course I had to choose a triangle shape and not something simple like a cube. Anyways, while I was aligning these planes, I saw a buried answer on a related stackoverflow post.
"BOOM a Two Faced Plane for ya, the loop will also work with geometries with more faces, replicating each face and applying the BackSide texture to it."
This was exactly what I was looking for.
I stopped working on the tedious manual aligning of the planes and decided to give this a shot. He did promise that this would work with geometries with more faces too... Turns out this was an answer from 2013. As you can probably guess whatever this code depended had long been deprecated.
So there I was, back to triangle one. I was in the same place, but had learned some things. During my research I found that you can set multiple materials on a single object if you just supply them to the mesh.
A three.js object can be presented in multiple ways, one of which is a Mesh. This takes a geometry and a material to render your object. If the geometry happens to be a cube — with 6 faces — and instead of supplying a single material, you give it an array of 6 materials, it'll map these to the faces, one for each.
Could this be the solution? I asked myself, afraid of the answer.
So, let's generate a mesh. I need 3 sides, so a triangle is the best primitive to use for this. I created a 2D triangle in three.js using THREE.Shape(). I drew 3 points and connected them to form the base triangle. Now I needed to extrude this to from the 3D geometry I need. Three.js has a function for this called THREE.ExtrudeGeometry().
Now was the moment of truth. I had the shape, now I just needed to supply 5 materials, one for each face, 3 of them being videos.
And that's where it went wrong, I expected each side of the extruded triangle to be it's own face but instead it wrapped all around. This was a fail once again.
I consulted with my coach who suggested I just do it manually to avoid delving even deeper into the rabbit hole. So that's what I'll do. I may do some other things first to clear my mind a bit though.
Sometimes it's better to go with what works, even if it's janky or inefficient, than to spend days researching different ways to get to the same, non-functioning result.