-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·130 lines (120 loc) · 8.85 KB
/
Copy pathindex.html
File metadata and controls
executable file
·130 lines (120 loc) · 8.85 KB
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CoronaEscape</title>
<meta name="description" content="CoronaEscape">
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.0/dist/aframe-extras.min.js"></script>
<!-- <script src="https://rawgit.com/aframevr/aframe/c4aa63e/dist/aframe-master.min.js"></script> -->
<script src="https://unpkg.com/aframe-environment-component@1.0.0/dist/aframe-environment-component.min.js"></script>
<script src="js/aframe-super-keyboard.min.js"></script>
<script src="js/keypad.js"></script>
<script src="js/realchair.js"></script>
<script src="js/sanitizer.js"></script>
<script src="js/closedbook.js"></script>
<script src="js/openbook.js"></script>
<script src="js/locker.js"></script>
<script src="js/mask.js"></script>
<script src="js/character.js"></script>
<script src="js/floor.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v4.0.1/dist/aframe-physics-system.min.js"></script>
</head>
<body>
<a-scene cursor="rayOrigin:mouse" background="color: #ECECEC" physics="debug: false; gravity: -9.81" raycaster="objects: .link" gltf-model="dracoDecoderPath: https://cdn.jsdelivr.net/gh/jaydhulia/blueprint-cdc-static@master/draco/;">
<a-box static-body="shape: auto" position="0 -0.52 0" rotation="90 0 0" width="20" height="10" depth="1" floor></a-box>
<a-box static-body="shape: auto" position="0 0.5 -4.5" width="10" height="5" depth="1" floor></a-box>
<a-box static-body="shape: auto" position="0 0.5 4.5" width="10" height="5" depth="1" floor></a-box>
<a-box static-body="shape: auto" position="-5.1 0.5 0" rotation="0 90 0" width="10" height="5" depth="1" floor></a-box>
<a-box static-body="shape: auto" position="4.5 0.5 0" rotation="0 90 0" width="10" height="5" depth="1" floor></a-box>
<a-box static-body="shape: auto" position="0 4 0" rotation="90 0 0" width="20" height="10" depth="1" color="white" floor></a-box>
<a-assets timeout="50000">
<a-asset-item id="house-gltf" src="./apartment-living-room-obj/apartment-living-room.glb"></a-asset-item>
<a-asset-item id="chair-gltf" src="./models/armchair.gltf"></a-asset-item>
</a-assets>
<a-entity gltf-model="#house-gltf" modify-materials></a-entity>
<a-entity id="colored-text" position="0 2 -3.5"
animation="property: components.text.material.uniforms.color.value; type: color; to: red; dir: alternate; loop: true"
text="color: white; align: center; value: Maintain Social Distance!; width: 4">
</a-entity>
<a-entity id="book-popup-container" visible="false">
<a-text value="Wear a mask to talk to people!" position="0 0.5 0" rotation="-90 180 0" align="center" side="double"></a-text>
</a-entity>
<a-entity id="person-popup-container" visible="false">
<a-text value="The code is 26843!" color="#BBB" position="1.5 2 1.5" rotation="0 225 0" align="center" side="double"></a-text>
</a-entity>
<a-entity id="keypad-popup-container" visible="true">
<a-entity
id="keyboard-display"
position="-3.5 1.2 0"
rotation="0 90 0"
scale="3 3 3"
super-keyboard="hand: #mouseCursor; imagePath:./img/; multipleInputs:true; filters: numbers; model: numpad; align: center; maxLength: 5"
my_keyboard_controller
passfilter>
</a-entity>
<a-entity id="hand" laser-controls="hand: right">
<a-sphere radius="0.01"></a-sphere>
</a-entity>
</a-entity>
<a-entity id="camera" position="0 1.8 -0.75">
<a-entity id="camera" camera camera-floor></a-entity>
</a-entity>
<!-- <a-entity id="river" geometry="primitive: plane" material="color: blue"
position="2.3 1.7 2.3" sound="src: url(./sounds/cough1.mp3); refDistance: 0.5; rollOffFactor: 1000; autoplay: true; loop: true"></a-entity> -->
</a-scene>
<script>
// get this data json below from backend
// Mask model GLTF credit: by Chandan Dharwal
var jsonDataArr = [
'{"objType": "realchair", "src": "./models/armchair.gltf", "jsonData":{"width": "1", "height": "2", "depth": "1", "color": "orange", "x": "2", "y": "0", "z": "-3", "scaleX": "0.00045", "scaleY": "0.00045", "scaleZ": "0.00045", "rotateX": "0", "rotateY": "0", "rotateZ": "0"}}',
'{"objType": "realchair", "src": "./models/armchair.gltf", "jsonData":{"width": "1", "height": "2", "depth": "1", "color": "blue", "x": "1", "y": "0", "z": "-3", "scaleX": "0.00045", "scaleY": "0.00045", "scaleZ": "0.00045", "rotateX": "0", "rotateY": "0", "rotateZ": "0"}}',
'{"objType": "sanitizer", "src": "./models/sanitizer.gltf", "jsonData":{"width": "1", "height": "2", "depth": "1", "color": "green", "x": "-3.75", "y": "1.5", "z": "-2.5", "scaleX": "0.05", "scaleY": "0.05", "scaleZ": "0.05", "rotateX": "-90", "rotateY": "90", "rotateZ": "0"}}',
'{"objType": "closedbook", "src": "./models/closed_book/scene.gltf", "jsonData":{"width": "1", "height": "2", "depth": "1", "color": "green", "x": "0", "y": "0.70", "z": "0.5", "scaleX": "0.25", "scaleY": "0.25", "scaleZ": "0.25", "rotateX": "0", "rotateY": "90", "rotateZ": "90"}}',
'{"objType": "openbook", "src": "./models/open_book/scene.gltf", "jsonData":{"width": "1", "height": "2", "depth": "1", "color": "green", "x": "0", "y": "0.70", "z": "0.5", "scaleX": "0.001", "scaleY": "0.001", "scaleZ": "0.001", "rotateX": "-90", "rotateY": "0", "rotateZ": "0"}}',
'{"objType": "locker", "src": "./models/locker/scene.gltf", "jsonData":{"width": "1", "height": "2", "depth": "1", "color": "green", "x": "-4.6", "y": "-0.2", "z": "-1.5", "scaleX": "0.015", "scaleY": "0.017", "scaleZ": "0.015", "rotateX": "0", "rotateY": "78", "rotateZ": "0"}}',
'{"objType": "mask", "src": "./models/discarded_covid-19_mask/updated-mask/medical_mask333.gltf", "jsonData":{"width": "1", "height": "2", "depth": "1", "color": "green", "x": "-1.623", "y": "0.755", "z": "2.678", "scaleX": "0.04", "scaleY": "0.04", "scaleZ": "0.04", "rotateX": "0", "rotateY": "90", "rotateZ": "-90"}}',
'{"objType": "character", "src": "./models/cyberpunk_character/scene.glb", "jsonData":{"width": "1", "height": "2", "depth": "1", "color": "green", "x": "2.448", "y": "0.005", "z": "2.697", "scaleX": "0.01", "scaleY": "0.01", "scaleZ": "0.01", "rotateX": "-90", "rotateY": "0", "rotateZ": "200"}}'
];
jsonDataArr.forEach(objCreate);
function objCreate(backendData, index) {
var backendDataParsed = JSON.parse(backendData);
var sceneEl = document.querySelector('a-scene');
var entityEl = document.createElement('a-entity');
entityEl.setAttribute('gltf-model', backendDataParsed.src);
entityEl.setAttribute(backendDataParsed.objType, 'jsonData', JSON.stringify(backendDataParsed.jsonData));
if(backendDataParsed.objType==="sanitizer"){
entityEl.classList.add("link");
}
sceneEl.appendChild(entityEl);
}
// renderFloor();
// // look-controls="pointerLockEnabled: true;" wasd-controls kinematic-body
// async function renderFloor(){
// // var sceneEl = document.querySelector('a-scene');
// // var floorEl = document.createElement('a-box');
// // floorEl.setAttribute('static-body','shape: auto');
// // floorEl.setAttribute("position", { x: 0, y: -0.52, z: 0 });
// // floorEl.setAttribute("rotation", { x: 90, y: 0, z: 0 });
// // floorEl.setAttribute("width", 20);
// // floorEl.setAttribute("height", 10);
// // floorEl.setAttribute("depth", 10);
// // sceneEl.appendChild(floorEl);
// await new Promise(r => setTimeout(r, 1500));
// var playerEl = document.querySelector('[camera]');
// playerEl.setAttribute('look-controls', 'pointerLockEnabled: true');
// playerEl.setAttribute('wasd-controls', '');
// playerEl.setAttribute('kinematic-body', '');
// }
// var playerEl = document.querySelector('[camera]');
// playerEl.addEventListener('collide', function (e) {
// console.log('Player has collided with body #' + e.detail.body.id);
// console.log(e.detail.target.el.object3D.position);
// // e.detail.target.el.setAttribute('position', {"x": e.detail.target.el.object3D.position.x, "y": 0, "z": e.detail.target.el.object3D.position.z});
// e.detail.body.el; // Other entity, which playerEl touched.
// e.detail.contact; // Stats about the collision (CANNON.ContactEquation).
// e.detail.contact.ni; // Normal (direction) of the collision (CANNON.Vec3).
// });
</script>
</body>
</html>