使用着色器升级 Threejs 的问题

问题描述

我正在研究 3d 数据可视化.我需要展示一个包含数据的世界，并使用 chrome 实验 (chromeexperiments.com/globe) 作为指导.

I am working on a 3d dataviz. I need to show a world with data on it and I using the chrome experiments (chromeexperiments.com/globe) as a guide.

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

The issue is that this visualizations are made with Threejs r40 and it is hard to find docs about it so I tried to upgrade to r71.

我解决了渲染世界的兼容性问题，但无法让它显示气氛，事实上，当我尝试显示气氛时，什么也没有显示(就像气氛被渲染成黑色并隐藏了世界).

I solved the compatibility issues rendering the world but cant make it show the atmosphere, in fact, when I try to show the atmosphere nothing is shown (is like the atmosphere is rendered black and it hides the world).

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

I think that the problem is the shader but I am not really sure.

有人知道吗?

这是我使用的代码:

gist.github.com/glena/0b2875044cd6c39ff150

gist.github.com/glena/0b2875044cd6c39ff150

谢谢

==========

更新:

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

if I remove the fragentShader, this is rendered as a red sphere but stills covers the world with a black background:

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

          uniforms: uniforms,
          vertexShader: shader.vertexShader

        })
      );

推荐答案

问题(如@WestLangley 所说)是

The issue (as said by @WestLangley) was

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

这篇关于使用着色器升级 Threejs 的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！