部分等距柱状全景 Three.js

Question

我有完整的等距柱状图像，可以很好地与 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 );

但我的图像实际上只包含 180x180 度（球体的一半），因此我试图在不将图像拉伸到整个球体的情况下将方形纹理部分应用到球形网格上。我认为它与 texture.offset.xyz 参数有关，但我没有成功。虽然我可以继续填充我的图像以符合 2x1 Equirectangular 标准，但我宁愿将这一步从我的处理工作流程中删除。

下面是完整的等距柱状图像和我正在尝试处理的正方形图像。有没有人知道如何做到这一点？谢谢！

Answer 1

SphereBufferGeometry 有更多的可选参数：

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.

您可以使用 phiStart、phiLength、thetaStart 和 thetaLength 来定义部分球体

所以要制作半球体，您可以尝试类似的操作：

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

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

Answer 2

错误不在源代码中，而是在纹理图像中：它们都是错误的。

像这样的 180 度鱼眼：

重新投影到等距柱状投影将如下所示：

你的贴图看起来像是 360x180 等距柱面和 270° 鱼眼的混合，看起来像这样（错误 labels/numbers，因为我使用相同的 180 FOV 鱼眼来创建它）：

部分等距柱状全景 Three.js

Partial Equirectangular Panorama Three.js

javascript

photo

panoramas

three.js