-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
77 lines (75 loc) · 3.27 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
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
<html>
<head>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script><!-- Upgraded from version 4 -->
<script src="https://mannymeadows.github.io/Noosa/aframe-extras.js"></script> <!-- physics & 1st person controls component -->
<script src="https://cdn.rawgit.com/tizzle/aframe-orbit-controls-component/master/dist/aframe-orbit-controls-component.min.js"></script>
<script src="https://cdn.rawgit.com/tizzle/aframe-sprite-component/master/dist/aframe-sprite-component.min.js"></script>
<script>
AFRAME.registerComponent('camera-switch', {
init: function () {
var firstEl = document.querySelector('#first');
var secondEl = document.querySelector('#second');
var sceneEl = document.querySelector('a-scene');
var firstCameraEl = sceneEl.querySelector('#first-camera');
var secondCameraEl = sceneEl.querySelector('#second-camera');
firstCameraEl.setAttribute('camera', 'active', true);
secondEl.addEventListener('click', function () {
secondCameraEl.setAttribute('camera', 'active', true);
}
);
firstEl.addEventListener('click', function () {
firstCameraEl.setAttribute('camera', 'active', true);
}
);
}
});
</script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="container">
<a href="#first-camera" id="first">Walk</a>
<a href="#second-camera" id="second">Orbit</a>
</div>
<body>
<a-scene physics camera-switch>
<a-assets>
<a-asset-item id="walls-dae" src="https://mannymeadows.github.io/Noosa/models/Noosa-walls.DAE"></a-asset-item>
<img id="floor" src="https://mannymeadows.github.io/Noosa/models/Seamless marble texture.jpg">
<img id="sprite" src="https://mannymeadows.github.io/Noosa/models/one-finger-icon.png">
</a-assets>
<!-- Camera 1 -->
<a-entity camera look-controls universal-controls="rotationControls: custom, mouse; movementAcceleration: 20;"
universal-controls="pointerlockEnabled" kinematic-body position="2 1.6 2" rotation="0 90 0" id="first-camera">
<a-entity cursor
position="0 0 -0.2"
geometry="primitive: sphere; radius: 0.005"
material="color: white; shader: flat; opacity: 0.2">
</a-entity>
</a-entity>
<a-entity
id="second-camera"
camera="fov:30"
position="0 0 5"
orbit-controls="
target: #target;
enablePan: true;
enableDamping: true;
dampingFactor: 0.125;
rotateSpeed:0.1;
minDistance:15;
maxDistance:45;
minPolarAngle:0.7;
maxPolarAngle:1.5;
zoomSpeed:0.5"
mouse-cursor="">
</a-entity>
<!-- Floor -->
<a-plane rotation="-90 180 0" position="0 -0.05 0" width="15" height="15" material="src: #floor; repeat: 20 20" static-body>
</a-plane>
<!-- Wall collider -->
<a-box color="green" id="target">
</a-box>
<a-sprite position="0 1 0" resize="0.5 0.5 0.5" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/867169/one-finger-icon.png">
</a-sprite>
</a-scene>
</body>