Manipulate Objects
This guide explains how to dynamically manipulate 3D objects in the Twin Mirror using JavaScript such as changing color or visibility.
Changing Object Color
You can manipulate 3D objects using our API. For example if you want to change the color of a clicked object. For this example you can create an event via JavaScript, similar to React on user-events, to get the guid of the object and change its color.
twin.host.notify = function (topic, payload) {
if (topic == "objectClicked") {
let object = twin.scene.getObject3D(payload.guid);
object.setColor("red");
}
};
Changing Object Visibility
You can also toggle an object's visibility on click.
twin.host.notify = function (topic, payload) {
if (topic == "objectClicked") {
let object = twin.scene.getObject3D(payload.guid);
object.setVisibility(false);
}
};
Example
The following is a complete example HTML file. Clicking an object changes its color to red. Double-clicking hides it.
<!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 object = window.twin.scene.getObject3D(payload.guid);
object.setColor("red");
}
if (topic == "objectDoubleClicked") {
let object = window.twin.scene.getObject3D(payload.guid);
object.setVisibility(false);
}
};
</script>
</body>
</html>