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.
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 user sees, that this HTML element is 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 element for the labels containing text 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);
Creating labels or Buttons
To create labels or buttons you have to ensure everything is loaded. For this example the label part is wrapped in a function ensuring the window is loaded.
And placed between window.twin = new twinLibrary.Twin(); and window.twin.start("twinMirror", "http://localhost:3000");.
window.twin.host.finishInitializationActive = true;
window.twin.host.uiEvent = function (type, topic, payload) {
var labelStyle = document.createElement("style");
/*labelCode from before...*/
twin.scene.add(labelBox);
};
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>
.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;
}
</style>
</head>
<body>
<div id="twinMirror"></div>
<script>
window.twin = new twinLibrary.Twin();
window.twin.host.finishInitializationActive = true;
window.twin.host.uiEvent = function (type, topic, payload) {
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);
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);
};
window.twin.start("twinMirror", "http://localhost:3000");
</script>
</body>
</html>