User Events
This documentation demonstrates how to implement user events via our API. This helps to make your mirror more interactive.
Create user events
To create custom events like click events you can use our API. For example if you want a message box 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.getObject3D(payload.guid));
let name = clickedObject.Name;
let guid = clickedObject.Guid;
alert(`Clicked object: Name = ${name}, GUID = ${guid}`);
}
};
This code snippet changes shows a message box the name and guid of the clicked object.
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>
</head>
<body>
<div id="twinMirror"></div>
<script>
window.twin = new twinLibrary.Twin();
window.twin.start("twinMirror", "http://localhost:3000");
twin.host.notify = function (topic, payload) {
if (topic == "objectClicked") {
let clickedObject = JSON.parse(twin.scene.getObject3D(payload.guid));
let name = clickedObject.Name;
let guid = clickedObject.Guid;
alert(`Clicked object: Name = ${name}, GUID = ${guid}`);
}
};
</script>
</body>
</html>