360º degree camera in three.js

Question

Does anyone know how to create a 360º camera in three.js?

I'm trying to render the entire scene as a 360º panorama like you would with a go pro 360 rig.

I'm trying to recreate a panorama by arranging several screens in a circle and stretch a threejs window across all the screens.

For this I need a very wide window that has a tree.js camera that captures the entire scene in 360º

Is this possible?

here there. Did you ever get this working in realtime? what was the performance like? — Ben Clayton, Dec 01 '19 at 08:34

score 3 · Answer 1 · answered Feb 03 '17 at 19:18

3

You can't represent a 360-degree view with a conventional view matrix. You need to render to a set of textures (e.g. the six faces of a cube) then combine them into a 360 degree mapping such as equirectangular.

answered Feb 03 '17 at 19:18

griffin2000

709
9
26

Martin Schuhfuß · Accepted Answer · 2017-02-07T20:32:10.907

3

It is definitely possible, as it was already implemented: https://github.com/spite/THREE.CubemapToEquirectangular

That library will just export snapshots as png, but looking at the code it should be possible to integrate the same method it uses into realtime-rendering if you want to...

edited Feb 07 '17 at 20:32

answered Feb 04 '17 at 00:42

Martin Schuhfuß

6,814
1
36
44

Thanks, this is very interesting! – Richard Vijgen Feb 04 '17 at 19:48
1

Doesnt seem to work in threejs 103. There are a number of new changes to cubeCamera and THREE.WebGLRenderTargetCube (no longer called this, and you need to be careful of shadows and clearing buffers). – David Lannan Apr 26 '20 at 13:44

360º degree camera in three.js

2 Answers2