User Events
The Twin Mirror supports user interaction through events such as object clicks or double-clicks. These can be handled via the JavaScript API to trigger custom behavior.
This documentation demonstrates how to implement user events via our API. This helps to make your mirror more interactive.
Create user events
Click Event Handling
To handle user interactions like click events you can use our API. For example if you want a console log with the information of a clicked object. To do so you can create an event via JavaScript like this.
twin.host.notify = function (topic, payload) {
if (topic == "objectClicked") {
let clickedObject = JSON.parse(twin.scene.getObject3DAsJson(payload.guid));
let name = clickedObject.Name;
let guid = clickedObject.Guid;
console.log(`Clicked object: Name = ${name}, GUID = ${guid}`);
}
};
This code snippet logs the name and guid of the clicked object.
Double Click Event Handling
You can also use double click events to trigger different behavior. For example you could focus on the clicked object or log additional data.
You can then react to the double click event like this:
twin.host.notify = function (topic, payload) {
if (topic == "objectDoubleClicked") {
let clickedObject = JSON.parse(twin.scene.getObject3D(payload.guid));
let name = clickedObject.Name;
let guid = clickedObject.Guid;
console.log(`Double clicked object: Name = ${name}, GUID = ${guid}`);
}
};
This code snippet focuses the double-clicked object and logs its information.
Full Example
The following code displays a complete example file.
<!DOCTYPE html>
<html>
<head>
<script src="./js/twin.min.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#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 (topic, payload) {
if (topic == "objectClicked") {
let clickedObject = JSON.parse(window.twin.scene.getObject3DAsJson(payload.guid));
let name = clickedObject.Name;
let guid = clickedObject.Guid;
console.log(`Clicked object: Name = ${name}, GUID = ${guid}`);
}
if (topic == "objectDoubleClicked") {
let clickedObject = window.twin.scene.getObject3D(payload.guid);
console.log(clickedObject);
}
};
</script>
</body>
</html>