如何在three.js 上覆盖HTML 文本/按钮?

本文介绍了如何在three.js 上覆盖HTML 文本/按钮?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

好的，这里对 three.js 非常陌生，但我正在尝试通过

如何在我的 three.js 场景上叠加 HTML 来实现 Google 效果?我做错了什么?

我需要我的画布来填满整个窗口，就像 Google 所做的一样，但似乎事先制作了画布 HTML 元素并尝试在 JS 中附加所有内容.

解决方案

创造力取决于你，因为有很多方法可以达到预期的结果.

可以从Three.js官网查看examples的源码开始.在那里您可以看到示例的 info 部分如何在网页上设置.

var buttons = document.getElementsByTagName("button");for (let i = 0; i

body {溢出:隐藏；边距:0；}.ui {位置:绝对；}按钮{边距: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">信息头</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>

Ok, very new to three.js here but I am trying to achieve what Google has with https://beinternetawesome.withgoogle.com/interland

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.

I have looked athttps://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.

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:

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:

<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:

How can I achieve the Google effect with HTML overlaid over my three.js scene? What am I doing wrong?

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.

解决方案

Creativity is up to you, as there are many ways to achieve the desired result.

You can start from looking at the source code of examples from the official web site of Three.js. There you can see how the info section of an example sets on a web page.

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 上覆盖HTML 文本/按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！