0
我將創建一個HTML內容與WebVR內容混合的網站。對於WebVr部分，我將使用A幀。虛擬現實部分我會給500px的最大高度。如何使用A幀爲場景提供500px的靜態高度？
當網站加載時，您可以看到VR部分和網站的一小部分內容。 VR部分與窗口的高度不同。這有點像這個網站：Bowling Stones at Brussels。
這裏的標題是一個普通的視頻，但我們希望將其改爲360視頻或可以通過手機陀螺儀查看的圖像。
下面，我寫了一個測試，但圖像縮放錯誤。在這裏您可以看到下面的代碼示例original image或this fiddle。
/* 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;
}<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>圖像看起來像這樣：
但是，當我除去.vrcontent元件的寬度，它看起來正常。
所以我的問題是我可以使用這個僞代碼設置場景的高度？
<a-scene height="500">
...
</a-scene>