好的，这里是 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 Canvas 并将其添加到我的文档中，以便它获得并保持我窗口的完整宽度/高度:
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 效果？我做错了什么？
我需要我的 Canvas 来填充整个窗口，就像谷歌所做的那样，但无法实现它似乎事先制作 Canvas HTML 元素并尝试在 JS 中附加所有内容。
最佳答案
创造力取决于您，因为有很多方法可以达到预期的结果。
可以从查看examples的源码开始来自 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>关于javascript - 如何在 three.js 上叠加 HTML 文本/按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47297794/