Mapping a stereographic projection to the inside of a sphere in ThreeJS

Question

When it comes to 3D animation, there are a lot of terms and concepts that I\'m not familiar with (maybe a secondary question to append to this one: wha

Answer 1

Here is as close as I could get it in about 10 minutes of fiddling with a polar unwrapping of the uv's.

You can modify the polarUnwrap function to try and get a better mapping....

https://codesandbox.io/s/8nx75lkn28

You can replace the TextureLoader().loadTexture() with

//assuming you have created a HTML video element with id="video"
var video = document.getElementById( 'video' );

var texture = new THREE.VideoTexture( video );
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;

to get your video fed in there...

More info here:

https://threejs.org/docs/#api/textures/VideoTexture

Also this may be useful to you:

https://community.theta360.guide/t/displaying-thetas-dual-fisheye-video-with-three-js/1160