如何使用A-frame为场景提供500px的静态高度？

Question

我将创建一个HTML内容与WebVR内容混合的网站。对于WebVr部分，我将使用A帧。 VR部分I＆lt; ll给出最大高度为500px。

加载网站后，您可以看到VR部分和网站内容的一小部分。 VR部分与窗口的高度不同。它有点像这个网站：Bowling Stones at Brussels。

此处的标题是普通视频，但我们希望将其更改为360视频或图像，可以使用手机的陀螺仪查看。

下面，我写了一个测试，但图像缩放了错误。您可以在此处看到下面的original image代码示例或this fiddle上的代码示例。

＆＃13;

＆＃13;

/* reset A-frame's CSS */
.a-html,
.a-canvas {
    position: relative !important;
}

.a-body {
    overflow-y: auto !important;
}

.a-canvas {
    height: 100% !important;
}

/* My css */
.vrcontent {
  height: 500px;
}

.calltoaction {
  position: absolute;
  top: 250px;
  width: 150px;
  margin: 0 auto;
  left: 500px;
}

.content {
  width: 900px;
  margin:m 0 auto;
 }

＆＃13;

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<div class="vrcontent">
  <a-scene embed>
    <a-assets>
      <img id="sky" src="https://c1.staticflickr.com/5/4248/34705881091_37b5cf2d28_o.jpg" alt="" />
    </a-assets>

    <a-sky src="#sky"></a-sky>
  </a-scene>
</div>

<!-- start test 1 -->

<div class="overlay">
  <button class="calltoaction">Click me!</button>
</div>

<!-- eide test 1 -->

<div class="content">
  <p>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti animi aliquid architecto quibusdam ipsum, debitis dolor mollitia. Quidem, cumque quos porro doloribus iure dolore illum, qui rem asperiores unde laboriosam.</span>
    <span>Dolorum tempora quam eveniet ea recusandae deserunt, velit similique. Cum sunt rerum beatae officiis qui sed molestiae et ullam quasi, harum maxime vel, aspernatur quidem molestias. Provident quae illo harum?</span>
    <span>Sunt expedita, repellat saepe vel accusamus odio. Alias, obcaecati harum earum inventore asperiores quaerat, sit autem nostrum. Sunt illo numquam, temporibus pariatur optio nam, expedita necessitatibus aliquid nemo maxime nisi.</span>
    <span>Praesentium corporis, ea sunt asperiores, recusandae animi, rem doloribus, possimus cum laudantium libero. Maiores a, iusto aspernatur reiciendis ratione sunt nisi, rem, quasi temporibus ullam non. Neque repellat facilis illo.</span>
    <span>Quibusdam reiciendis sunt tempora fuga deleniti, molestias temporibus doloremque. Nam sed consequatur consectetur ut tempora a nesciunt, perspiciatis dolorem reprehenderit modi enim at veritatis, excepturi voluptate quod, voluptatibus voluptas. Cum.</span>
    <span>Debitis, nesciunt, repellat voluptatem sapiente incidunt quidem asperiores reprehenderit vero quisquam placeat sunt voluptatibus velit. Consectetur atque voluptates, repellendus facere sequi ea totam quia quis non incidunt. Soluta, aut, provident.</span>
    <span>Eos sequi itaque dolorem atque ex id maiores dolor eaque libero iste deserunt ea voluptate minima cum laboriosam, qui animi, fuga suscipit necessitatibus vero, autem blanditiis, totam nulla. Quo, et.</span>
    <span>Quisquam commodi voluptatum dolorem aspernatur, distinctio et ullam laborum laboriosam quo nisi, praesentium quaerat ab excepturi. Illum harum doloremque, accusantium, beatae culpa assumenda laboriosam, quos mollitia aperiam dolorem praesentium minus!</span>
    <span>Doloribus ducimus odit veritatis fuga excepturi repellat culpa possimus obcaecati mollitia, dicta, totam itaque ipsa dignissimos quisquam tenetur. Dolorum magnam ullam nobis libero, nisi blanditiis adipisci, atque tempore impedit quisquam.</span>
    <span>Similique, pariatur unde. Autem ipsum amet asperiores necessitatibus optio incidunt ducimus, fugit officiis excepturi, dolor repellat aspernatur pariatur quia deserunt explicabo adipisci. Officia nemo cupiditate reprehenderit ipsam corporis, quibusdam. Deserunt.</span>
    <span>Maiores sapiente ullam, nulla hic voluptas perferendis quam soluta praesentium reiciendis ex rerum repellat velit in nisi odio expedita doloribus laboriosam modi fugit numquam molestiae provident cum. Iste, quasi repellendus!</span>
    <span>Nesciunt molestiae vitae, non cum ad facilis adipisci ipsam perferendis ratione dolorum ipsa itaque possimus a hic molestias quas enim dignissimos ab maiores quos, tempore delectus. Ad deserunt sequi dicta!</span>
    <span>Aspernatur porro vitae numquam dolore consequuntur maiores. Iste commodi reiciendis facilis laboriosam pariatur error eveniet ratione laudantium. Fugit corrupti cumque vel ipsum mollitia pariatur nostrum velit, quis. Quam soluta, fugiat.</span>
    <span>Obcaecati suscipit cumque repellendus architecto consequatur dicta ducimus laborum tempora. Fuga animi esse eius. Perspiciatis ab perferendis unde exercitationem. Ex ad pariatur eum vero dolores, perferendis laboriosam necessitatibus veniam repudiandae.</span>
    <span>Tempora, aut vero sed omnis eveniet fuga exercitationem totam numquam perferendis. Labore repellat dignissimos quia. Dolorem, temporibus, veritatis. Officiis laborum, inventore sit voluptas molestiae illum deleniti voluptatem dolorem soluta nihil!</span>
    <span>Expedita soluta, iste tempora amet optio, quam impedit eos sit illum debitis animi, tempore necessitatibus ut modi itaque voluptatem earum odio dolores enim. Praesentium nemo laborum nisi excepturi vel obcaecati.</span>
    <span>Unde quod illo quasi laboriosam sunt cumque, debitis voluptate laudantium delectus magnam dolore voluptatem minima eum, harum suscipit nostrum officia nemo fuga quaerat dignissimos accusamus! Ducimus dolore amet tempora natus!</span>
    <span>Nemo necessitatibus architecto incidunt esse? Quisquam maiores unde doloribus illo, amet iusto assumenda, sint sequi laboriosam odit velit error explicabo ab. Quo et magnam non, assumenda numquam omnis sunt eum.</span>
    <span>Nihil temporibus, est dignissimos deserunt doloribus veniam quod. Dolorum magni maxime voluptatibus recusandae reiciendis, voluptas animi nam distinctio illo cumque dolore fugit veniam, ab, quibusdam deserunt iste? Quos, quae, aut!</span>
    <span>Ex ratione quisquam voluptas consectetur fugit optio, possimus nobis voluptatum minus fugiat. Dolorem, sequi totam. Dolores perferendis voluptatem obcaecati harum unde blanditiis enim in, nemo, deleniti accusantium, impedit molestiae animi!</span>
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

图片如下所示：

但是当我删除.vrcontent元素的宽度时，它看起来很正常。

所以我的问题是我可以使用这个伪代码设置场景的高度吗？

<a-scene height="500">
    ...
</a-scene>

Answer 1

<a-scene embed>应为<a-scene embedded> https://aframe.io/docs/0.5.0/components/embedded.html