javascript - 即使文件已正确加载，在 jquery 中加载自定义文件也会返回错误

Question

我有以下代码来加载 .glsl 文件

$.getScript("path/to/file/vertexShader.glsl", function( vertexShader ) {
    console.log(vertexShader);
});

vertexShader.glsl的内容是:

#version 300 es

precision highp float;  
precision highp int;

out vec3 world_coords;
void main()
{
    world_coords = position + vec3(0.5);
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

尽管一切似乎都正常工作，但我检索到以下错误:

VM598:1 Uncaught SyntaxError: Invalid or unexpected token
at m (jquery.min.js:2)
at Function.globalEval (jquery.min.js:2)
at text script (jquery.min.js:2)
at Ut (jquery.min.js:2)
at k (jquery.min.js:2)
at XMLHttpRequest.<anonymous> (jquery.min.js:2)   

代码工作正常，但我仍然收到错误。有什么想法可以摆脱它们吗？

Answer 1

$.getScript 加载 JavaScript 脚本。与内部脚本(内容位于 HTML 内部的脚本)不同，您不能使用外部脚本加载 JavaScript 以外的任何内容。

要以现代简单的方式加载文本文件，请使用 fetch 和 async/await

async function main() {
  const vertexShader = await fetch("path/to/file/vertexShader.glsl").then(req => req.text());
  ...
}
main();

或者当然把它变成一个函数

async function main() {
  const vertexShader = await loadText("path/to/file/vertexShader.glsl");
  ...
}

function loadText(url) {
  return fetch("path/to/file/vertexShader.glsl").then(req => req.text());
}

main();

或者没有异步/等待

fetch("path/to/file/vertexShader.glsl")
  .then(req => req.text())
  .then(function( vertexShader ) {
    console.log(vertexShader);
  });

或者如果您希望它看起来类似于 getScript

getTextFile("path/to/file/vertexShader.glsl", function( vertexShader ) {
  console.log(vertexShader);
});

function getTextFile(url, callback) {
  fetch("path/to/file/vertexShader.glsl")
    .then(req => req.text())
    .then(callback);
}

也就是说，如果是我并且我希望我的着色器是外部的，我会使用导入/导出，如

// myvertexshader.glsl
default export `
  attribute vec4 position
  void main() {
    gl_Position = position;
  }
`;

然后您可以将其导入到另一个 JavaScript 模块中，如下所示

// main.js
import vertexShader from './myvertexshader.glsl';
...

main.js 需要作为模块包含

<script src="main.js" type="module"></script>

import 仅适用于现代浏览器(例如运行 WebGL2 的浏览器)，但您可以使用类似 rollup 的内容。将其转换回旧式单文件 JavaScript 文件。

这样做的优点是，在开发过程中，所有文件都是独立的，但对于生产/部署，您可以将 JavaScript 构建到一个大文件中，该文件的加载速度比许多小文件快得多

three.js does this如果您想查看示例