在angular nx项目中导入glsl文件

Question

我试图在组件中导入一个glsl文件(不需要使用require()的模块)，但似乎不起作用。

我的第一个尝试是创建一个带有模块声明的glsl.d.ts文件，如下所示：

declare module '*.glsl' {
  const value: string
  export default value
}

这解决了警告，但似乎需要一个专用的加载器。

我的第二次尝试是使用custom-webpack和glslify loader，配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(glsl|frag|vert|png|svg|jpg|gif|obj)$/,
        use: [
            'file-loader'
        ]
      }
    ]
  }
};

但还是不管用。

有人能帮我吗？

Here the stackbliz example

Answer 1

它不能解析的原因是它不能确定对象的类型，所以我们有必要提到对象的类型，所以如果我们提到这样的东西，我们的问题就解决了。

const material_surafce = new THREE.ShaderMaterial({vertexShader: shaderContends})

我们也可以通过"THREE.FileLoader().load",直接使用文件加载器，这也可以帮助我们解决这个问题。

还有另一种方法，着色器文件是一个字符串，所以我们可以做的是，我们可以通过socket.io获取文件的争用内容，并将其发送到客户端以加载onLoad。我以前从来没有这样做过。