-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
86 lines (63 loc) · 4.01 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
86
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jBow</title>
<meta name="description" content="jBow">
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="components/aframe-motion-capture-components.v0.1.5.min.js"></script>
<script src="shaders/skyGradient.js"></script>
<script src="components/ground.js"></script>
<script src="components/aabb-collider.js"></script>
<script src="components/aframe-meshline-component.min.js"></script>
<script src="components/grab.js"></script>
<script src="components/bow-and-arrow.js"></script>
<script src="components/rotate-toward-velocity.js"></script>
<script src="components/poissondisc-forest.js"></script>
<script src="aframe-physics-system.v1.4.0.js"></script>
</head>
<body>
<a-scene id="scene" avatar-replayer="autoPlay: true; loop: true;" physics vr-mode-ui keyboard-shortcuts pool__arrow="mixin: arrowpool; size : 6;">
<!-- Asset Management System -->
<a-assets>
<a-asset-item id="bow-obj" src="assets/models/sg-bow-2-obj/sg-bow-2-rotated-nostring.obj"></a-asset-item>
<a-asset-item id="bow-mtl" src="assets/models/sg-bow-2-obj/sg-bow-2-rotated-nostring.mtl"></a-asset-item>
<a-asset-item id="arrow-obj" src="assets/models/low-poly-arrow-obj/low-poly-arrow-rotated.obj"></a-asset-item>
<a-asset-item id="arrow-mtl" src="assets/models/low-poly-arrow-obj/low-poly-arrow.mtl"></a-asset-item>
<a-asset-item id="target-obj" src="assets/models/target/target.obj"></a-asset-item>
<a-asset-item id="target-mtl" src="assets/models/target/target.mtl"></a-asset-item>
<a-mixin id="arrowpool" dynamic-body="shape:box" scale="0.005 0.005 0.005" obj-model="obj: #arrow-obj; mtl: #arrow-mtl"></a-mixin>
<audio id="arrow_release" src="assets/sounds/arrow_release.mp3">
<audio id="arrow_impact" src="assets/sounds/arrow_impact.mp3">
<audio id="draw_string" src="assets/sounds/draw_string.mp3" >
</a-assets>
<!-- Sounds -->
<a-sound id="arrow_release_sound" src="#arrow_release" poolsize="4"></a-sound>
<a-sound id="arrow_impact_sound" src="#arrow_impact" poolsize="4"></a-sound>
<a-sound id="draw_string_sound" src="#draw_string" poolsize="4"></a-sound>
<!-- Camera -->
<a-entity camera look-controls></a-entity>
<!-- Environment -->
<a-entity id="sky" geometry="primitive: sphere; radius: 65;" material="shader: skyGradient; colorTop: #353449; colorBottom: #BC483E; side: back"></a-entity>
<a-entity ground position="4 0.1 5"></a-entity>
<a-plane color="#614126" static-body position="0 0 0" rotation="-90 0 0" width="1000" height="1000"></a-plane>
<!-- Lights-->
<a-entity light="type: point; color: #f4f4f4; intensity: 0.2; distance: 0" position="8 30 18"></a-entity>
<a-entity light="type: point; color: #f4f4f4; intensity: 0.6; distance: 0" position="-8 30 -18"></a-entity>
<a-entity light="type: ambient; color: #f4f4f4; intensity: 0.4;" position="-8 10 -18"></a-entity>
<!-- Bow and Arrow -->
<a-entity id="preShotArrow" obj-model="obj: #arrow-obj; mtl: #arrow-mtl"position="0 0 0 " scale="0.05 0.05 0.05" visible="false"></a-entity>
<a-entity id="bowContainer" bow-and-arrow position="-0.5 1 -0.5"></a-entity>
<!-- Hands -->
<a-entity id="leftHand" hand-controls="left" aabb-collider="objects:#bow;" grab></a-entity>
<a-entity id ="rightHand" hand-controls="right" aabb-collider="objects:#bow;" grab></a-entity>
<!-- Targets-->
<a-entity class="target" static-body scale="10 10 10" rotation="0 90 0" position = "0 2 -4" obj-model="obj: #target-obj; mtl: #target-mtl"></a-entity>
<a-entity class="target" static-body scale="10 10 10" rotation="0 90 0" position = "-2 2 -4" obj-model="obj: #target-obj; mtl: #target-mtl"></a-entity>
<a-entity class="target" static-body scale="10 10 10" rotation="0 90 0" position = "2 2 -4" obj-model="obj: #target-obj; mtl: #target-mtl"></a-entity>
<a-entity id="forest" poissondisc-forest></a-entity>
</a-scene>
<script>
</script>
</body>
</html>