Javascript 将Shadertoy转换为我自己的本地Three.js沙盒

在这两个问答（，）的帮助下，我正在基于a制作一个本地着色器沙盒。我将Shadertoy转换为使用Three.js作为一个使用Three.js的大型项目的沙箱。然而，虽然没有显示错误，但我没有看到预期的结果。仅显示摄影机辅助对象。我做错了什么？（请参阅下面的可运行代码片段）提前感谢

var SCREEN\u WIDTH=window.innerWidth；
var SCREEN_HEIGHT=window.innerHeight；
var aspect=屏幕宽度/屏幕高度；
var容器；
无功时钟；
摄像机、场景、渲染器、网格；
cameraotho变异；
var-trustumize=600；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
时钟=新的三个时钟（）；
场景=新的三个。场景（）；
cameraOrtho=新的三轴正交摄影机（0.5*平截头体*纵横比/-2，0.5*平截头体*纵横比/2，平截头体/2，平截头体/-21501000）；
cameraOrthoHelper=新的3.CameraHelper（cameraOrtho）；
添加（摄影机辅助对象）；
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；
设置大小（屏幕宽度、屏幕高度）；
container.appendChild（renderer.doElement）；
//renderer.autoClear=false；
var material=新的三个着色器材质（{
制服：{
uTime:{value:0.1}，
uResolution:{value:new THREE.Vector2（屏幕宽度，屏幕高度，1,1）}
},
vertexShader:document.getElementById（'vertshader'）.textContent，
fragmentShader:document.getElementById（'fragshader'）.textContent
} );
网格=新的三个网格（新的三个平面几何图形（屏幕宽度、屏幕高度）、材质）；
网格位置设置（0,0,100）；
场景。添加（网格）；
}
函数animate（）{
请求动画帧（动画）；
更新（）；
render（）；
}
函数更新（）{
mesh.material.uniforms.uTime.value+=clock.getDelta（）；
}
函数render（）{
渲染器。渲染（场景，cameraOrtho）；
}

均匀浮动时间；
均匀vec2溶液；
可变vec2 vUv；
void main（）{
vUv=紫外线；
vec4 mvPosition=modelViewMatrix*vec4（位置，1.0）；
gl_位置=投影矩阵*mvPosition；
}
均匀浮动时间；
均匀vec2溶液；
可变vec2 vUv；
浮动f=0.15，r=0.4，h=0.5；
void main（）{
vec2 uvCustom=-1.0+2.0*vUv；
vec2 ak=绝对值（gl_FragCoord.xy/uvCustom.xy-0.5）；
//vec2 uv=gl_FragCoord.xy/uResolution.y；
//vec2 ak=abs（gl_FragCoord.xy/uResolution.xy-0.5）；
浮点数g=1.0/1.618033988749；
浮动t=uTime*0.7+fract（sin（uvCustom.x+1.0））*2.0；
浮点数e=1.0+sin（UVX*3.0）*2.6；
浮动k=cos（t-e）+2.0；
vec4tmp=vec4（绝对值sin（t+cos（0.5*t+（uvCustom.x+t*0.001）*k））；
浮点数m=sin（uTime*0.37）；
如果（m>.0）{
如果（uvCustom.y>h）{
tmp=vec4（abs（cos（t+sin（0.5*t+（uvCustom.x+t*0.001）*k））；
}
}   
gl_FragColor=tmp*平滑步长（ak.x，ak.x+f，r）*平滑步长（ak.y，ak.y+f，r）；
如果（m<0.0）{
如果（uvCustom.x>1.0）gl_FragColor=1.0-gl_FragColor；
}
}

您应该在不使用花式着色器的情况下进行尝试。将片段着色器更改为“仅”

void main() {
   gl_FragColor = vec4(1,0,0,1);
}

您将看到您根本没有绘制平面几何图形。这是第一个问题

将

THREE.Orthographic Camera

更改为just

THREE.Camera

，然后只制作

THREE.PlaneGeometry

大小

2,2

，您将看到红色

现在，把你的片段着色器放回去不起作用，但是像这样一个简单的片段着色器

    uniform float uTime;
    uniform vec2 uResolution;
    varying vec2 vUv;

    void main() {
        vec2 uv = gl_FragCoord.xy / uResolution;
        gl_FragColor = vec4(uv, 0, 1);
    }

---

是的。我不打算调试你的片段着色器，因为我不知道它应该做什么，但是一步一个脚印，就像你应该帮助你弄清楚一样。你应该在没有花哨着色器的情况下尝试它。将片段着色器更改为“仅”

void main() {
   gl_FragColor = vec4(1,0,0,1);
}

您将看到您根本没有绘制平面几何图形。这是第一个问题

将

THREE.Orthographic Camera

更改为just

THREE.Camera

，然后只制作

THREE.PlaneGeometry

大小

2,2

，您将看到红色

现在，把你的片段着色器放回去不起作用，但是像这样一个简单的片段着色器

    uniform float uTime;
    uniform vec2 uResolution;
    varying vec2 vUv;

    void main() {
        vec2 uv = gl_FragCoord.xy / uResolution;
        gl_FragColor = vec4(uv, 0, 1);
    }

是的。我不打算调试你的片段着色器，因为我不知道它应该做什么，但一步一步地做，就像应该帮助你解决它一样

是的，[脸红]我同时尝试了类似的方法，并意识到我的问题比我想象的更基本。有人提醒我在建造城堡之前先建造盒子，这对我很好！谢谢。：）是的，[脸红]与此同时，我尝试了类似的方法，并意识到我的问题比我想象的更基本。有人提醒我在建造城堡之前先建造盒子，这对我很好！谢谢。：）