What is the best way to superimpose text and buttons over a three.js scene

Question

What is the best way to superimpose text and buttons over a three.js scene

Hey there, I'm diving into the world of three.js and I'm on a mission to recreate the awesome interactive 3D experience that Google has with their game at

Check it out - they have this cool Three.js scene taking up the entire screen with text and buttons seamlessly placed on top (which are clearly HTML divs, not generated via JS)

I've checked out some resources like

and similar questions but I'm struggling to figure out the right approach. I really don't want to create my UI elements in Three.js - I simply want to use regular HTML.

So far, I've created my Three.js canvas and added it to my document so it fills 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, using my existing HTML:

<body>
    <div id="ui">
    <p id="message">Test to change</p>
</div>

I find that the UI div stays on top no matter how I adjust the CSS or z-index:

https://i.sstatic.net/UdVda.png

How can I achieve the same effect as Google with HTML overlaid on my three.js scene? What am I missing?

I really want my canvas to fill the whole window just like Google's does but I'm struggling to make it happen by creating the canvas element beforehand and trying to attach everything through JS.

javascript jquery html css three.js

Answer 1

Answer №1

There are countless paths to unlock your creativity and achieve the desired outcome.

One starting point is exploring the source code of various examples on Three.js' official website. By analyzing how the info section is implemented in these examples, you can gain valuable insights for your own projects.

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

There are countless paths to unlock your creativity and achieve the desired outcome.

One starting point is exploring the source code of various examples on Three.js' official website. By analyzing how the info section is implemented in these examples, you can gain valuable insights for your own projects.

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 3

Answer №2

The z-index property is effective only when used in conjunction with the position property, except for scenarios where position: static or position: initial are applied.

I found that this button class worked perfectly within my threejs scene. Feel free to adjust the values of left and top as needed.

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

Answer 4

The z-index property is effective only when used in conjunction with the position property, except for scenarios where position: static or position: initial are applied.

I found that this button class worked perfectly within my threejs scene. Feel free to adjust the values of left and top as needed.

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

What is the best way to superimpose text and buttons over a three.js scene

Answer №1

Answer №2

Similar questions

Is it possible to compare escaped data with the unescaped value of a select box in JavaScript?

Allow all images on the webpage to be easily dragged and dropped into a designated upload section

Ways to extract information from an HTML response following a GET request

Ensure that test cases in Angular2 include a line that covers conditions for returning values

What steps can I take to fix the problem of Expo Go crashing on my Android device?

Experience the power of dynamic site regeneration with GatsbyJS

In Python with Selenium, the ability to expand and collapse functionality will only be available if the button

How can I maintain the consistent speed of the Javascript timer even when the .deck is clicked?

The clash between React Inline styles and Client CSS can lead to conflicts in styling

The value of the bound variable in ng-options does not get updated after the array is

Is it possible to use setState after a setTimeout to unmount a component?

Having trouble with JQuery in JADE?

Running multiple web applications with different base directories on a single Express server

Using AJAX to dynamically inject a JavaScript function into the webpage

Using an Array as a prop in a React component: A step-by-step guide

An error occurred at line 120 in the index.js file of the http-proxy library: "socket hang up"

Is there a way to switch tabs through programming?

Applying CSS styling to PHP documents

What status code should be used to redirect a request from one valid endpoint to another valid endpoint?

JQuery Form Validation - Detecting Input Changes