在 Angular nx 项目中导入 glsl 文件答案

【问题标题】：Import glsl file in angular nx project在 Angular nx 项目中导入 glsl 文件
【发布时间】：2020-03-07 22:53:37
【问题描述】：

我正在尝试在组件中导入一个 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

【问题讨论】：

标签： angular typescript webpack glsl shader

【解决方案1】：

它不能解决的原因是它不能确定对象的类型，所以我们必须提到对象的类型，所以如果我们提到这样的事情就可以解决我们的问题。

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

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

着色器文件还有一种方法是字符串，所以我们可以做的是我们可以通过socket.io获取文件的竞争并发送给客户端以在onLoad中加载它。我以前从未这样做过。

【讨论】：