# Displaying RICOH THETA’s (360 degree camera) Dual fisheye video with Three.js

**URL:** <https://discourse.threejs.org/t/displaying-ricoh-theta-s-360-degree-camera-dual-fisheye-video-with-three-js/261>\
**Category:** Resources\
**Tags:** dual-fisheye\
**Created:** [April 26, 2017, 11:18pm UTC](https://discourse.threejs.org/t/displaying-ricoh-theta-s-360-degree-camera-dual-fisheye-video-with-three-js/261 "2017-04-26T23:18:03Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jcasman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jcasman/32/132_2.png) [@jcasman](https://discourse.threejs.org/u/jcasman)\
**Post date:** [April 26, 2017, 11:18pm UTC](https://discourse.threejs.org/t/displaying-ricoh-theta-s-360-degree-camera-dual-fisheye-video-with-three-js/261/1 "2017-04-26T23:18:03Z")

</div>

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.

> **[Displaying THETA's Dual fisheye video with Three.js](https://community.theta360.guide/t/displaying-thetas-dual-fisheye-video-with-three-js/1160)**
>
> This article originally appeared on Qiita in Japanese by mechamogera I tried to display dualfisheye movie (movie before conversion) in RICOH THETA S with Three.js. While getting help with the calculations, I worked through this myself, so there may...

---

<div class="post-metadata">

**Author:** ![mrdoob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrdoob/32/22417_2.png) [@mrdoob](https://discourse.threejs.org/u/mrdoob)\
**Post date:** [April 27, 2017, 5:54am UTC](https://discourse.threejs.org/t/displaying-ricoh-theta-s-360-degree-camera-dual-fisheye-video-with-three-js/261/2 "2017-04-27T05:54:54Z")

</div>

Yep. I saw that article a while ago. Turned it into an example:

[https://threejs.org/examples/#webgl\_panorama\_dualfisheye](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.

---

<div class="post-metadata">

**Author:** ![jcasman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jcasman/32/132_2.png) [@jcasman](https://discourse.threejs.org/u/jcasman)\
**Post date:** [April 27, 2017, 4:10pm UTC](https://discourse.threejs.org/t/displaying-ricoh-theta-s-360-degree-camera-dual-fisheye-video-with-three-js/261/3 "2017-04-27T16:10:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mrdoob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrdoob/32/22417_2.png) [@mrdoob](https://discourse.threejs.org/u/mrdoob)\
**Post date:** [April 27, 2017, 10:34pm UTC](https://discourse.threejs.org/t/displaying-ricoh-theta-s-360-degree-camera-dual-fisheye-video-with-three-js/261/4 "2017-04-27T22:34:19Z")

</div>

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 😊

---

<div class="post-metadata">

**Author:** ![jcasman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jcasman/32/132_2.png) [@jcasman](https://discourse.threejs.org/u/jcasman)\
**Post date:** [April 27, 2017, 10:50pm UTC](https://discourse.threejs.org/t/displaying-ricoh-theta-s-360-degree-camera-dual-fisheye-video-with-three-js/261/5 "2017-04-27T22:50:50Z")

</div>

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:

> **[Mapping THETA S dual-fisheye live streaming to a spherical surface in the...](https://community.theta360.guide/t/mapping-theta-s-dual-fisheye-live-streaming-to-a-spherical-surface-in-the-browser/1165?u=jcasman)**
>
> This blog was originally written by Atsushi Izumihara in Japanese. He uses the ID AMANE. This is a community translation into English. Introduction When THETA S came out, I tried to stream it to WebRTC and use it as a USB camera. However, I had...

---

<div class="post-metadata">

**Author:** ![danrossi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danrossi/32/1017_2.png) [@danrossi](https://discourse.threejs.org/u/danrossi)\
**Post date:** [May 5, 2018, 3:29pm UTC](https://discourse.threejs.org/t/displaying-ricoh-theta-s-360-degree-camera-dual-fisheye-video-with-three-js/261/8 "2018-05-05T15:29:33Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![danrossi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danrossi/32/1017_2.png) [@danrossi](https://discourse.threejs.org/u/danrossi)\
**Post date:** [May 6, 2018, 11:51am UTC](https://discourse.threejs.org/t/displaying-ricoh-theta-s-360-degree-camera-dual-fisheye-video-with-three-js/261/9 "2018-05-06T11:51:56Z")

</div>

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.

[https://www.shadertoy.com/view/ld2yzG](https://www.shadertoy.com/view/ld2yzG)

---

<div class="post-metadata">

**Author:** ![acalcutt](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/acalcutt/32/57078_2.png) [@acalcutt](https://discourse.threejs.org/u/acalcutt)\
**Post date:** [February 23, 2025, 8:31pm UTC](https://discourse.threejs.org/t/displaying-ricoh-theta-s-360-degree-camera-dual-fisheye-video-with-three-js/261/10 "2025-02-23T20:31:17Z")

</div>

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

> <https://github.com/acalcutt/html5-360-viewer/blob/b1823a72ff4ed604b62e6ce8be354331443a7755/lib/360-view-image.js#L83-L109>

However in newer version geometry.faceVertexUvs is no longer available, so i tried to reword the code to

> <https://github.com/acalcutt/html5-360-viewer/blob/259619bd6648fcc9899e35e5c672460c378e01c8/lib/360-view-image_unfinished.js#L70-L101>

this almost works, but i and up with a gap between the images

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/f/ef06247dddede3c0eb8636be0dc6ee3e01f4f62f.jpeg)

where the old version looks a lot better, like this

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/d/7d074c8f5136a056bb9f9fee1f77d77877c9119a.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![acalcutt](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/acalcutt/32/57078_2.png) [@acalcutt](https://discourse.threejs.org/u/acalcutt)\
**Post date:** [February 25, 2025, 8:58pm UTC](https://discourse.threejs.org/t/displaying-ricoh-theta-s-360-degree-camera-dual-fisheye-video-with-three-js/261/11 "2025-02-25T20:58:16Z")

</div>

@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

> <https://github.com/acalcutt/html5-360-viewer/blob/2f48ad5acb99db0f3ca312cf5945df8804da9bf6/lib/360-view-video.js#L76-L150>