如何在three.js 上覆盖HTML 文本/按钮？答案

【问题标题】：How to overlay HTML text/buttons on three.js?如何在three.js 上覆盖HTML 文本/按钮？
【发布时间】：2018-04-28 02:39:17
【问题描述】：

好的，这里对 three.js 很陌生，但我正在努力实现 Google 所拥有的 https://beinternetawesome.withgoogle.com/interland

看 - 他们有他们的全屏 Three.js 场景和他们的文本、按钮（很明显是 HTML div，不是通过 JS 生成的）完美地覆盖在上面。

我看过 https://discourse.threejs.org/t/trying-to-overlay-a-button-and-text-on-top-of-a-three-js-scene/390/2

和类似的问题，但无法理解执行此操作的正确方法。我不想在 Three.js 中生成我的 UI 元素 - 我只想使用 HTML。

到目前为止，我生成了我的 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);

然后使用我现有的 HTML：

<body>
    <div id="ui">
    <p id="message">Test to change</p>
</div>

无论我如何使用 CSS 或 UI div 的 z 索引，我都会将 UI div 卡在顶部：

如何在 three.js 场景上覆盖 HTML 以实现 Google 效果？我做错了什么？

我需要我的画布来填充整个窗口，就像 Google 所做的那样，并且无法实现它似乎事先制作了 canvas HTML 元素并尝试在 JS 中附加所有内容。

【问题讨论】：

标签： javascript jquery html css three.js

【解决方案1】：

创意取决于你，因为有很多方法可以达到预期的效果。

可以从 Three.js 官网查看examples 的源代码开始。在那里您可以看到示例的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>

【讨论】：

谢谢 - 有没有办法确保three.js 场景即使在拖动窗口时也保持场景的宽度/高度？我这样做时会看到窗口背景
对于任何想知道的人 - 使按钮位于场景顶部的主要代码行是每个按钮的 top/bottom/right 值。

【解决方案2】：

z-index 仅适用于位置属性，position: static 和 position: initial 的情况除外。

这个按钮类在我的threejs 场景中运行良好。您可以相应地编辑left, top。

button {
    position: absolute;
    display: block;
    z-index: 99;
    left: 50%;
    top: 50%;
    }

【讨论】：

这是对我想做的事情的一种安慰奖，但它会起作用。我很惊讶 three.js 还没有引入 9-patch 图像系统，或者至少是一种在 webgl 渲染器中使用 css 功能的方法