angular - 在 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获取文件的内容并将其发送到客户端来加载它负载。我以前从未这样做过。