-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsource_code_dump.txt
268 lines (220 loc) · 8.5 KB
/
source_code_dump.txt
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
// .github/workflows/static.yml
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages
on:
# Runs on pushes targeting the default branch
push:
branches: ["main"]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
# Single deploy job since we're just deploying
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v2
with:
# Upload entire repository
path: '.'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2
// .spitignore
dist/
node_modules/
// index.html
<!DOCTYPE html>
<html>
<head>
<title>Location-based AR.js with three.js</title>
<script type='module' src='dist/bundle.js'></script>
</head>
<body>
<canvas id='canvas1' style='background-color: black; width: 100%; height: 100%'></canvas>
</body>
</html>
// index.js
import * as THREE from "three";
import * as THREEx from "./node_modules/@ar-js-org/ar.js/three.js/build/ar-threex-location-only.js";
function main() {
const canvas = document.getElementById("canvas1");
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, 1.33, 0.1, 10000);
const renderer = new THREE.WebGLRenderer({ canvas: canvas });
const arjs = new THREEx.LocationBased(scene, camera);
const cam = new THREEx.WebcamRenderer(renderer);
const geom = new THREE.BoxGeometry(20, 20, 20);
const mtl = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const box = new THREE.Mesh(geom, mtl);
arjs.add(box, -0.72, 51.051);
arjs.fakeGps(-0.72, 51.05);
requestAnimationFrame(render);
function render() {
if (canvas.width != canvas.clientWidth || canvas.height != canvas.clientHeight) {
renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
const aspect = canvas.clientWidth / canvas.clientHeight;
camera.aspect = aspect;
camera.updateProjectionMatrix();
}
cam.update();
const rotationStep = THREE.Math.degToRad(2);
let mousedown = false,
lastX = 0;
window.addEventListener("mousedown", (e) => {
mousedown = true;
});
window.addEventListener("mouseup", (e) => {
mousedown = false;
});
window.addEventListener("mousemove", (e) => {
if (!mousedown) return;
if (e.clientX < lastX) {
camera.rotation.y -= rotationStep;
if (camera.rotation.y < 0) {
camera.rotation.y += 2 * Math.PI;
}
} else if (e.clientX > lastX) {
camera.rotation.y += rotationStep;
if (camera.rotation.y > 2 * Math.PI) {
camera.rotation.y -= 2 * Math.PI;
}
}
lastX = e.clientX;
});
renderer.render(scene, camera);
requestAnimationFrame(render);
}
}
main();
// package.json
{
"name": "js_ar_sample",
"version": "1.0.0",
"description": "",
"main": "script.js",
"dependencies": {
"@ar-js-org/ar.js": "3.4.2",
"three": "^0.154.0"
},
"devDependencies": {
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0"
},
"scripts": {
"build": "npx webpack"
},
"keywords": [],
"author": "",
"license": "ISC"
}
// script.js
document.addEventListener('DOMContentLoaded', function () {
const scene = document.querySelector('a-scene');
const overlayInfo = document.getElementById('overlay-info');
let arrowsAdded = false;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
// Get user's latitude, longitude, and altitude
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const altitude = position.coords.altitude;
// Update user location in overlay
document.getElementById('user-location').innerText = `User Location: Alt ${altitude}, Lat ${latitude}, Lng ${longitude}`;
// Create and position the cube using three.js
const cube = new THREE.Mesh(
new THREE.BoxGeometry(50, 50, 50),
new THREE.MeshBasicMaterial({ color: 0xFF6347 })
);
const userPosition = new THREE.Vector3(longitude, altitude, -latitude);
const offsetDistance = 2;
const offsetVector = new THREE.Vector3(offsetDistance, 0, 0);
const cubePosition = userPosition.clone().add(offsetVector);
cube.position.set(cubePosition.x, 0, cubePosition.z);
scene.object3D.add(cube);
// Update box location in overlay
document.getElementById('box-location').innerText = `Box Location: Alt ${altitude}, Lat ${latitude}, Lng ${longitude} + ${offsetDistance} meters east`;
// Calculate azimuth (bearing) angle between user's location and the cube
const azimuth = calculateAzimuth(latitude, longitude, cubePosition.x, cubePosition.z);
document.getElementById('azimuth-angle').innerText = `Azimuth Angle: ${azimuth?.toFixed(2)} degrees`;
// Get device orientation (alpha value)
window.addEventListener('deviceorientation', function (event) {
const alpha = event.alpha;
// Update device direction in overlay
document.getElementById('device-direction').innerText = `Device Direction: ${alpha?.toFixed(2)} degrees`;
// Add arrows only once after deviceorientation event starts
if (!arrowsAdded) {
addArrows(alpha, azimuth);
arrowsAdded = true;
}
});
},
function (error) {
console.error('Error getting user location:', error);
}
);
} else {
console.error('Geolocation is not supported in this browser.');
}
});
// Function to add arrows
function addArrows(deviceOrientation, azimuth) {
const scene = document.querySelector('a-scene');
// Calculate rotation angle of arrows to align with cube's azimuth angle
const rotationAngle = azimuth - deviceOrientation;
const arrowLength = 0.5; // Adjust the length of the arrows as needed
// Create arrow geometry
const arrowGeometry = new THREE.ConeGeometry(0.1, arrowLength, 8, 1);
const arrowMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // Green arrows
const arrowMesh = new THREE.Mesh(arrowGeometry, arrowMaterial);
// Position and rotate the arrows
arrowMesh.position.set(0, 0, -arrowLength / 2);
arrowMesh.rotation.x = -Math.PI / 2; // Pointing upwards
// Apply rotation based on azimuth and deviceOrientation
arrowMesh.rotation.y = (rotationAngle * Math.PI) / 180;
// Add the arrows to the scene
scene.object3D.add(arrowMesh);
}
// Function to calculate the azimuth angle between two coordinates
function calculateAzimuth(lat1, lon1, lat2, lon2) {
const phi1 = (lat1 * Math.PI) / 180;
const phi2 = (lat2 * Math.PI) / 180;
const deltaLambda = ((lon2 - lon1) * Math.PI) / 180;
const y = Math.sin(deltaLambda) * Math.cos(phi2);
const x = Math.cos(phi1) * Math.sin(phi2) - Math.sin(phi1) * Math.cos(phi2) * Math.cos(deltaLambda);
let angle = Math.atan2(y, x);
angle = (angle * 180) / Math.PI;
angle = (angle + 360) % 360; // Normalize to positive angles
return angle;
}
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
optimization: {
minimize: false
}
};