CODEWITHSUNDEEP
javascriptthree.jsphotopanoramas
Dustin Kerstein
Dustin Kerstein

Reputation: 450

Partial Equirectangular Panorama Three.js

I've got full equirectangular images working well with Three.js:

scene = new THREE.Scene();
geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
geometry.scale(-1, 1, 1);
material = new THREE.MeshBasicMaterial({ map: texture });
mesh = new THREE.Mesh(geometry, material);
mesh.rotation.y = Math.PI;
scene.add( mesh );

But my images actually only contain 180x180 degrees (half the sphere) so I'm trying to get a square texture partially applied on the spherical mesh without stretching the image across the entire sphere. I figure it has something to do with the texture.offset.xyz parameters, but I haven't been successful. While I can continue to pad my images to conform to 2x1 Equirectangular standards, I'd rather cut this step out of my processing workflow.

Below you'll find both the full equirectangular image and the square one I'm trying to get working. Does anyone have any clues on how to accomplish this? Thanks!

Full Equirectangular

Half Equirectangular

Upvotes: 2

Views: 1766

Answers (2)

jumpjack
jumpjack

Reputation: 990

The error is not in source code, it's in texture images: they are both wrong.

A 180 degrees fisheye like this:

fisheye180

reprojected into equirectangular will look like this:

equi180

Your textures looks like a mix of 360x180 equirectangular and 270° fisheye, wihich looks like this (with wrong labels/numbers, as I used same 180 FOV fisheye to create it):

fisheye270

Upvotes: 0

Giuseppe
Giuseppe

Reputation: 876

SphereBufferGeometry has more optional parameters:

SphereBufferGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)

radius — sphere radius. Default is 50.
widthSegments — number of horizontal segments. Minimum value is 3, and the default is 8.
heightSegments — number of vertical segments. Minimum value is 2, and the default is 6.
phiStart — specify horizontal starting angle. Default is 0.
phiLength — specify horizontal sweep angle size. Default is Math.PI * 2.
thetaStart — specify vertical starting angle. Default is 0.
thetaLength — specify vertical sweep angle size. Default is Math.PI.

you can use phiStart, phiLength, thetaStart and thetaLength to define partial sphere

so to do an half sphere you can try something like:

geometry = new THREE.SphereBufferGeometry( 500, 60, 40, 0, Math.PI, 0, Math.PI );

reference http://threejs.org/docs/#Reference/Extras.Geometries/SphereBufferGeometry

Upvotes: 1

Related Questions