AFrame

Question

我的最后一个问题被标记为重复：A-Frame AR - Set Size of Scene

这是被标记为重复的问题：

使用 iframe 对我来说不是最佳解决方案，我需要 AR 出现在我的网页上。回答者暗示要更改源代码以能够调整场景和摄像机视频的大小。有人可以帮我实现这个吗？

Answer 1

tldr.

Afaik arjs 具有硬编码大小和多个边界，以保持库的通用性（不同设备具有不同的纵横比，移动纵向与横向等...）。

使用“嵌入”选项重新创建这一切将是一个巨大的项目，因此我将专注于一个不可调整大小的简单示例 window。

免责声明：以下大部分内容只是我的看法，主要显示我更改了哪些部分以及更改原因。所有这些都可以通过许多其他方式完成。

0。包装元素

所以想法是能够将视频+场景嵌入到一些div中，就像这里

您可以看到视频和场景都包含在 div - #arjs-cell 中。所以就在命名空间之后，我添加了我的变量来保存我的包装元素，还有一个 setter，它也将重新设置视频的父级：

var THREEx = THREEx || {}
THREEx.wrapperElement = null;
THREEx.setWrapperElement = function(wrapperEl, video) {
  THREEx.wrapperElement = wrapperEl
  wrapperEl.appendChild(video);
}

1.视频元素

创建后，视频元素被赋予多个样式属性 (source)，例如 position、top、left、zIndex)。在这种情况下，我刚刚放弃了 left 位置并更改了 z-index.

宽度/高度完全不同。对于第一个 10000 * 1000ms arjs 重新计算多项内容，包括视频大小 (source). It makes it difficult to change the elements "from the outside". Anyway one of those recalculated things is the video element size, which is based on the window dimensions (source)

我们可以用我们的包装器切入：

ARjs.Source.prototype.onResizeElement = function () {
// (...)
  var screenWidth = window.innerWidth;
  var screenHeight = window.innerHeight;
  if (THREEx.wrapperElement) {
      const bounds = THREEx.wrapperElement.getBoundingClientRect();
      screenWidth = THREEx.wrapperElement.offsetWidth;
      screenHeight = THREEx.wrapperElement.offsetHeight;
      // by default the video parent is the window, so top is 0;
      this.domElement.style.top = bounds.top + 'px';
  }

2。 A帧场景

调整场景 arjs 将主体尺寸设置为 <video> 元素 ((source) 强制在 a-frame 中更新。因为我们不想弄乱 <body>，让我们在 wrapperElement:

上做同样的事情

AFRAME.registerSystem('arjs', {
// (...)
  // ugly kludge to get resize on aframe... not even sure it works
  if (arProfile.contextParameters.trackingBackend !== 'tango' && THREEx.wrapperElement) {
    arSource.copyElementSizeTo(THREEx.wrapperElement)
  }

arSource.copyElementSizeTo() 会弄乱边距，所以让我们注释掉：

ARjs.Source.prototype.copyElementSizeTo = function (otherElement) {
if (window.innerWidth > window.innerHeight) {
   //landscape
   otherElement.style.width = this.domElement.style.width
   otherElement.style.height = this.domElement.style.height
   // otherElement.style.marginLeft = this.domElement.style.marginLeft
   // otherElement.style.marginTop = this.domElement.style.marginTop
}
// (...)

3。全部投入使用

现在我们可以等待视频（和 arjs 核心）完全初始化，然后施展魔法：

window.addEventListener("arjs-video-loaded", evt => {
  const video = evt.detail.component;
  const wrapper = document.querySelector("#arjs-cell")
  THREEx.setWrapperElement(wrapper, video)
})

你可以看看here。

不破坏库并使用 iframe 确实会容易得多。您可以通过 iframed 网站轻松调用函数 - 查看 here

AFrame - 设置相机馈送的大小

AFrame - Set Size of Camera Feed

ar.js