-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
33 lines (29 loc) · 1.47 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Three.js in Paint Worklet Test</title>
<link rel="stylesheet" href="style.css">
<meta name="description" content="Three.js ported to run in a Paint Worklet!">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@lady_ada_king">
<meta name="twitter:title" content="Houdini Paint Three.js">
<meta name="twitter:description" content="Three.js ported to run in a Paint Worklet!">
<meta name="twitter:image" content="https://ada.is/three-paint/preview.jpg?1">
</head>
<body>
<script>
CSS.paintWorklet.addModule('./dist/bundle.js');
document.addEventListener('mousemove', function (e) {
document.body.style.setProperty('--rotate-y', 30 * ((e.screenX / document.body.clientWidth) - 0.5))
document.body.style.setProperty('--rotate-x', 30 * ((e.screenY / document.body.clientHeight) - 0.5))
});
</script>
<div>
<p>Three.js in a Paint Worklet Demo Source: <a href="https://github.com/adarosecannon/three-paint">Three Paint on Github</a>. <img src="https://adalytics-live.glitch.me/counter.png?color=black" alt="" style="vertical-align: bottom;" aria-hidden="true" height="16">
<br />© MIT License, Ada Rose Cannon 2018.</p>
</div>
</body>
</html>