javascript 如何在three.js 上覆盖HTML 文本/按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47297794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to overlay HTML text/buttons on three.js?
提问by skyguy
Ok, very new to three.jshere but I am trying to achieve what Google has with https://beinternetawesome.withgoogle.com/interland
好的，这里是Three.js 的新手，但我正在尝试通过https://beinternetawesome.withgoogle.com/interland实现 Google 的功能
See - they have their FULL SCREEN Three.js scene and their text, buttons (which are clearly HTML divs, not generated via JS) overlaid perfectly on top.
看 - 他们有他们的全屏 Three.js 场景和他们的文本，按钮（显然是 HTML div，不是通过 JS 生成的）完美地覆盖在上面。
I have looked at https://discourse.threejs.org/t/trying-to-overlay-a-button-and-text-on-top-of-a-three-js-scene/390/2
我看过 https://discourse.threejs.org/t/trying-to-overlay-a-button-and-text-on-top-of-a-three-js-scene/390/2
and similar Questions but can't understand the proper way to do this. I don't want to generate my UI elements in Three.js - I just want to use HTML.
和类似的问题，但无法理解执行此操作的正确方法。我不想在 Three.js 中生成我的 UI 元素 - 我只想使用 HTML。
What I have so far is I generate my Three.js canvas and add it to my document so that it gets and STAYS the full width/height of my window:
到目前为止，我生成了 Three.js 画布并将其添加到我的文档中，以便它获得并保持窗口的全宽/高度：
var controls, camera, renderer, scene, container, w, h;
renderer = new THREE.WebGLRenderer()
// container = document.getElementById('canvas');
container = window;
w = container.innerWidth;
h = container.innerHeight;
renderer.setSize(w, h)
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild(renderer.domElement);
And then with my existing HTML:
然后使用我现有的 HTML：
<body>
<div id="ui">
<p id="message">Test to change</p>
</div>
I get the UI div stuck on top, no matter how I play with the CSS or the z index of the UI div:
无论我如何使用 CSS 或 UI div 的 z 索引，我都会将 UI div 卡在顶部：
How can I achieve the Google effect with HTML overlaid over my three.jsscene? What am I doing wrong?
如何在我的Three.js场景中使用 HTML 覆盖实现 Google 效果？我究竟做错了什么？
I need my canvas to fill the whole window just as Google's does and can't achieve that it seems making the canvas HTML element beforehand and trying to attach everything in JS.
我需要我的画布来填充整个窗口，就像谷歌所做的那样，并且无法实现它似乎预先制作了画布 HTML 元素并尝试在 JS 中附加所有内容。
回答by prisoner849
Creativity is up to you, as there are many ways to achieve the desired result.
创造力取决于您，因为有很多方法可以实现预期的结果。
You could've started from looking at the source code of examplesfrom the official web site of Three.js. There you can see how the infosection of an example sets on a web page.
您可以从查看Three.js 官方网站上的示例源代码开始。在那里您可以看到info示例的部分如何在网页上设置。
var buttons = document.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", onButtonClick, false);
};
function onButtonClick(event) {
alert(event.target.id);
}
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00,
wireframe: true
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var animate = function() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
animate();body {
overflow: hidden;
margin: 0;
}
.ui {
position: absolute;
}
button{
margin: 20px;
}<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div style="width:100%;height:50px;text-align: center; color:white;" class="ui">Info header</div>
<button style="top:0" id="fire" class="ui">Fire</button>
<button style="bottom:0" id="spell" class="ui">Spell</button>
<button style="right:0" id="health" class="ui">Health</button>
<button style="right:0; bottom:0;" id="shield" class="ui">Shield</button>回答by Utkarsh Zaveri
z-index only works with position property except for the case position: staticand position: initial.
z-index 仅适用于位置属性，大小写position: static和除外position: initial。
This button class worked fine with my threejs scene. You can edit left, topaccordingly.
这个按钮类在我的 Threejs 场景中运行良好。您可以相应地进行编辑left, top。
button {
position: absolute;
display: block;
z-index: 99;
left: 50%;
top: 50%;
}
