0
WebVRコンテンツとHTMLコンテンツが混在したWebサイトを作成します。 WebVrの部分については、私はAフレームを使用します。 VRパーシャル私は500pxの最大の高さを与えます。Aフレームを使用して、シーンの静的な高さを500ピクセルにするにはどうすればいいですか？
サイトが読み込まれると、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>