AFrame - 设置相机馈送的大小 [英] AFrame - Set Size of Camera Feed

问题描述

我的最后一个问题被标记为重复:

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

var THREEx = THREEx ||{}THREEx.wrapperElement = null;THREEx.setWrapperElement = 函数(wrapperEl，视频){THREEx.wrapperElement = wrapperElwrapperEl.appendChild(video);}

1.视频元素

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

宽度/高度是一个完全不同的故事.对于第一个 10000 * 1000ms arjs 重新计算包括视频大小在内的多项内容(源).这使得从外部"改变元素变得困难.无论如何，这些重新计算的事情之一是 video 元素大小，它基于 window 维度(源)

我们可以用我们的包装纸切入:

ARjs.Source.prototype.onResizeElement = function () {//(...)var screenWidth = window.innerWidth;var screenHeight = window.innerHeight;如果(THREEx.wrapperElement){const bounds = THREEx.wrapperElement.getBoundingClientRect();screenWidth = THREEx.wrapperElement.offsetWidth;screenHeight = THREEx.wrapperElement.offsetHeight;//默认情况下，视频父级是窗口，因此顶部为 0；this.domElement.style.top = bounds.top + 'px';}

2.一帧场景

要调整场景 arjs 将主体尺寸设置为 元素((source) 强制更新 a-frame. 因为我们不想弄乱 ，所以让我们在 wrapperElement 上做同样的事情:

AFRAME.registerSystem('arjs', {//(...)//丑陋的kludge在aframe上调整大小......甚至不确定它是否有效如果(arProfile.contextParameters.trackingBackend ！== '探戈' && THREEx.wrapperElement){arSource.copyElementSizeTo(THREEx.wrapperElement)}

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

ARjs.Source.prototype.copyElementSizeTo = function (otherElement) {如果(window.innerWidth > window.innerHeight){//风景otherElement.style.width = this.domElement.style.widthotherElement.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)})

您可以在此处查看.

---

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

My last question was marked as duplicate: A-Frame AR - Set Size of Scene

Here is the question that it was marked duplicate of: Aframe and aframe-ar: display video stream in div instead of fullscreen

Using iframe is not the optimal solution for me, I need the AR to be present on my webpage. The answerer alludes to changing the source code to be able to resize the scene and camera video. Can someone help me achieve this?

解决方案

tldr.

Afaik arjs has hardcoded sizes and multiple boundaries all over the place to keep the library universal (different devices with different aspect ratios, mobile portrait vs landscape etc...).

Re-creating it all with "embedding" options would be a huge project so I'll focus on a simple example with a non - resizable window.

Disclaimer: most of the following is just my take, mostly showing which parts I changed and why. All of this could be done in many other ways.

0. a wrapper element

So the idea is to be able to embed the video + scene into some div, like here

You can see both the video and scene are contained within a div - #arjs-cell. So just after the namespace I've added my variable for keeping my wrapper element, and a setter, which will also reparent the video:

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

1. The video element

Upon creation the video element is given multiple style attributes (source) like position, top, left, zIndex). In this case I've just threw out the left position and changed the z-index.

The width / height is a completely different story. For the first 10000 * 1000ms arjs recalculates multiple things including the video size (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)

We can get cut in with our wrapper:

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. The a-frame scene

To adjust the scene arjs sets the body dimensions to the <video> element ( (source) forcing an update in a-frame. Since we don't want to mess with the <body>, lets do the same on the 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() will mess with the margins, so lets comment that out:

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. Putting it all to use

Now we can wait for the video (and arjs core) to be fully initialized, and do our magic:

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

You can check it out here.

---

It really would be way easier not to break the library and use an iframe. You can easily call functions withing the iframed website - check it out here

这篇关于AFrame - 设置相机馈送的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！