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
when view through cardboard, , rotate 360 degrees, not see background rotate 360 degrees (but less that). how align?
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 );
Comments
Post a Comment