Skip to content

Commit d7df4a0

Browse files
Carifio24Carifio24
authored
Add PerTau w/controls example
1 parent b6f5870 commit d7df4a0

File tree

2 files changed

+171
-0
lines changed

2 files changed

+171
-0
lines changed

‎docs/examples/pertau_controls_test.glb

24.7 MB
Binary file not shown.

‎docs/examples/pertau_controls_test.html

+171
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
<html>
2+
<head>
3+
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js"></script>
4+
<style>
5+
:root {
6+
--glue-red: #eb1c24;
7+
}
8+
9+
body {
10+
margin: 0;
11+
background-color: black;
12+
}
13+
14+
model-viewer {
15+
width: 100%;
16+
height: 100%;
17+
}
18+
19+
/* This keeps child nodes hidden while the element loads */
20+
:not(:defined) > * {
21+
display: none;
22+
}
23+
.ar-button {
24+
background-repeat: no-repeat;
25+
background-size: 20px 20px;
26+
background-position: 12px 50%;
27+
background-color: #f5c6c888;
28+
position: absolute;
29+
left: 50%;
30+
transform: translateX(-50%);
31+
bottom: 16px;
32+
padding: 0px 16px 0px 40px;
33+
font-family: Roboto Regular, Helvetica Neue, sans-serif;
34+
font-size: 60pt;
35+
font-weight: bold;
36+
color: var(--glue-red);
37+
height: 200px;
38+
width: max(300px, 80%);
39+
border-radius: 18px;
40+
border: 5px solid var(--glue-red);
41+
display: flex;
42+
flex-direction: row;
43+
justify-content: center;
44+
align-items: center;
45+
gap: 10px;
46+
}
47+
.ar-button:active {
48+
background-color: #E8EAED;
49+
}
50+
.ar-button:focus {
51+
outline: none;
52+
}
53+
.ar-button:focus-visible {
54+
outline: 1px solid #1f5ef1;
55+
}
56+
.info {
57+
display: block;
58+
position: absolute;
59+
font-family: Futura, Helvetica Neue, sans-serif;
60+
color: rgba(0, 0, 0, 0.8);
61+
font-weight: 700;
62+
font-size: 18px;
63+
max-width: 128px;
64+
padding: 0.5em 1em;
65+
background: #ddd;
66+
border-radius: 4px;
67+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
68+
left: calc(100% + 1em);
69+
top: 50%;
70+
}
71+
72+
h3 {
73+
color: white;
74+
}
75+
76+
#layer-controls {
77+
position: relative;
78+
top: 20px;
79+
left: 20px;
80+
width: fit-content;
81+
display: flex;
82+
flex-direction: column;
83+
align-items: center;
84+
border: 2px solid white;
85+
border-radius: 5px;
86+
background-color: transparent;
87+
}
88+
89+
#layer-controls button {
90+
width: 100%;
91+
}
92+
93+
94+
</style>
95+
</head>
96+
<body>
97+
<model-viewer
98+
src="pertau_controls_test.glb"
99+
camera-orbit="0.9677rad 1.2427rad auto"
100+
shadow-intensity="1"
101+
ar
102+
ar-modes="webxr quick-look"
103+
camera-controls
104+
alt="None"
105+
>
106+
<button slot="ar-button" class="ar-button">
107+
View in AR
108+
</button>
109+
<div class="controls" id="layer-controls">
110+
<h3>Toggle Layers</h3>
111+
<button data-color="#b4b6b2" data-layer="0" data-meshes="0,1,2,3,4,5,6">3Ddust_Leike</button>
112+
<button data-color="#1f7a17" data-layer="1" data-meshes="7">Tau_Ring_3d_model</button>
113+
<button data-color="#bd1d29" data-layer="2" data-meshes="8">3d_perseus_mask</button>
114+
<button data-color="#2f8bf0" data-layer="3" data-meshes="9">3d_taurus_mask</button>
115+
<button data-color="#2ee815" data-layer="4" data-meshes="10">Bialy2021_ApJL_919_L5_MW3D[HDU1]</button>
116+
</div>
117+
</model-viewer>
118+
<script>
119+
function updateButtonStyle(button, on, color) {
120+
button.style.color = on ? color : "black";
121+
button.style.border = on ? `1px solid ${color}` : "none";
122+
button.style.borderRadius = "2px";
123+
}
124+
125+
function parseCommaSeparatedIndices(string) {
126+
return string.split(",").map(Number);
127+
}
128+
129+
function toggleMeshVisibility(modelViewer, meshIndex) {
130+
const mesh = getMesh(modelViewer, meshIndex);
131+
mesh.visible = !mesh.visible;
132+
forceUpdate(modelViewer);
133+
}
134+
135+
function getMesh(modelViewer, meshIndex) {
136+
const symbol = Object.getOwnPropertySymbols(modelViewer.model).find(sym => sym.description === "hierarchy");
137+
const meshObject = modelViewer.model[symbol].find(m => m.name === `mesh_${meshIndex}`);
138+
return meshObject.mesh;
139+
}
140+
141+
// This is a bit of a hack
142+
// We just need to do an "update" that will make model-viewer redraw the scene
143+
function forceUpdate(modelViewer) {
144+
modelViewer.model.materials[0].pbrMetallicRoughness.setBaseColorFactor(
145+
modelViewer.model.materials[0].pbrMetallicRoughness.baseColorFactor
146+
);
147+
}
148+
149+
const modelViewer = document.querySelector("model-viewer");
150+
modelViewer.addEventListener("load", (_event) => {
151+
const layerControls = document.querySelector("#layer-controls");
152+
const buttons = [...layerControls.querySelectorAll("button")];
153+
buttons.forEach((button) => updateButtonStyle(button, true, button.dataset.color));
154+
155+
const layersOn = buttons.map(_ => true);
156+
layerControls.addEventListener("click", (event) => {
157+
const dataset = event.target.dataset;
158+
const meshesString = dataset.meshes;
159+
const meshIndices = parseCommaSeparatedIndices(meshesString);
160+
const layerIndex = Number(dataset.layer);
161+
162+
layersOn[layerIndex] = !layersOn[layerIndex];
163+
meshIndices.forEach(meshIndex => toggleMeshVisibility(modelViewer, meshIndex));
164+
updateButtonStyle(buttons[layerIndex], layersOn[layerIndex], dataset.color);
165+
});
166+
});
167+
168+
</script>
169+
</body>
170+
</html>
171+

0 commit comments

Comments
 (0)