2017-09-29 3 views
0

フルスクリーンモードのアイコン(おおよそゴーグルのセットに似ている、多分50%の透明なグレーとソリッドホワイト)は、デスクトップから見たときに常にブラウザ画面の右下に表示されます。<AFrame>フルスクリーンのアイコンは右下にどのように表示されますか?

ウィンドウのサイズを変更したり、コンソールを起動したり、カメラの角度にfovを変更したりするなど、中断する可能性のある操作にもかかわらず、アイコンの位置は固定されています。

これはどのように達成されましたか?

私は、アプリケーションが「デスクトップ」モードで実行されているときに、マウスでクリックできる場所(おそらく似たような要素)バイザーやダンボールを通して見るのではなく、アプリケーションは360枚の写真を表示します。


EDIT:ngokevinにより投稿(分かりやすく、質問のために削除された元の質問の一部は、CSSの適切な使用方法の詳細を取得するために拡張)

回答は、CSSを使用することを提案しています。

私はHTMLとシンプルなJavaScriptの状況でCSSをうまく使いました。 AFRAMEコンテキストで動作させるのに問題があります。

以下の例では、「ボトム」属性を変更しようとする試みの1つですが、効果がありません。 (絶対かどうか、他の様々なものを使用して、回答に設けられたリテラル文字列を使用して、代わりにクラスのIDを使用してみました。)

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>CSS/AFRAME Test</title> 
    <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script> 

    <style> 
    .plane { position:absolute; bottom: 100px ! important;} 
    </style> 
</head> 

<body> 
    <a-scene> 
    <a-plane class="plane" 
     height="1" 
     width="3" 
     position="0 0 -4" 
     material="color: red"> 
    </a-plane>  

    <a-camera fov="100" look-controls></a-camera> 
</a-scene> 

を「ボトム」の値を変更しても効果はありません。たとえば、この四角形を常にCSSを使用して中央の下端を挟むようにすることは可能ですか?

上記の編集を表示して、CSSを使用してどのような属性にも影響を与えることができますか?

"平面"要素を2D HTMLにする必要がある場合、どのようにa-sceneを重ねるように設定しますか?

答えて

1

これは単なるCSSです。上書きすることができます(.a-enter-vr-button { bottom: auto !important; top: 10px; }など)

+0

これはヘッダーの