Javascript Shadertoy在THREE.js中

我目前正在尝试使用THREE.js:将此着色器转换到画布上。这是我正在使用的函数，它适用于更简单的着色器。我想我可能需要把花车留作制服，但我有点迷路了。有没有人做过类似的事情，并且知道问题出在哪里？我一直在使用这个指南：

const canvas=document.querySelector（'#background'）；
const renderer=new THREE.WebGLRenderer（{canvas}）；
renderer.autoClearColor=false；
const camera=新的三点正交摄影机(
-1，//左
1//对
1，//顶部
-1，//底部
-1、//附近，
1，//远
);
const scene=new THREE.scene（）；
常量平面=新的三个平面几何体（2，2）；
常量碎片着色器=`
#包括
均匀vec3溶液；
均匀浮动时间；
浮动时间；
浮动噪声（vec2 p）
{
返回sin（p.x*10.）*sin（p.y*（3.+sin（ltime/11.））+2；
}
mat2旋转（浮动角度）
{
返回mat2（cos（角度），-sin（角度），sin（角度），cos（角度））；
}
浮动fbm（vec2 p）
{
p*=1.1；
浮点数f=0。；
浮动放大器=.5；
对于（int i=0；i<3；i++）{
mat2修改=旋转（ltime/50.*浮动（i*i））；
f+=安培*噪声（p）；
p=修改*p；
p*=2。；
amp/=2.2；
}
返回f；
}
浮动模式（vec2 p，out vec2 q，out vec2 r）{
q=vec2（fbm（p+vec2（1）），
fbm（旋转（.1*ltime）*p+vec2（3.）；
r=vec2（fbm（旋转（.2）*q+vec2（0.）），
fbm（q+vec2（0%）；
返回fbm（p+1.*r）；
}
vec3 hsv2rgb（vec3 c）
{
vec4k=vec4（1.0,2.0/3.0,1.0/3.0,3.0）；
vec3 p=abs（分形（c.xxx+K.xyz）*6.0-K.www）；
返回c.z*mix（K.xxx，夹具（p-K.xxx，0.0，1.0），c.y）；
}
无效主图像（输出vec4 fragColor，输入vec2 fragCoord）{
vec2 p=fragCoord.xy/iResolution.xy；
ltime=iTime；
浮点数ctime=iTime+fbm（p/8.）*40。；
浮动时间=分形（ctime/6.）；
ltime=地板（ctime/6.）+（1.-cos（ftime*3.1415）/2.）；
ltime=ltime*6。；
vec2q；
vec2r；
浮点数f=模式（p，q，r）；
vec3 col=hsv2rgb（vec3（q.x/10.+ltime/100.+4，abs（r.y）*3.+1，r.x+f））；
浮动vig=1.-pow（4.*（p.x-.5）*（p.x-.5），10.）；
vig*=1.-pow（4.*（p.y-.5）*（p.y-.5），10.）；
fragColor=vec4（col*vig，1.）；
}
void main（）{
主图像（gl_FragColor，gl_FragCoord.xy）；
}
`;
警察制服={
iTime:{value:0}，
iResolution:{value:new THREE.Vector3（）}，
};
const material=新的3.ShaderMaterial({
碎片着色器，
制服，
});
添加（新的三个网格（平面、材质））；
函数resizeRenderToDisplaySize（渲染器）{
const canvas=renderer.domeElement；
const width=canvas.clientWidth；
常数高度=canvas.clientHeight；
const needResize=canvas.width！==width | | canvas.height！==height；
如果（需要调整大小）{
设置大小（宽度、高度、假）；
}
返回需要调整大小；
}
函数渲染（时间）{
时间*=0.001；//转换为秒
ResizeRenderToDisplaySize（渲染器）；
const canvas=renderer.domeElement；
uniforms.iResolution.value.set（canvas.width，canvas.heigth，1）；
uniforms.iTime.value=时间；
渲染器。渲染（场景、摄影机）；
请求动画帧（渲染）；
}
请求动画帧（渲染）；
}
main（）```

统一的

解决方案设置不正确。这是一个简单的打字错误<代码>画布.高度

而不是

画布.高度

：

uniforms.iResolution.value.set（canvas.width，canvas.heigth，1）

uniforms.iResolution.value.set（canvas.width，canvas.height，1）；


const fragmentShader=`
#包括
均匀vec3溶液；
均匀浮动时间；
浮动时间；
浮动噪声（vec2 p）
{
返回sin（p.x*10.）*sin（p.y*（3.+sin（ltime/11.））+2；
}
mat2旋转（浮动角度）
{
返回mat2（cos（角度），-sin（角度），sin（角度），cos（角度））；
}
浮动fbm（vec2 p）
{
p*=1.1；
浮点数f=0。；
浮动放大器=.5；
对于（int i=0；i<3；i++）{
mat2修改=旋转（iTime/50.*浮动（i*i））；
f+=安培*噪声（p）；
p=修改*p；
p*=2。；
amp/=2.2；
}
返回f；
}
浮动模式（vec2 p，out vec2 q，out vec2 r）{
q=vec2（fbm（p+vec2（1）），
fbm（旋转（.1*iTime）*p+vec2（3.）；
r=vec2（fbm（旋转（.2）*q+vec2（0.）），
fbm（q+vec2（0%）；
返回fbm（p+1.*r）；
}
vec3 hsv2rgb（vec3 c）
{
vec4k=vec4（1.0,2.0/3.0,1.0/3.0,3.0）；
vec3 p=abs（分形（c.xxx+K.xyz）*6.0-K.www）；
返回c.z*mix（K.xxx，夹具（p-K.xxx，0.0，1.0），c.y）；
}
无效主图像（输出vec4 fragColor，输入vec2 fragCoord）{
vec2 p=fragCoord.xy/iResolution.xy；
ltime=iTime；
浮点数ctime=iTime+fbm（p/8.）*40。；
浮动时间=分形（ctime/6.）；
ltime=地板（ctime/6.）+（1.-cos（ftime*3.1415）/2.）；
ltime=ltime*6。；
vec2q；
vec2r；
浮点数f=模式（p，q，r）；
vec3 col=hsv2rgb（vec3（q.x/10.+ltime/100.+4，abs（r.y）*3.+1，r.x+f））；
浮动vig=1.-pow（4.*（p.x-.5）*（p.x-.5），10.）；
vig*=1.-pow（4.*（p.y-.5）*（p.y-.5），10.）；
fragColor=vec4（col*vig，1.）；
}
void main（）{
主图像（gl_FragColor，gl_FragCoord.xy）；
}
`;
函数main（）{
const canvas=document.querySelector（“#后台”）；
const renderer=new THREE.WebGLRenderer（{canvas}）；
renderer.autoClearColor=false；
let camera=新的三点正交摄影机(
-1，//左
1//对
1，//顶部
-1，//底部
-1、//附近，
1，//远
);
摄像机位置z=1；
const scene=new THREE.scene（）；
常量平面=新的三个平面几何体（2，2）；
警察制服={
iTime:{value:0}，
iResolution:{value:new THREE.Vector3（）}，
};
const material=新的3.ShaderMaterial({
碎片着色器，
制服，
});
添加（新的三个网格（平面、材质））；
函数resizeRenderToDisplaySize（渲染器）{
const canvas=renderer.domeElement；
const width=canvas.clientWidth；
常数
  const canvas = document.querySelector('#background');
  const renderer = new THREE.WebGLRenderer({canvas});
  renderer.autoClearColor = false;

  const camera = new THREE.OrthographicCamera(
    -1, // left
     1, // right
     1, // top
    -1, // bottom
    -1, // near,
     1, // far
  );
  const scene = new THREE.Scene();
  const plane = new THREE.PlaneBufferGeometry(2, 2);

  const fragmentShader = `
    #include <common>

    uniform vec3 iResolution;
    uniform float iTime;


