Как прокручивать сцену в кадре на мобильных устройствах

Вот один из подходов — создать элемент наложения над сценой, который предотвратит взаимодействие и

• скрыть наложение при двойном нажатии
• показывать оверлей при нажатии чего-либо за пределами сцены

Итак, скажем, где-то внутри вашего прокручиваемого контента у вас есть настройка 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);

Вы можете проверить это в этом глюке, который, похоже, работает как на ПК, так и на мобильных устройствах. Нажмите на рыбу, чтобы увидеть исходный код.