是否可以消除three.js着色器中引号和逗号的麻烦？

例如，在Flash（Actionscript）中，我可以通过使用CDATA消除每行着色器代码（AGAL）的双引号和加号，只需对代码进行左对齐，如下所示：

// VERTEX SHADER CODE
var vertexShader:String = <![CDATA[
// varying registers: v1, v2, v3
// temp reg: vt0

m44 vt0, va0, vc0                       // transform vertices in world space with model matrix --> vt0  
sub v3, vc16, vt0                       // interpolate direction to light --> v3

m44 op, vt0, vc8                        // append the tranformed vertices to view-projection matrix in order to transform to clip space and output position
m44 v1, va1, vc4                        // transform normals with transposed & inverted modelmatrix and interpolate --> v1
mov v2, va2                             // interpolate uvs --> v2

]]>;

//顶点着色器代码
var vertexShader:String=vt0
sub v3，vc16，vt0//将方向插值到灯光-->v3
m44 op、vt0、vc8//将变换后的顶点附加到视图投影矩阵，以便变换到剪辑空间和输出位置
m44 v1、va1、vc4//使用转置和反转的modelmatrix变换法线并插值-->v1
mov v2，va2//插值UV-->v2
]]>;

在three.js（Javascript）中，是否可以以类似的方式去掉每行的两个引号和逗号

var fspass1 = [ 
"varying vec2 vUv;",
"uniform float time;",

"void main() {",

"float r = vUv.x;",
"if( vUv.y < 0.5 ) r = 0.0;",
"float g = vUv.y;",
"if( vUv.x < 0.5 ) g = 0.0;",

"gl_FragColor = vec4( r, g, time, 1.0 );",

"}"
].join("\n")

var fspass1=[
“可变vec2 vUv；”，
“统一浮动时间；”，
“void main（）{”，
“浮点r=vUv.x；”，
“如果（vUv.y<0.5）r=0.0；”，
“float g=vUv.y；”，
“如果（vUv.x<0.5）g=0.0；”，
“gl_FragColor=vec4（r，g，time，1.0）；”，
"}"
].join（“\n”）

我尝试了以下方法，但无效：

var fspass1 = "<![CDATA[

varying vec2 vUv;
uniform float time;

void main() {

float r = vUv.x;
if( vUv.y < 0.5 ) r = 0.0;
float g = vUv.y;
if( vUv.x < 0.5 ) g = 0.0;

gl_FragColor = vec4( r, g, time, 1.0 );

}
]]>";

var fspass1=“”；

---

我做错什么了吗？有解决办法吗？如今，为了让框架理解，在每行代码中仍然必须使用愚蠢的双引号、逗号等，这真的是令人分心、费时的反用户友好和尴尬。它应该比这更聪明，程序应该让我们的生活更轻松，而不是更困难

JS文件中缺少示例，而不是HTML文件中的内部脚本标记，加上背勾与单引号的相似性，这是造成我困惑的原因，我打赌更多的人仍然使用引号和逗号或加号，包括许多three.JS示例

因此，解决方案建议使用“模板文字”，即简单地用backticks将整个多行着色器代码括起来，如下所示！这是一个重大的效率提升，一个救命稻草

下面的代码可以工作，每行中没有引号，也没有逗号

var fspass1 =
    `varying vec2 vUv;

    uniform float time;

    void main() {

        float r = vUv.x;

        if( vUv.y < 0.5 ) r = 0.0;
        float g = vUv.y;

        if( vUv.x < 0.5 ) g = 0.0;
        gl_FragColor = vec4( r, g, time, 1.0 );

    }`;

var fspass1=
`可变vec2 vUv；
均匀浮动时间；
void main（）{
浮动r=vUv.x；
如果（vUv.y<0.5）r=0.0；
浮动g=vUv.y；
如果（vUv.x<0.5）g=0.0；
gl_FragColor=vec4（r，g，time，1.0）；
}`;

---

24年来，我从未使用过“backtick”，所以要输入它，只需点击“1”数字左侧的按钮

这将是太多的麻烦，也会导致可靠性降低，只能访问应该驻留在那里的代码，在那里它是最有效的。请参阅如何使用多行字符串构成变量。仅供参考，（囚犯评论中用于构造多行字符串的内容）.那篇模板文本文章没有提到这些方法只能在带有脚本标记的HTML文件中使用-囚犯的建议也是如此。除非您可以演示如何在JS文件中使用它们，并将多行着色器代码指定给有效的字符串变量。