web-dev-qa-db-ja.com

three.jsにHTMLテキスト/ボタンをオーバーレイする方法は？

わかりました、ここではthree.jsは非常に新しいですが、私はGoogleが持っているものを達成しようとしています https://beinternetawesome.withgoogle.com/interland

参照してください-フルスクリーンのThree.jsシーンと、テキスト、ボタン（JS経由では生成されない明らかにHTML div）が完全に上にオーバーレイされています。

私は 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やUIdivのzインデックスをどのように操作しても、UIdivが一番上に表示されます。

enter image description here

three.jsシーンにHTMLをオーバーレイしてGoogleの効果を実現するにはどうすればよいですか？私は何が間違っているのですか？

Googleと同じようにウィンドウ全体を埋めるためにキャンバスが必要ですが、事前にキャンバスのHTML要素を作成し、JSですべてを添付しようとしているように見えます。

javascriptjqueryhtmlcssthree.js
5
skyguy

望ましい結果を達成する方法はたくさんあるので、創造性はあなた次第です。

Three.jsの公式Webサイトから examples のソースコードを見ることから始めることができます。ここで、例のinfoセクションがWebページにどのように設定されているかを確認できます。

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

z-indexは、position: staticとposition: initialの場合を除いて、positionプロパティでのみ機能します。

このボタンクラスは私のthreejsシーンでうまく機能しました。それに応じてleft, topを編集できます。

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