-
Notifications
You must be signed in to change notification settings - Fork 67
/
canvas.html
77 lines (60 loc) · 1.58 KB
/
canvas.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
69
70
71
72
73
74
75
76
77
<!doctype HTML>
<html>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script src="js/aframe.min.js"></script>
<script src="js/aframe-ar.js"></script>
<body style="margin: 0px; overflow: hidden;">
<script>
// attach this component to the up
AFRAME.registerComponent('canvas-texture', {
init: function()
{
this.canvas = document.querySelector("#myCanvas");
this.canvas.width = 512;
this.canvas.height = 512;
this.context = this.canvas.getContext('2d');
this.x = 200;
this.y = 100;
this.dx = 5;
this.dy = 3;
},
tick: function(t, dt)
{
this.x += this.dx;
this.y += this.dy;
let w = 50;
let h = 50;
if (this.x > 512-w || this.x < 0)
this.dx *= -1;
if (this.y > 512-h || this.y < 0)
this.dy *= -1;
// clear canvas
this.context.fillStyle = "#8888FF";
this.context.fillRect(0,0, 512,512);
// draw rectangle
this.context.fillStyle = "#FF0000";
this.context.fillRect( this.x, this.y, w, h );
// signal that image data needs to be updated
let material = this.el.getObject3D("mesh").material;
if (!material.map)
return;
else
material.map.needsUpdate = true;
}
});
</script>
<a-scene embedded vr-mode-ui="enabled: false;" arjs="debugUIEnabled: false;">
<a-assets>
<canvas id="myCanvas"></canvas>
</a-assets>
<a-marker type="pattern" url="data/kanji.patt">
<a-box
position="0 0.5 0"
material="src: #myCanvas; transparent: true; opacity: 0.95;"
canvas-texture>
</a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>