具有threejs材质的着色器在帧中不工作

我试图通过自定义着色器为组件内创建的实体添加波,但添加着色器后场景立即消失。如果移除着色器,实体将显示为静态实体。

这是一个密码笔: codepen

    <script>
  AFRAME.registerComponent('waves', {
  init: function() {
    var texture = new THREE.TextureLoader().load( "https://cinemont.com/tutorials/zelda/water.png" );
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set(5, 5);
  this.geometry = new THREE.PlaneBufferGeometry( 4000, 2000, 128, 64 ); 
  this.material = new THREE.MeshPhongMaterial({
   map:texture,
   color: 0xffffff,
   opacity: 1,
   blending: THREE.NoBlending,
   side: THREE.DoubleSide,
   transparent: false,
   depthTest: false,
   wireframe: false 
  });
    var plane = new THREE.Mesh(this.geometry, this.material);
    plane.position.set(0, -400, -300);
    plane.rotation.set(Math.PI / 2, 0, 0);
    var el = this.el;
    el.setObject3D('mesh', plane);
  }
});
</script>
<script>
AFRAME.registerShader('makewaves', {
  schema: {
    color: {type: 'color', is: 'uniform', default: '#0051da'},
    timeMsec: {type: 'time', is: 'uniform'}
  },

  vertexShader: `
#define SCALE 10.0

varying vec2 vUv;

uniform float timeMsec;  

float calculateSurface(float x, float z) {
    float uTime = timeMsec / 1000.0;
    float y = 0.0;
    y += (sin(x * 1.0 / SCALE + uTime * 1.0) + sin(x * 2.3 / SCALE + uTime * 1.5) + sin(x * 3.3 / SCALE + uTime * 0.4)) / 3.0;
    y += (sin(z * 0.2 / SCALE + uTime * 1.8) + sin(z * 1.8 / SCALE + uTime * 1.8) + sin(z * 2.8 / SCALE + uTime * 0.8)) / 3.0;
    return y;
}

void main() {
    float uTime = timeMsec / 1000.0;
    vUv = uv;
    vec3 pos = position;    
    float strength = 1.0;
    pos.y += strength * calculateSurface(pos.x, pos.z);
    pos.y -= strength * calculateSurface(0.0, 0.0);
    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}  
`,
  fragmentShader: `
varying vec2 vUv;

uniform sampler2D uMap;

uniform vec3 color;

uniform float timeMsec; 

void main() {
    float uTime = timeMsec / 1000.0;     
    vec2 uv = vUv * 10.0 + vec2(uTime * -0.05);

    uv.y += 0.01 * (sin(uv.x * 3.5 + uTime * 0.35) + sin(uv.x * 4.8 + uTime * 1.05) + sin(uv.x * 7.3 + uTime * 0.45)) / 3.0;
    uv.x += 0.12 * (sin(uv.y * 4.0 + uTime * 0.5) + sin(uv.y * 6.8 + uTime * 0.75) + sin(uv.y * 11.3 + uTime * 0.2)) / 3.0;
    uv.y += 0.12 * (sin(uv.x * 4.2 + uTime * 0.64) + sin(uv.x * 6.3 + uTime * 1.65) + sin(uv.x * 8.2 + uTime * 0.45)) / 3.0;

    vec4 tex1 = texture2D(uMap, uv * 1.0);
    vec4 tex2 = texture2D(uMap, uv * 1.0 + vec2(0.2));

    vec3 blue = color;

    gl_FragColor = vec4(blue + vec3(tex1.a * 0.9 - tex2.a * 0.02), 1.0);

}`
});
</script>
<a-scene>
        <a-camera postion="0 1.2 0"></a-camera>     
  <a-entity material="shader:makewaves;" 
            waves></a-entity>
  <a-entity light="type: directional; color: #ffffff; intensity: 2.8; castShadow:true;" position="0 2 -10"></a-entity>
  <a-light type="point" color="blue" position="0 5 0"></a-light>
    <a-light type="directional" color="blue" intensity="1.8" position="0 5 0"></a-light> 
</a-scene>