Three.js 在ThreeJS中从外部文件加载着色器时出现问题

这在2年前就有人问过，在3JS github等的一些地方也有人问过。但仍然有很多人（包括我）对此有问题。这就是我现在得到的（这是一个更大系统的一部分）：

然后我做这个：

var loader = new dataLoader();
var SkyVertexShader = loadFile( "Shaders/sky.frag", loader );
var SkyFragmentShader = loadFile( "Shaders/sky.vertex", loader );

然后我创建如下材质：

var skyMat = new THREE.ShaderMaterial( { vertexShader: SkyVertexShader.data, fragmentShader: SkyFragmentShader.data, uniforms: uniforms, side: THREE.BackSide } );

sky.frag和sky.vertex中的着色器是没有任何标记或任何内容的纯文本。调试时，我可以看到SkyFragmentShader.data和SkyVertexShader.data都已正确设置。着色器是示例中的着色器。 但当我加载时，我会出现以下错误：

ERROR: 0:37: 'modelMatrix' : undeclared identifier
ERROR: 0:37: 'position' : undeclared identifier 
ERROR: 0:37: 'constructor' : not enough data provided for construction 
ERROR: 0:38: 'assign' : l-value required "vWorldPosition" (can't modify a varying) ERROR: 0:40: 'gl_Position' : undeclared identifier 
ERROR: 0:40: 'projectionMatrix' : undeclared identifier 
ERROR: 0:40: 'modelViewMatrix' : undeclared identifier 
ERROR: 0:40: 'constructor' : not enough data provided for construction 
ERROR: 0:40: 'assign' : cannot convert from '4-component vector of float' to 'float' �

但当我这样做时，它就起作用了（就像示例中所示）：

---

当然，最后一部分仅在HTML中具有着色器时有效。因此，尽管.textContent方法和ajaxget方法之间的内容实际上是相同的（只是一些选项卡和换行符），但它显示了有关未定义变量的语法错误。那么，是什么原因导致了这种情况呢？

如果你指的是这篇文章（已经两年了），那么你并没有完全遵循他们的解决方案。您是否已尝试将“async:false”设置为ajax请求以获得同步请求，因为您可能正在尝试在着色器实际加载之前执行它们。

好的，我找到了答案。我以相反的顺序加载它们，使顶点着色器成为第一个，片段成为第二个。这使得ThreeJS在错误的位置添加了代码，并且出现了错误。遗憾的是，我调试了这么长时间，因为这些错误似乎是一般性的，但它可以通过Firebug获得完整生成的着色器文本，这非常有帮助。

---

但是感谢gaitat，它确实让我更仔细地了解了加载。

这是一个很好的轻型外部着色器加载程序：

这仍然依赖于将其添加到html脚本标记中——有没有一种方法可以在不将文件添加到脚本标记中的情况下使用它？

ERROR: 0:37: 'modelMatrix' : undeclared identifier
ERROR: 0:37: 'position' : undeclared identifier 
ERROR: 0:37: 'constructor' : not enough data provided for construction 
ERROR: 0:38: 'assign' : l-value required "vWorldPosition" (can't modify a varying) ERROR: 0:40: 'gl_Position' : undeclared identifier 
ERROR: 0:40: 'projectionMatrix' : undeclared identifier 
ERROR: 0:40: 'modelViewMatrix' : undeclared identifier 
ERROR: 0:40: 'constructor' : not enough data provided for construction 
ERROR: 0:40: 'assign' : cannot convert from '4-component vector of float' to 'float' �

var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
var vertexShader = document.getElementById( 'vertexShader' ).textContent;
var skyMat = new THREE.ShaderMaterial( { vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: uniforms, side: THREE.BackSide } );