javascript - 调整 A 框架中的屏幕截图大小

Question

我有一个带有 A 框架的场景，我正在使用方法 getCanvas 来获取屏幕截图并将其发送到 PHP。有没有办法调整 getCanvas 图像大小？因为默认的是 4096x2048，我需要它更小。如果我更改源代码中的默认尺寸，它会因拉伸(stretch)而严重调整大小。

Answer 1

屏幕截图组件的架构允许您设置所需的宽度和高度，因此您可以尝试这样的操作 - 首先设置属性，然后调用 getCanvas:

https://glitch.com/edit/#!/a-frame-screenshot-size

AFRAME.registerComponent('snap-on-space-key', {
  init: function () {
    const scene = this.el
    document.addEventListener('keydown', (event) => {
      const SPACEKEY = 32
      if (event.which === SPACEKEY) {
        scene.setAttribute('screenshot', {
          width: 1024,
          height: 512
        })
        const canvas = scene.components.screenshot.getCanvas('equirectangular');
        console.log(canvas)
        scene.components.screenshot.capture('equirectangular')
      }
    });
  }
}); 

或者，您也可以在场景中设置一次:

<a-scene screenshot="width: 1024; height: 512;">...