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

【问题标题】：ThreeJS: Map circular center of a square image to truncated sphere?ThreeJS：将方形图像的圆形中心映射到截断球体？
【发布时间】：2015-01-04 05:21:09
【问题描述】：

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

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

我使用的代码改编自 http://threejs.org/examples/#webgl_video_panorama_equirectangular，除了截断球体之外几乎完全相同。

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

【问题讨论】：

标签： three.js

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

【讨论】：

感谢 Bob，但这并不能真正解决问题。如果图像圈外的黑色区域是透明的，则 Three.js 似乎将图像的边缘夹在截断球体的边缘，而不管 alpha 值如何。我尝试将 texture.wrapS（和 .wrapT）从 THREE.ClampToEdgeWrapping 更改为 THREE.RepeatWrapping 和 texture.repeat.set = (1,1) 但这似乎没有任何改变。
我猜你需要写一个片段着色器并自己做UV映射。
非常感谢鲍勃！我会研究并尝试一下。我会回来报告的。
@RichardMilewski 嗨，你在这方面有什么进展吗？
我最近没有太多时间来做这件事，但是.... Mozilla 的 WebVR 团队发布了一个用于在网络上进行 VR 的 JavaScript 框架。 (aframe.io)。我确实在他们的 GitHub 存储库中提出了一个关于这个问题的问题（#869）。 A-Frame 目前正在紧张开发中，所以我希望有人能尽快处理它。自定义着色器支持存在跟踪问题 (#880)，请检查该问题是否有进展迹象。