Как вызвать несколько самолетов в javascript? - PullRequest
Новая
       69

Как вызвать несколько самолетов в javascript?

1 голос
/ 01 августа 2020

Я безуспешно пытался исправить проблему с моим сайтом на прошлой неделе. Я использую Curtains. js, и я просто хочу отобразить несколько плоскостей на главной странице. У меня это работает, но каждая плоскость после первой смены поднимается, перекрывается или перекрывается. Я тестировал код на других темах shopify, и только первая плоскость также отображается правильно. Любая помощь будет принята с благодарностью. 

<script>
    window.addEventListener("load", function () {
  var curtains = new Curtains({
    container: "planes-canvas"
  });

  var planeEls = document.getElementsByClassName("planes");

  var vs = `#ifdef GL_ES
  precision mediump float;
  #endif

  // default mandatory attributes
  attribute vec3 aVertexPosition;
  attribute vec2 aTextureCoord;

  // those projection and model view matrices are generated by the library
  // it will position and size our plane based on its HTML element CSS values
  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;

  // texture coord varying that will be passed to our fragment shader
  varying vec2 vTextureCoord;

  void main() {
    // apply our vertex position based on the projection and model view matrices
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);

    // varying
    // use texture matrix and original texture coords to generate accurate texture coords
    vTextureCoord = aTextureCoord;
  }`;

  var fs = `
    #ifdef GL_ES
    precision mediump float;
    #endif

    // get our varyings
    varying vec3 vVertexPosition;
    varying vec2 vTextureCoord;

    // the uniform we declared inside our javascript
    uniform float uTime;

    // our texture sampler (default name, to use a different name please refer to the documentation)
    uniform sampler2D planeTexture;

    void main() {
    // get our texture coords
    vec2 textureCoord = vTextureCoord;

    // displace our pixels along both axis based on our time uniform and texture UVs
    // this will create a kind of water surface effect
    // try to comment a line or change the constants to see how it changes the effect
    // reminder : textures coords are ranging from 0.0 to 1.0 on both axis
    const float PI = 3.141592;

    textureCoord.x += (
                    sin(textureCoord.x * 10.0 + ((uTime * (PI / 10.0)) * 0.031))
                    + sin(textureCoord.y * 10.0 + ((uTime * (PI / 10.489)) * 0.047))
                    ) * 0.0075;

                textureCoord.y += (
                    sin(textureCoord.y * 15.0 + ((uTime * (PI / 10.023)) * 0.023))
                    + sin(textureCoord.x * 15.0 + ((uTime * (PI / 10.1254)) * 0.067))
                    ) * 0.0125;

    gl_FragColor = texture2D(planeTexture, textureCoord);
    }
  `;

  var planes = [];

  function handlePlane(index) {
    var plane = planes[index];

    plane
      .onReady(function () {
        // our texture has been loaded, resize our plane!
        plane.planeResize();
      })
      .onRender(function () {
        plane.uniforms.time.value++;
      });
  }

  for (var i = 0; i < planeEls.length; i++) {
    var params = {
      vertexShader: vs,
      fragmentShader: fs,
      uniforms: {
        time: {
          name: "uTime",
          type: "1f",
          value: 0
        }
      }
    };

    var plane = curtains.addPlane(planeEls[i], params);

    if (plane) {
      planes.push(plane);

      handlePlane(i);
    }
  }
});

  </script>
#planes-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
}

.planes {
  background-color: #000;
  margin: 0 auto;
}

/*** the images will define the height of our planes ***/
.planes img {
  display: block;
  width: 100%;
  height: auto;
  /* hide the original image */
  opacity: 0;
  background-color: #000;
}
...