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

Question

例如，在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

]]>;

在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 = "<![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 );

}
]]>";

难道我做错了什么？有解决方案吗？它现在真的令人分心，耗费时间，反用户友好和令人尴尬，仍然必须使用愚蠢的双引号，逗号等每行代码，以便...被框架理解。它应该比这更聪明，程序应该让我们的生活更轻松，而不是更难！

Answer 1

JS文件中缺少示例，而不是HTML文件中的Script标签内部以及带有单引号的反引号的相似性，这是我混淆的原因，我打赌更多仍然使用引号和逗号或加号的人，包括许多人three.js的例子。

所以，解决方案是建议使用“模板文字”，也就是说，简单地将整个多行着色器代码用反引号括起来！这是一项重大的提高效率，节省生命！ :)

以下代码有效，每行没有引号，也没有逗号！

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 );

    }`;

在24年中，我从未使用过“反引号”，所以为了输入它，只需点击“1”号左边的按钮即可。