google cardboard - three.js -- fit a background image panorama -

i trying put image -- https://hdfreefoto.files.wordpress.com/2014/09/bright-milky-way-over-the-lake-at-night.jpg -- panorama background in three.js scene.

i have 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 above image>);  var spheremesh = new three.mesh(sphere, spherematerial); scene.add(spheremesh); 

however

1. when view through cardboard, , rotate 360 degrees, not see background rotate 360 degrees (but less that). how align?

2. when view on laptop, can rotate image seems underfit screen dimensions

is there guideline on how fit given background image three.js panorama?

as far know, there no guideline, can test three.js examples:

• for equirectangular (you can drag on equirectangular images test them)
• for dualfisheye

there's cubic map here, it's not usual or easy way of creating panoramas, , case works on css, not webgl.

as can see in webgl equirectangular panorama code, correct code 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 );