-
Notifications
You must be signed in to change notification settings - Fork 789
/
iframe.html
68 lines (65 loc) · 1.87 KB
/
iframe.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html>
<head>
<style>
#controls {
position: absolute;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
bottom: 0;
left: 0;
width: 100%;
height: 64px;
}
button {
font-size: 2em;
margin: 0 0.25em;
}
</style>
</head>
<body>
<div id="controls">
<button data-color="1,0,0,1">Red</button>
<button data-color="0,1,0,1">Green</button>
<button data-color="0,0,1,1">Blue</button>
</div>
<script type="3DOM">
console.log('Hello from the 3DOM worker!');
self.addEventListener('model-change', (event) => {
const {model} = event;
const [material] = model.materials;
console.log('model-change received in the 3DOM worker!');
self.addEventListener('message', (event) => {
console.log('message from the main thread: ' + event.data);
switch(event.data.action) {
case 'change-color':
console.log('Changing color to:', event.data.payload);
material.pbrMetallicRoughness.setBaseColorFactor(event.data.payload);
break;
}
});
});
</script>
<script type="module" src="iframe.js"></script>
<script type="module">
function threeDOMReady(e) {
window.removeEventListener('3domready', threeDOMReady);
const executionContext = e.detail.executionContext;
document.querySelector('#controls').addEventListener('click', (event) => {
const colorString = event.target.dataset.color;
if (!colorString) {
return;
}
const color = colorString.split(',')
.map(numberString => parseFloat(numberString));
executionContext.worker.postMessage({
action: 'change-color',
payload: color
});
});
}
window.addEventListener('3domready', threeDOMReady);
</script>
</body>
</html>