Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Context-dependent Tools - Demo 2
<!-- Using distance as a threshold -->
<!DOCTYPE html>
<html lang="en">
<script src="objectDefaultFiles/object.js"></script>
<script src="objectDefaultFiles/pep.min.js"></script>
<meta charset="UTF-8">
#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;
<body style="width: 300px; height: 300px">
<div id="container">
<div id="details">
Here are the details
let realityInterface = new RealityInterface();
let container = document.getElementById('container');
function setColor(hue) { = 'hsl(' + hue + ', 90%, 70%)';
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';
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.