mmelodies
/
mmelodies
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Uses three.js again

This commit is contained in:
Bailey Stevens 2023-10-04 20:32:18 -04:00
parent 47fd696e6f
commit 1314800b25
1 changed files with 22 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/controller/controller.ts
View File

@ -101,25 +101,28 @@ if (window.AbsoluteOrientationSensor) {
});
// Create a renderer
const sceneSize = new THREE.Vector3(100, 100, 0);
const sceneSize = new THREE.Vector3(100, 100, 100);
const renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setSize(sceneSize.x, sceneSize.y);
renderer.setPixelRatio(window.devicePixelRatio / 2.5);
const scene = new THREE.Scene();
const axes = new THREE.AxesHelper(5);
scene.add(axes);
const camera = new THREE.PerspectiveCamera(75, sceneSize.x/sceneSize.y, 0.1, 1000);
camera.translateOnAxis(scene.up.clone(), 2);
camera.lookAt(axes.position);
const canvas = document.createElement("canvas");
canvas.width = sceneSize.x;
canvas.height = sceneSize.y;
// Get the checkbox element
const gyroBox = document.getElementById("gyroBox");
const checkbox = document.getElementById('gyro') as HTMLInputElement;
(gyroBox || document.body).appendChild(canvas);
(gyroBox || document.body).appendChild(renderer.domElement);
gyroBox?.hidden == false;
const canvasCtx = canvas.getContext("2d");
// Create an arrow
const length = 0.5;
const origin = new THREE.Vector3(0.5, 0.5, 0);
const up = new THREE.Vector3(0, 0, 1);
// Profiling
let sampleCount = 0; // Number of frames since the last second
@ -134,39 +137,29 @@ if (window.AbsoluteOrientationSensor) {
let currentDirection: THREE.Vector3 | null;
let relativeDirection: THREE.Vector3 | null;
const render = (direction: THREE.Vector3 | null) => {
if (!canvasCtx) {
return;
}
const render = (direction: THREE.Quaternion | null) => {
if (!direction) {
direction = up.clone();
direction = new THREE.Quaternion().identity();
}
const line = direction.clone().normalize().multiplyScalar(length).multiply(sceneSize);
const startpoint = origin.clone().multiply(sceneSize);
const endpoint = startpoint.clone().add(line);
canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
axes.setRotationFromQuaternion(direction);
canvasCtx.beginPath();
canvasCtx.moveTo(startpoint.x, startpoint.y);
canvasCtx.lineTo(endpoint.x, endpoint.y);
canvasCtx.stroke();
const debugBox = document.getElementById("debugData");
if (debugBox) debugBox.textContent = radToDeg(up.angleTo(direction)).toPrecision(3);
renderer.render(scene, camera);
}
// Add an event listener for sensor readings
sensor.addEventListener('reading', () => {
// Apply the sensor's quaternion to the vector
let orientation = new THREE.Quaternion(...sensor.quaternion).normalize();
const orientation = new THREE.Quaternion(...sensor.quaternion).normalize();
// Set the initial orientation if it's not set already
currentDirection = up.clone().applyQuaternion(orientation);
currentDirection = scene.up.clone().applyQuaternion(orientation);
if (!calibratedDirection) {
calibratedDirection = currentDirection;
console.log("cal", calibratedDirection);
}
relativeDirection = calibratedDirection.clone().sub(currentDirection);
render(relativeDirection);
relativeDirection = calibratedDirection.clone().sub(currentDirection).normalize();
const relativeOrientation = new THREE.Quaternion().setFromUnitVectors(calibratedDirection, currentDirection);
render(relativeOrientation);
// Profiling
let currTime = new Date().getTime();
if (sampleSec < currTime - 1000) {