在 three.js 场景之上放置一个 div 类以创建一个 gui

【问题标题】：Placing a div class on top of a three.js scene to create a gui在 three.js 场景之上放置一个 div 类以创建一个 gui
【发布时间】：2017-01-16 16:49:04
【问题描述】：

如何在我的 three.js 类之上放置一个 div 类来创建 html 按钮。我目前有一个 div 作为我的场景的容器。然后我想在该场景之上放置更多 div 类来创建 gui 和按钮。当前运行的代码如下：

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

这会在页面顶部放置一个按钮，然后是场景，而不是场景内部的按钮。

【问题讨论】：

标签： javascript jquery html three.js

【解决方案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;
}

【讨论】：