Javascript 从Shadertoy导出到Three.js

我正在进行编码的第一步。我在互联网上做了一些课程，然后玩了一些three.js实验，现在我想继续学习使用着色器进行实验

我找到了Shadertoy.com，真是太棒了！有很多不同的实验，效果令人难以置信。我试图在Three.js中使用这些着色器中的一个，但这并不容易

着色器已经编写好了，这是真的。但我不知道该怎么做，我不知道我该如何使用它

因为它不仅仅是复制和粘贴代码。有一个关系，我必须写，可以应用这些惊人的效果到一个3.js的几何体。我必须使用制服，我不知道我如何才能知道我可以使用哪种制服，我如何使用它们

我开始在Shadertoy上看到教程，在互联网上看到一些文章，看起来很抽象。我认为在开始理解那门语言之前，我应该学习很多数学

你有什么建议要开始吗

---

也许是比我想象的更简单的东西，我可以在我的HTML文档上复制、粘贴和实验代码？

Shadertoy是一个相对复杂的程序。它将音频输入着色器，视频输入着色器，从着色器生成音频数据，各种纹理，包括2d和立方体贴图。支持所有这些特性不是一件小事

也就是说，可以很容易地使用基本着色器，请参见下面的示例。但是shadertoy着色器在three.js中并不是真正设计为用作网格上的材质

如果您想了解WebGL工作的原因和方式，请参见

const vs=`
属性向量4位置；
void main（）{
gl_位置=位置；
}
`;
常量userShader=`
//发件人：https://www.shadertoy.com/view/4sdXDl
//尖刺的
#定义形状长度（z.yz）
//正常的
//#定义形状长度（z.xyz）
//比扎罗
//#定义形状长度（z.yz-z.xx）
//等等。。。
#定义高质量
#ifdef高质量
#定义MARCH_步骤199
#否则
#定义MARCH_步骤99
#恩迪夫
浮动k=7.0+3.0*sin（iGlobalTime*0.15）；
vec3 mcol=vec3（0.0）；
void AbsBox（inout vec4 z）{//abs box by kali
z、 xyz=abs（z.xyz+1.0）-1.0；
z*=1.5/钳位（点（z.xyz，z.xyz），0.25,1.0）；
}
空心球（inout vec4 z，INVEC4 c）{//twinbee制作的空心球
浮动r=长度（z.xyz）；
浮点数zo=asin（z.z/r）*k+iGlobalTime*0.15；
浮点数zi=atan（z.y，z.x）*7.0；
z=pow（r，k-1.0）*vec4（r*vec3（cos（zo）*vec2（cos（zi），sin（zi）），sin（zo）），z.w*k）+c；
}
浮动DE（vec3 p）{
vec4c=vec4（p，1.0），z=c；
灯泡（z，c）；
浮点数r0=（长度（z.xyz）-1.15）/z.w；
z、 xyz-=1.0；
对于（int i=0；iI已使一些shadertoy着色器在three.js中工作。特别是。看看这可能会对您有所帮助这是一个令人兴奋的答案+分形。谢谢：）感谢@gman给出的好答案。我想这会引导我走上正确的道路，但我还没有走到这一步。我想用一个更简单的方法，而不是使用三个。我只想运行shadertoy。据我所知，我应该能够将制服、顶点和碎片着色器传递到程序中。当我这样做时，我会得到错误：
this.uniformLocations未定义。这是因为碎片着色器中定义的制服并非都已定义？为什么不在上面定义它们（例如，
iDate
，
iMouse
等）到目前为止，我得到了哦，你从哪里得到的
shaderToy样板文件
？是你写的还是在shaderToy的某个地方可以找到？如果你想使用shaderToy和three.js，你可以试试