好的,很新three.js在这里,但我正在努力实现谷歌所拥有的https://beinternetawesome.withgoogle.com/interland https://beinternetawesome.withgoogle.com/interland
看 - 他们有全屏 Three.js 场景和文本、按钮(显然是 HTML div,不是通过 JS 生成的)完美地覆盖在顶部。
我看过https://discourse.thirdjs.org/t/trying-to-overlay-a-button-and-text-on-top-of-a- Three-js-scene/390/2 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>
无论我如何使用 UI div 的 CSS 或 z 索引,我都会将 UI div 卡在顶部:
如何通过 HTML 覆盖我的内容来实现 Google 效果three.js场景?我究竟做错了什么?
我需要我的画布填充整个窗口,就像 Google 所做的那样,但无法实现它似乎预先制作画布 HTML 元素并尝试在 JS 中附加所有内容。