three.js — fit a background image panorama

Question

I am trying to put this image -- https://hdfreefoto.files.wordpress.com/2014/09/bright-milky-way-over-the-lake-at-night.jpg -- as a panorama background in my three.js scene.

I have the following code:

var sphere = new THREE.SphereGeometry(200, 200, 32);
sphere.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));

var sphereMaterial = new THREE.MeshBasicMaterial();
sphereMaterial.map = THREE.ImageUtils.loadTexture(<path to above image>);

var sphereMesh = new THREE.Mesh(sphere, sphereMaterial);
scene.add(sphereMesh);

However

1. When i view through cardboard, and rotate 360 degrees, i do not see the background rotate 360 degrees (but less than that). How do i align?

2. When i view on my laptop, i can rotate the image but it seems to underfit the screen dimensions

Is there a guideline on how to perfectly fit a given background image as a three.js panorama?

Answer 1

As far as I know, there is no guideline, but you can test with the three.js examples:

• For equirectangular (you can drag over your equirectangular images to test them)
• For dualfisheye

There's also cubic map here, but it's not a usual or easy way of creating panoramas, and this case it works over CSS, not webGL.

As you can see in the webGL equirectangular panorama code, the correct code would be:

var geometry = new THREE.SphereGeometry( 500, 60, 40 );
geometry.scale( - 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {
  map: new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' )
} );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );