如何在three.js上叠加HTML文本/按钮？
sky*_*guy 4 html javascript css jquery three.js
好的,这里的three.js非常新,但我想通过https://beinternetawesome.withgoogle.com/interland实现Google的目标
看 - 他们有他们的FULL SCREEN 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 div或UI div的z索引,我都会将UI div卡在最上面:
如何通过覆盖在我的three.js场景上的HTML来实现Google效果？我究竟做错了什么？
我需要我的画布像Google一样填充整个窗口,并且无法实现预先制作画布HTML元素并尝试在JS中附加所有内容.
创造力取决于你,因为有很多方法可以达到预期的效果.
您可以从查看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>z-index 仅适用于位置属性，除了 caseposition: static和position: initial。
这个按钮类与我的 Threejs 场景配合得很好。您可以进行left, top相应的编辑。
button {
position: absolute;
display: block;
z-index: 99;
left: 50%;
top: 50%;
}
- 这是对我想做的事情的一种安慰奖，但它会起作用。我很惊讶 Three.js 还没有引入 9-patch 图像系统，或者至少没有引入在 webgl 渲染器中使用 css 功能的方法 (2认同)