Helped translate this Japanese blog with good information on using Three.js to handle 360 degree video. It’s a link to the RICOH THETA Unofficial Guide, also a Discourse forum, that has lots of info for using the RICOH THETA open API and manipulating content. Adding here as a resource.
1 Like
Yep. I saw that article a while ago. Turned it into an example:
https://threejs.org/examples/#webgl_panorama_dualfisheye
Neither the original article nor my port is ideal thought. This should be done in the fragment shader instead so we can smooth out the sides.
Thanks for posting the example. Very useful to see it in action, including the sharp stitching lines, like you mention. Just curious, how’d you find the article originally? Do you read Japanese? Kind of cool that you connect into the Japanese community.
I tend to follow what people share on twitter. It was probably shared over there.
I do not read Japanese, but I do have one of those cameras so I quickly understood what the article was about 
I really love that can-do attitude. Don’t let a little foreign language get in the way of learning. Very cool.
We translated another one, some similar topics, so adding the link here in the case it might be useful, or maybe you already ran into the Japanese version:
1 Like
Hi I have tested this against a demo video. I presume produced with the Theta or Samsung 360. There is an issue with the seam. It’s distorted at the seam.
How would it be possible to convert in the shader ? I have looked at some shader code for single sided fisheye. And it doesn’t seem to work either.
There is a possibly shader version which could utilised for single fisheye 180. But it’s very hard to convert from shadertoy.
The uv code here is not correct and the seams don’t line up.
I know this is a very old topic by can anyone suggest how to update this to the latest version of three.js? I can make a new topic but i figured I should ask here first.
I have this code based on the code above that works in three.js r124
However in newer version geometry.faceVertexUvs is no longer available, so i tried to reword the code to
this almost works, but i and up with a gap between the images
where the old version looks a lot better, like this
Does anyone have any suggestions on how I can get rid of the gap? I have tied adjusting the values but haven’t found anything that works.
@manthrax was able to help me get something that works with the current version.
If i understand correctly the new code makes two geometries and two meshes, then merges them together in the end. The original version one used one geometry and mesh, but that would not work in the current version. It still for the most part uses the same code for the position of the fisheye lenses.
I ended up with this code
1 Like