-
Notifications
You must be signed in to change notification settings - Fork 70
/
video-texture.html
104 lines (72 loc) · 1.96 KB
/
video-texture.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
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
<title>A-Frame - Video Texture</title>
<script src="js/aframe-master-v1.3.0.min.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('video-controls', {
init: function()
{
let video = document.querySelector("#video");
let videoDisplay = document.querySelector("#video-display");
let videoBorder = document.querySelector("#video-border");
let videoMesh = videoDisplay.getObject3D("mesh");
let borderMesh = videoBorder.getObject3D("mesh");
videoBorder.addEventListener("mousedown", function(event)
{
if ( video.paused )
{
video.play();
borderMesh.material.color.set("#004400");
}
else
{
video.pause();
borderMesh.material.color.set("#440000");
}
});
}
});
</script>
<a-scene>
<a-assets timeout="10000">
<img id="grid" src="images/border.png" crossorigin="anonymous" />
<img id="sky" src="images/stars.jpg" crossorigin="anonymous" />
<video id="video" loop="true" src="video/sintel.mp4" autoplay></video>
</a-assets>
<a-entity movement-controls="speed: 0.1; fly: false;" position="0 0 0">
<a-entity camera position="0 1.5 1" look-controls></a-entity>
<a-entity id="leftHand" laser-controls="hand: left" raycaster="" line="color: #FF00FF"></a-entity>
<a-entity id="rightHand" laser-controls="hand: right" raycaster="" line="color: #FFFF00"></a-entity>
</a-entity>
<a-sky
rotation = "0 0 0"
color = "#FFFFFF"
material = "src: #sky">
</a-sky>
<a-plane
width="100" height="100"
position=" 0.00 0.00 0.00"
rotation="-90 0 0"
color="#888888"
material="src: #grid; repeat:100 100; transparent: true; opacity: 0.75"
shadow="cast: false; receive: true">
</a-plane>
<a-plane
id = "video-border"
width = "17" height = "10"
position = "0 5 -20"
color = "#440000"
video-controls>
<a-video
id = "video-display"
width="16" height="9"
position="0 0 0.1"
src="#video">
</a-video>
</a-plane>
</a-scene>
</body>
</html>