vector logging
This commit is contained in:
parent
c97c8aaaed
commit
053400a206
GPG Key ID:
2D816A2DCA6E5649
|
|
@ -15,10 +15,12 @@
|
|||
"@babel/core": "^7.22.20",
|
||||
"@babel/preset-env": "^7.22.20",
|
||||
"@babel/preset-typescript": "^7.22.15",
|
||||
"@types/three": "^0.156.0",
|
||||
"babel-loader": "^9.1.3",
|
||||
"copy-webpack-plugin": "^11.0.0",
|
||||
"html-webpack-plugin": "^5.5.3",
|
||||
"protobufjs-loader": "^2.0.2",
|
||||
"three": "^0.157.0",
|
||||
"webpack": "^5.88.2",
|
||||
"webpack-cli": "^5.1.4",
|
||||
"webpack-dev-server": "^4.15.1",
|
||||
|
|
@ -2401,12 +2403,36 @@
|
|||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/stats.js": {
|
||||
"version": "0.17.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.1.tgz",
|
||||
"integrity": "sha512-OgfYE1x2w1jRUXzzKABX+kOdwz2y9PE0uSwnZabkWfJTWOzm7Pvfm4JI2xqRE0q2nwUe2jZLWcrcnhd9lQU63w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/three": {
|
||||
"version": "0.156.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/three/-/three-0.156.0.tgz",
|
||||
"integrity": "sha512-733bXDSRdlrxqOmQuOmfC1UBRuJ2pREPk8sWnx9MtIJEVDQMx8U0NQO5MVVaOrjzDPyLI+cFPim2X/ss9v0+LQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/stats.js": "*",
|
||||
"@types/webxr": "*",
|
||||
"fflate": "~0.6.10",
|
||||
"meshoptimizer": "~0.18.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/trusted-types": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.4.tgz",
|
||||
"integrity": "sha512-IDaobHimLQhjwsQ/NMwRVfa/yL7L/wriQPMhw1ZJall0KX6E1oxk29XMDeilW5qTIg5aoiqf5Udy8U/51aNoQQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/webxr": {
|
||||
"version": "0.5.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.5.tgz",
|
||||
"integrity": "sha512-HVOsSRTQYx3zpVl0c0FBmmmcY/60BkQLzVnpE9M1aG4f2Z0aKlBWfj4XZ2zr++XNBfkQWYcwhGlmuu44RJPDqg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/ws": {
|
||||
"version": "8.5.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.6.tgz",
|
||||
|
|
@ -4148,6 +4174,12 @@
|
|||
"node": ">=0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/fflate": {
|
||||
"version": "0.6.10",
|
||||
"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
|
||||
"integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/filelist": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
|
||||
|
|
@ -5743,6 +5775,12 @@
|
|||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/meshoptimizer": {
|
||||
"version": "0.18.1",
|
||||
"resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
|
||||
"integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/methods": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
|
||||
|
|
@ -7591,6 +7629,12 @@
|
|||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/three": {
|
||||
"version": "0.157.0",
|
||||
"resolved": "https://registry.npmjs.org/three/-/three-0.157.0.tgz",
|
||||
"integrity": "sha512-CeAwQrf4x3z0/e+MC4F+nXLW5t0gh3pw+L6CCBqpHvOq3bGYIgRYub7Pv0j/9wR+d++OiEglyZzWyuSYbwWGOA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/thunky": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
|
||||
|
|
|
|||
|
|
@ -16,10 +16,12 @@
|
|||
"@babel/core": "^7.22.20",
|
||||
"@babel/preset-env": "^7.22.20",
|
||||
"@babel/preset-typescript": "^7.22.15",
|
||||
"@types/three": "^0.156.0",
|
||||
"babel-loader": "^9.1.3",
|
||||
"copy-webpack-plugin": "^11.0.0",
|
||||
"html-webpack-plugin": "^5.5.3",
|
||||
"protobufjs-loader": "^2.0.2",
|
||||
"three": "^0.157.0",
|
||||
"webpack": "^5.88.2",
|
||||
"webpack-cli": "^5.1.4",
|
||||
"webpack-dev-server": "^4.15.1",
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import * as THREE from 'three';
|
||||
// @ts-ignore
|
||||
import { UpdateRequest, Update } from "/proto/mmelodies.proto";
|
||||
|
||||
const url = new URL("/api/controller", location.href);
|
||||
|
|
@ -25,7 +27,7 @@ sliders.forEach((slider, i) => {
|
|||
slider.addEventListener("input", function () {
|
||||
console.log(`Slider ${this.id} position: ${this.value}`);
|
||||
|
||||
const message = UpdateRequest.create({paramChanges: [{ id: i, value: this.value}]});
|
||||
const message = UpdateRequest.create({ paramChanges: [{ id: i, value: this.value }] });
|
||||
const buffer = UpdateRequest.encode(message).finish();
|
||||
|
||||
socket.send(buffer);
|
||||
|
|
@ -43,3 +45,74 @@ switches.forEach((switchElement) => {
|
|||
console.log(`Switch ${this.id} state: ${this.checked}`);
|
||||
});
|
||||
});
|
||||
|
||||
// Declare a global interface for the window object
|
||||
declare global {
|
||||
interface Window {
|
||||
AbsoluteOrientationSensor: any;
|
||||
}
|
||||
}
|
||||
|
||||
if (window.AbsoluteOrientationSensor) {
|
||||
const sensor = new window.AbsoluteOrientationSensor();
|
||||
|
||||
Promise.all([
|
||||
navigator.permissions.query({ name: "accelerometer" }),
|
||||
navigator.permissions.query({ name: "magnetometer" }),
|
||||
navigator.permissions.query({ name: "gyroscope" }),
|
||||
]).then((results: PermissionStatus[]) => {
|
||||
if (results.every((result) => result.state === "granted")) {
|
||||
sensor.start();
|
||||
console.log("started")
|
||||
// …
|
||||
} else {
|
||||
console.log("No permissions to use AbsoluteOrientationSensor.");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log('AbsoluteOrientationSensor is not supported in this browser.');
|
||||
}
|
||||
|
||||
// Check if AbsoluteOrientationSensor is defined
|
||||
if (window.AbsoluteOrientationSensor) {
|
||||
// Create an AbsoluteOrientationSensor object
|
||||
const sensor = new window.AbsoluteOrientationSensor({ frequency: 60, referenceFrame: 'device' });
|
||||
|
||||
// Define a vector representing the initial state (e.g., pointing up)
|
||||
let vector = new THREE.Vector3(0, 1, 0);
|
||||
|
||||
// Add an event listener for sensor readings
|
||||
sensor.addEventListener('reading', () => {
|
||||
// Apply the sensor's quaternion to the vector
|
||||
let quaternion = new THREE.Quaternion(...sensor.quaternion);
|
||||
vector.applyQuaternion(quaternion);
|
||||
|
||||
// Log the vector to the console
|
||||
console.log(vector);
|
||||
});
|
||||
|
||||
// Get the button element
|
||||
const button: HTMLElement | null = document.getElementById('gyro');
|
||||
|
||||
// Check if the button was found
|
||||
if (button) {
|
||||
// Add a click event listener to the button
|
||||
button.addEventListener('click', () => {
|
||||
// If sensor is already running, stop it
|
||||
if (sensor.activated) {
|
||||
sensor.stop();
|
||||
console.log("stopped");
|
||||
} else {
|
||||
// Otherwise, start the sensor
|
||||
sensor.start();
|
||||
console.log("started");
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
console.log(button)
|
||||
}
|
||||
} else {
|
||||
// Log a message to the console if AbsoluteOrientationSensor is not supported
|
||||
console.log('AbsoluteOrientationSensor is not supported in this browser.');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -93,6 +93,7 @@
|
|||
</label>
|
||||
<label for="effects">Effects</label>
|
||||
</div>
|
||||
<button id="gyro">Gyro</button>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue