使用 jquery 访问 three.js 的着色器文件内容

Posted 2023-02-27

【中文标题】使用 jquery 访问 three.js 的着色器文件内容

【英文标题】：Accessing shader file contents for three.js using jquery

【发布时间】：2014-01-22 03:05:32

【问题描述】：

我需要访问使用 html 从另一个脚本中导入的字符串的文本。

我在 html 文件中包含有问题的文本文件：

<script src="shaders/fragmentshader.fs" id=fragmentshader></script>

然后我想将此文件的内容放在另一个脚本文件中的变量中，并将其用作三个，js 的着色器：

var fShader = $('#fragmentshader');

var shader = new THREE.ShaderMaterial(
    vertexShader: vShader.text(),
    fragmentShader: fShader.text()
);

如果我只是在 html 文件中的脚本标记之间编写必要的着色器代码，则此代码可以正常工作，但如果如上所述使用，则仅访问严格的 url（而不是数据）。

我的问题是如上所示加载文件后如何访问文件中的文本？

【参考方案1】：

您不能在script 标签中使用src 加载着色器。

你可以使用ShaderLoader.js然后写：

<script data-src="shaders/name/vertex.js" data-name="shader" 
type="x-shader/x-vertex"></script>

在js中：

SHADER_LOADER.load(function(data) 
    var particlesVertexShader = data.shader.vertex;
);