Add labels and buttons
In this documentation demonstrates how to integrate HTML elements into a 3D scene. By combining HTML and 3D graphics, we can create interactive labels that appear to be part of the 3D world. These labels can follow specific 3D positions and even include CSS styling and interactions.
This allows developers to add interactive UI elements like labels or buttons directly into the 3D scene, enhancing user interaction and visual clarity.
Creating a style for labels or buttons
CSS stylesheets are dynamically created and appended to the document's head. The stylesheet defines a class .labelStyle for the labels, styling the text and background.
<style>
.labelStyle {
color: #fff;
text-align: left;
background-color: #000;
}
</style>
A simple style for a button could look like this. This ensures that the element is visually identifiable as a button.
<style>
.buttonStyle {
background-color: #3498db;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}
.buttonStyle:hover {
background-color: #2980b9;
}
</style>
Creating HTML Elements for Labels
HTML elements for labels are created via JavaScript.
This label uses the previously created .labelStyle class for styling.
The position is set via the function yourLabelName.setPosition(x,y,z).
var boxText = "My first label";
var htmlBox = `<div class="labelStyle">${boxText}</div>`;
var htmlIDBox = "myCustomLabel";
var labelBox = new twinLibrary.HtmlLabel2D(htmlBox, null, htmlIDBox);
labelBox.setPosition(0, 0, 0);
twin.scene.add(labelBox);
Creating HTML Elements for Buttons
HTML element for buttons containing text are created via JavaScript.
This label uses the previously created .buttonStyle class for styling.
The position is set via the function yourButtonName.setPosition(x,y,z).
The buttons functionality can be implemented via JavaScript.
var buttonText = "Click Me";
var buttonHtml = `<button class="buttonStyle">${buttonText}</button>`;
var buttonId = "myCustomButton";
var buttonLabel = new twinLibrary.HtmlLabel2D(buttonHtml, null, buttonId);
buttonLabel.setPosition(1, 1, 1);
twin.scene.add(buttonLabel);
Adding Labels and Buttons After Scene Load
Ensure that the scene is fully loaded before adding labels or buttons. For this example the label part placed after window.twin = new twinLibrary.Twin(); and window.twin.start("twinMirror", "http://localhost:3000");.
window.twin.host.notify = function (type, payload) {
if('sceneLoaded' === type){
/* Add your Buttons or Labels here */
}
};
Example
The following code displays an example how the whole file could look like.
<!DOCTYPE html>
<html>
<head>
<script src="./js/twin.min.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.labelStyle {
color: #fff;
text-align: left;
background-color: #000;
}
.buttonStyle {
background-color: #3498db;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}
.buttonStyle:hover {
background-color: #2980b9;
}
#twinMirror {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="twinMirror"></div>
<script>
window.twin = new twinLibrary.Twin();
window.twin.start("twinMirror", "http://localhost:3000");
window.twin.host.notify = function (type, payload) {
if('sceneLoaded' === type){
var boxText = "My first label";
var htmlBox = `<div class="labelStyle">${boxText}</div>`;
var htmlIDBox = "myCustomLabel";
var labelBox = new twinLibrary.HtmlLabel2D(htmlBox, null, htmlIDBox);
labelBox.setPosition(0, 0, 0);
window.twin.scene.add(labelBox);
var buttonText = "Click Me";
var buttonHtml = `<button class="buttonStyle">${buttonText}</button>`;
var buttonId = "myCustomButton";
var buttonLabel = new twinLibrary.HtmlLabel2D(buttonHtml,null,buttonId);
buttonLabel.setPosition(1, 1, 1);
window.twin.scene.add(buttonLabel);}
};
</script>
</body>
</html>