-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhq.html
73 lines (65 loc) · 2.38 KB
/
hq.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
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- <script type="text/javascript" src="./dist/main.js"></script> -->
<!-- <script type="text/javascript" src="/node_modules/littlstar-axis/dist/axis.js"></script> -->
<script type="text/javascript" src="./node_modules/aframe/dist/aframe.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var player = document.getElementById('scene');
var video = document.getElementById('video');
//video.volume = 0;
var audioContext = new AudioContext();
var audio = document.getElementById("audio");
var title = document.getElementById("title");
// title.geometry.height = 4;
// title.geometry.width = 4;
//console.log(player.attrbute(rotation));
//console.log("rotation",player.getAttribute(rotation));
player.camera.rotation.onChangeCallback(function(e){
console.log(e);
});
var source = audioContext.createMediaElementSource(video);
var splitter = audioContext.createChannelSplitter(2);
var leftGain = audioContext.createGain();
var rightGain = audioContext.createGain();
source.connect(splitter);
splitter.connect(leftGain, 0);
splitter.connect(rightGain, 1);
leftGain.connect(audioContext.destination);
rightGain.connect(audioContext.destination);
function render(){
var pos = player.camera.getWorldDirection().x;
var lGain = (-pos + 1.0)/2.0;
var rGain = (pos + 1.0)/2.0;
//console.log(lGain, rGain);
leftGain.gain.value = lGain;
rightGain.gain.value = rGain;
//console.log("WROKINGAAAAA");
//console.log("rotation",player.getAttribute("rotation").y);
//console.log(player.rotation);
//console.log("rotation",player.setAttribute("rotation", {x:0,y:0,z:0}));
window.requestAnimationFrame(render);
}
render();
// setTimeout(function(){
// console.log("PLAYING");
// //audio.play();
// video.play();
// },2000);
}
</script>
<!-- <audio src="./assets/audio.wav" id="audio" loop></audio> -->
<a-scene id="scene">
<a-assets>
<video id="video" src="./assets/main2.mp4" autoplay="true" webkit-playsinline loop></video>
<img id="title-image" src="./assets/title.png">
</a-assets>
<a-image id="title" src="#title-image" width="16" height="10"></a-image>
<a-videosphere src="#video" rotation="0 180 0" id="sphere"></a-videosphere>
</a-scene>
</body>
</html>