three.jsシーンの上にdivクラスを配置してguiを作成する

Question

htmlボタンを作成するためにthree.jsクラスの上にdivクラスを配置するにはどうすればいいですか？私は現在、私のシーンのコンテナとして機能しているdivを持っています。次に、そのシーンの上にもっと多くのdivクラスを配置して、guisとボタンを作成したいと考えています。現在、このようなコードを実行している：

<div id="world"> 
 
\t <div id="test"> 
 
\t \t <button>hi</button> 
 
\t </div> 
 
</div>

これは、シーンの内部のボタンをシーンに続いて、ページの上部にあるボタンを配置していません。

Answer 1

divは、divよりも高く、position: absoluteとz-indexである必要があります。たとえば、次のように

<div id="world"> 
    Three.js Container 
    <div id="test"> 
     <button>Button</button> 
    </div> 
</div> 

とCSS：

#world { 
    width: 100%; 
    height: 150px; 
    background-color: red; 
} 

#test { 
    position:absolute; 
    z-index:5; 
} 

Hereは作業codepenです。