使用着色器升级threejs的问题答案

【问题标题】：Issue upgrading threejs with shaders使用着色器升级threejs的问题
【发布时间】：2015-05-30 07:51:41
【问题描述】：

我正在开发 3d dataviz。我需要展示一个包含数据的世界，并使用 chrome 实验 (chromeexperiments.com/globe) 作为指南。

问题是这个可视化是用 Threejs r40 制作的，很难找到关于它的文档，所以我尝试升级到 r71。

我解决了渲染世界的兼容性问题，但不能让它显示气氛，事实上，当我尝试显示气氛时，什么都没有显示（就像气氛被渲染成黑色，它隐藏了世界一样）。

我认为问题出在着色器上，但我不太确定。

有人知道吗？

这是我正在使用的代码：

gist.github.com/glena/0b2875044cd6c39ff150

谢谢

===========

更新：

如果我移除 fragentShader，它会呈现为一个红色球体，但仍然会以黑色背景覆盖整个世界：

 var mesh = new THREE.Mesh(new THREE.SphereGeometry(100, 40, 30), 
        new THREE.ShaderMaterial({

          uniforms: uniforms,
          vertexShader: shader.vertexShader

        })
      );

【问题讨论】：

有什么办法可以使它成为一个工作的 jsfiddle？
试试mesh.flipSided = true; ==> mesh.material.side = THREE.BackSide;
是的，但它不会为世界加载图像，它会引发 CORS 错误，所以我换了一个没有着色器和纯色的更简单的jsfiddle.net/sfuc3wf2
@WestLangley 哇，这就是问题所在，而且似乎在起作用。谢谢！。谢谢
@WestLangley 嘿伙计，回答这个问题，如果你愿意，我会删除我的答案。

标签： three.js shader

【解决方案1】：

问题（正如@WestLangley 所说）是

mesh.flipSided = true; ==> mesh.material.side = THREE.BackSide;

【讨论】：