部分 Equirectangular 全景 Three.js答案

【问题标题】：Partial Equirectangular Panorama Three.js部分 Equirectangular 全景 Three.js
【发布时间】：2016-04-26 15:59:11
【问题描述】：

我有完整的 equirectangular 图像与 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 标准，但我宁愿从我的处理工作流程中删除这一步。

您会在下面找到完整的 equirectangular 图像和我正在尝试制作的正方形图像。有没有人知道如何做到这一点？谢谢！

【问题讨论】：

可能是解析 uv 贴图，将 u 乘以 2 并钳制为 1？

标签： javascript three.js photo panoramas

【解决方案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

【讨论】：

完美！感谢您的帮助。

【解决方案2】：

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

这样的 180 度鱼眼：

重新投影为 equirectangular 将如下所示：

您的纹理看起来像是 360x180 equirectangular 和 270° 鱼眼的混合，看起来像这样（标签/数字错误，因为我使用相同的 180 FOV 鱼眼来创建它）：

【讨论】：