如何在移动设备上滚动 aframe 场景

Question

有没有办法在移动设备上滚动aframe，我试过关闭场景的控件还是不能滚动，一直在交互

Answer 1

这是一种方法 - 在场景上创建一个叠加元素，这将阻止交互和

在“双击”时隐藏叠加层
单击场景外的任何内容时显示叠加层

所以假设在你的可滚动内容的某处你有一个 HTML 设置如下：

<div id="aframe-content">
  <div id="aframe-overlay"></div>
  <a-scene embedded>
      <!-- cool stuff --->
  </a-scene>
</div>

和 css 设置，以便覆盖在可滚动列中工作：

#aframe-content {
  position: relative;
}

#aframe-overlay {
  z-index: 10000;
  position: absolute;
}

a-scene, #aframe-overlay {
  height: 300px;
  width: 100%;
}

我们只需要添加 js 负责隐藏/显示覆盖：

const overlay = document.querySelector("#aframe-overlay");
const acanvas = document.querySelector("canvas.a-canvas")
// helper boolean, so that on each touch we don't need to compare HTML elements
var overlayHidden = false; 

function setOverlay(enabled) {
  overlayHidden = !enabled
  overlay.style.display = overlayHidden ? "none" : "block";
}

function hideOverlay(evt) {
  if (overlayHidden && evt.target !== acanvas) {
    setOverlay(true)
  }
}

var showOverlay = setOverlay.bind(this, false)
overlay.addEventListener("dblclick", showOverlay);
window.addEventListener("click", hideOverlay);
window.addEventListener("touchstart", hideOverlay);

您可以查看 in this glitch，它似乎在 PC 和移动设备上都能正常工作。点开小鱼看源码

如何在移动设备上滚动 aframe 场景

How to scroll over aframe scene on mobile devices

html

aframe