-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
85 lines (82 loc) · 3.2 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
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
<head>
<meta
name="viewport"
content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
/>
</head>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script>
<script src="./dist/bundle.js"></script>
<body style="margin: 0px; overflow: hidden">
<a-scene
cursor="rayOrigin: mouse; fuse: true; fuseTimeout: 0;"
raycaster="objects: [mccreehandler];"
vr-mode-ui="enabled: false"
embedded
arjs="sourceType: webcam; debugUIEnabled: false;"
>
>
<a-assets>
<a-asset-item
id="mccree--asset"
src="src/assets/mccree.gltf"
></a-asset-item>
<img id="overwatch-logo" src="src/assets/overwatch-logo.png" />
<img id="mccree-spinner" src="src/assets/mccree-base-spinner.png" />
<audio id="audio-high-noon" src="src/assets/itshighnoon.mp3"></audio>
</a-assets>
<a-marker
id="mccree--marker"
type="pattern"
url="src/patterns/pattern-01.patt"
>
<a-plane
id="mccree-base-spinner"
position="0 -0.01 0"
rotation="-90 0 0"
scale="0.25 0.25 0.25"
material="src: #mccree-spinner; transparent: true; alpha-test:0.9"
animation__rotation="property: rotation; startEvents: startAnimation; from: -90 0 0; to:-90 0 270; dur: 2500; easing: easeOutQuad;"
animation__scale="property: scale; startEvents: startAnimation; from: 0.45 0.45 0.45; to: 3.5 3.5 3.5; dur: 1000; easing: easeOutQuad"
animation__opacity="property: opacity; startEvents: startAnimation; delay: 3000; from: 1; to: 0; dur: 1000"
animation__scaleReset="property: scale; startEvents: startAnimation; delay: 4000; to: 0.45 0.45 0.45; dur: 1;"
animation__opacityReset="property: opacity; startEvents: startAnimation; delay: 4010; from: 0; to: 1; dur: 1"
></a-plane>
<a-entity
id="particle-system"
position="0 0.25 -0.25"
scale="2 2 2"
particle-system="
texture: src/assets/overwatch-logo.png;
type:3;
color: #ffffff, #ffffff;
size: 1;
positionSpread: 0 0 0;
rotationAxis:y;
velocityValue: 0 2.5 0;
velocitySpread: 0 .75 0;
accelerationValue: 0 -1 0;
accelerationSpread: 1 0 1;
rotationAngle: 0;
blending: 1;
particleCount: 10;
maxAge: 1.5;
enabled: false;"
>
</a-entity>
<a-entity
id="mccree--model"
position="0 0 0"
scale="1 1 1"
gltf-model="#mccree--asset"
mccreehandler
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>