float ltime;

float noise(vec2 p)
{
  return sin(p.x*10.) * sin(p.y*(3. + sin(ltime/11.))) + .2; 
}

mat2 rotate(float angle)
{
  return mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
}


float fbm(vec2 p)
{
  p *= 1.1;
  float f = 0.;
  float amp = .5;
  for( int i = 0; i < 3; i++) {
    mat2 modify = rotate(ltime/50. * float(i*i));
    f += amp*noise(p);
    p = modify * p;
    p *= 2.;
    amp /= 2.2;
  }
  return f;
}

float pattern(vec2 p, out vec2 q, out vec2 r) {
  q = vec2( fbm(p + vec2(1.)),
        fbm(rotate(.1*ltime)*p + vec2(3.)));
  r = vec2( fbm(rotate(.2)*q + vec2(0.)),
        fbm(q + vec2(0.)));
  return fbm(p + 1.*r);

}

vec3 hsv2rgb(vec3 c)
{
    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
  vec2 p = fragCoord.xy / iResolution.xy;
  ltime = iTime;
  float ctime = iTime + fbm(p/8.)*40.;
  float ftime = fract(ctime/6.);
  ltime = floor(ctime/6.) + (1.-cos(ftime*3.1415)/2.);
  ltime = ltime*6.;
  vec2 q;
  vec2 r;
  float f = pattern(p, q, r);
  vec3 col = hsv2rgb(vec3(q.x/10. + ltime/100. + .4, abs(r.y)*3. + .1, r.x + f));
  float vig = 1. - pow(4.*(p.x - .5)*(p.x - .5), 10.);
  vig *= 1. - pow(4.*(p.y - .5)*(p.y - .5), 10.);
  fragColor = vec4(col*vig,1.);
}


    void main() {
      mainImage(gl_FragColor, gl_FragCoord.xy);
      }
    `;

    const uniforms = {
      iTime: { value: 0 },
      iResolution:  { value: new THREE.Vector3() },
    };

  const material = new THREE.ShaderMaterial({
      fragmentShader,
      uniforms,
  });
  scene.add(new THREE.Mesh(plane, material));

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  function render(time) {

    time *= 0.001; //convert to seconds

    resizeRendererToDisplaySize(renderer);

    const canvas = renderer.domElement;
    uniforms.iResolution.value.set(canvas.width, canvas.heigth, 1);
    uniforms.iTime.value = time;

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

main();```