aframe分屏转单屏效果

Question

嘿亲爱的reader,

有没有办法在两个或更多平面物体（即三角形、矩形、圆形等）上显示相同的图片/视频？听起来很简单，但我的意思是分屏到单屏效果，例如 this。最简单的方法可能是拆分内容，是吗？那么也许是 javascript 视频编辑器？到目前为止没有发现真正令人满意的东西，但也许我只是在寻找我想要的东西的模糊想象。因此，欢迎提出任何建议。

谢谢和问候奥里斯

Answer 1

嘿，最亲爱的 OP。

如果你不能伪造它（有一个带图像的大平面 + 叠加一个十字），那么我会尝试使用着色器。

将使用图像“顶部”或“底部”的自定义着色器可能如下所示：

<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script>
  // register a custom component
  AFRAME.registerComponent("foo", {
    // we wanna pass a value "top" or "bottom"
    schema: {
      side: {
        value: "top"
      }
    },
    init: function() {

      // vertex shader. we only want it to pass the UV to the frag shader
      const vertexShader = `
        varying vec2 vUv;
        void main() {
            vUv = uv;
            gl_Position = projectionMatrix *
                          modelViewMatrix *
                          vec4(position,1.0);
          }
        `;

      const fragmentShader = `
            uniform bool top;
            uniform sampler2D map; 
            varying vec2 vUv;           
                
            void main() {
                // the top one is 1 - .5
                // the bottom one .5 - 0
                
                vec2 coords = vUv.xy;
                coords.y = coords.y / 2.0; // stretch half of it.
                if (top) {
                    coords.y += 0.5; // if top - apply offset
                }
                                
                vec4 mapTexel = texture2D( map, coords );
                gl_FragColor = mapTexel;
            }
        `
      // wait until the entity is loaded
      this.el.addEventListener("loaded", e => {
        // grab the mesh
        const mesh = this.el.getObject3D("mesh")
        // load the texture
        const texture = new THREE.TextureLoader().load('https://i.imgur.com/wjobVTN.jpeg');
        // create a new shadermaterial with the defined shaders
        const newMaterial = new THREE.ShaderMaterial({
          uniforms: {
            top: {
              type: "b",
              value: this.data.side === "top" ? true : false
            },
            map: {
              type: "t",
              value: texture
            }
          },
          vertexShader: vertexShader,
          fragmentShader: fragmentShader,
          transparent: true
        });

        // apply the new material - get rid of the old one
        const oldMaterial = mesh.material;
        mesh.material = newMaterial
        mesh.material.needsUpdate = true;

        oldMaterial.dispose();
      })
    }
  })
</script>
<a-scene>

  <a-plane width="2" position="0 2.25 -3" foo="side: top"></a-plane>
  <a-plane width="2" position="0 1 -3" foo="side: bottom"></a-plane>

  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
</a-scene>

aframe分屏转单屏效果

aframe splitscreen to single screen effect

javascript

aframe