Question

我正在尝试为使用Pixpro SP360拍摄的图像构建一个查看器。这款相机配有鱼眼镜头，视野为214度。得到的图像是黑色正方形，其中以圆形图像为中心。圆的直径（和正方形的边）是1440px。

我想在截断的球体上使用这些图像作为纹理（（Math.PI * 2）的phiLength和（（214/360）* Math.PI的thetaLength）。问题是纹理映射似乎包括距离中心超过1440px的黑色区域。我尝试过使用各种texture.mapping，texture.wrapS＆amp; texture.wrapT值但没有成功。

我正在使用的代码改编自http://threejs.org/examples/#webgl_video_panorama_equirectangular，几乎与{{3}}相同，但截断球体除外。

是否有方法将图像的圆形中心部分映射到截断的球体？

Answer 1

最简单的方法是使用照片编辑器并将黑色区域更改为透明。

或者您可以编写自己的片段着色器以仅使用纹理贴图的中心圆形位。像这样：

<script id="fs" type="x-shader/x-fragment">
    uniform sampler2D iChannel0;

    varying vec2 vUv;  
    varying vec4 vColor;
    void main() {
        vec4 zerovec = vec4(0.,0.,1.,1.);
        vec2 uv = vUv;
        vec4 tex1 = texture2D( iChannel0,  uv);
        float radius = sqrt(pow(uv.x - .5,2.) + pow(uv.y-.5,2.));
        if (radius < 0.45)
            gl_FragColor = tex1;
        else
            gl_FragColor = zerovec;
    }

</script>

在我的示例中仍然存在一些映射工件，但它摆脱了边界方块。完整示例：http://rwoodley.org/MyContent/WIP/33-StackOverflowShaderExample/06.html

ThreeJS：将方形图像的圆心映射到截断的球体？

1 个答案: