Question

好的，这里的 three.js 非常新，但我想通过https://beinternetawesome.withgoogle.com/interland

来实现Google的目标

请参阅 - 他们有完整的屏幕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卡在最上面：

如何通过HTML覆盖我的 three.js 场景来实现Google效果？我做错了什么？

我需要我的画布像Google一样填充整个窗口，并且无法实现预先制作画布HTML元素并尝试在JS中附加所有内容。

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

Answer 2

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

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

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

如何在three.js上叠加HTML文本/按钮？

2 个答案: