如何设置webgl plane的移动响应能力？

问题描述

我正在尝试设置一组飞机的样式，以便在保持居中状态的同时进行移动裁剪。我没有太多经验，只是尝试反复试验。我可以增加高度，但是图像会向内压缩。我尝试使用object-fit：cover，似乎没有做任何事情。我不确定脚本是否与它有任何关系，所以我也将其包括在内。 任何帮助将不胜感激，谢谢。

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;


        vec3 hueRotate(vec3 col,float hue) {
            vec3 k = vec3(0.57735,0.57735,0.57735);
            float cosAngle = cos(hue);
            return col * cosAngle + cross(k,col) * sin(hue) + k * dot(k,col) * (1.0 - cosAngle);
        }

        vec3 saturate(vec3 rgb,float adjustment) {
            vec3 W = vec3(0.2125,0.7154,0.0721);
            vec3 intensity = vec3(dot(rgb,W));
            return mix(intensity,rgb,adjustment);
        }


        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 * 12.0 + ((uTime * (PI / 15.0)) * 0.031))
                        + sin(textureCoord.y * 12.0 + ((uTime * (PI / 12.489)) * 0.047))
                        ) * 0.0050;

                    textureCoord.y += (
                        sin(textureCoord.y * 8.0 + ((uTime * (PI / 12.023)) * 0.023))
                        + sin(textureCoord.x * 8.0 + ((uTime * (PI / 15.1254)) * 0.067))
                        ) * 0.0100;

            vec4 color = texture2D(planeTexture,textureCoord);

            // hue rotation from 0 to PI in 10 seconds
            float hueRotation = cos(uTime / 600.0) * PI;
            color.rgb = hueRotate(color.rgb,hueRotation);

            // saturate
            color.rgb = saturate(color.rgb,2.0);

            gl_FragColor = color;
        }
    `;

  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);
    }
  }
});

#planes-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  object-fit: cover;
}

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


/*** 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;
  object-fit: cover;
}


/*** set the width of our planes ***/

#portrait {
  width: 25vw;
}

#landscape {
  width: 100vw;
  object-fit: cover;
}

<div id="planes-canvas"></div>
<div id="landscape" class="planes">
  <img src="https://cdn.shopify.com/BANNER-1.jpg" width="100%" height="100%" data-sampler="planeTexture" crossorigin="">
</div>
<script src="https://cdn.jsdelivr.net/npm/curtainsjs@6.2.2/libs/curtains.min.js"></script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）