Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Context-dependent Tools - Demo 2
<!-- Using distance as a threshold -->
<!DOCTYPE html>
<html lang="en">
<head>
<script src="objectDefaultFiles/object.js"></script>
<script src="objectDefaultFiles/pep.min.js"></script>
<meta charset="UTF-8">
<title>randomColor</title>
<style>
#container {
width: 290px;
height: 290px;
border: 5px solid black;
border-radius: 50%;
}
#details {
color: white;
font-size: 30px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body style="width: 300px; height: 300px">
<div id="container">
<div id="details">
Here are the details
</div>
</div>
<script>
let realityInterface = new RealityInterface();
let container = document.getElementById('container');
function setColor(hue) {
container.style.backgroundColor = 'hsl(' + hue + ', 90%, 70%)';
}
realityInterface.subscribeToMatrix();
realityInterface.addMatrixListener(function(modelView, _projection) {
let scaleFactor = Math.abs(modelView[0]);
let zDistance = Math.abs(modelView[14]);
let closeDistance = 500 * scaleFactor;
if (zDistance < closeDistance) {
document.getElementById('details').style.visibility = '';
} else {
document.getElementById('details').style.visibility = 'hidden';
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.