wavey-wind/test.js

160 lines
3.4 KiB
JavaScript
Raw Normal View History

2021-08-12 18:10:19 +02:00
console.log("Hello, Sky!");
/**** ******
2021-09-08 18:56:44 +02:00
/ Test skripta *
2021-08-12 18:10:19 +02:00
************/
// Odmik kamere
var odmik_kamere = 100;
// Vidni kot
var FOV = 140;
// Sirina in visina test objekta
var width = 25;
var height = 150;
var depth = 50;
2021-12-24 07:17:42 +01:00
// Parametri rotacije (euler)
2021-08-12 18:10:19 +02:00
var rotacijaX = 0.000;
var rotacijaY = 0.000;
var rotacijaZ = 0.000;
2021-12-24 07:17:42 +01:00
// Parametri pospeska
var accX = 0.000;
var accY = 0.000;
var accZ = 0.000;
2021-08-12 18:10:19 +02:00
// Scena, kamera in render
scene = new THREE.Scene;
camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.z = odmik_kamere;
renderer = new THREE.WebGLRenderer({
alpha: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
// Belo ozadje
renderer.setClearColor(0xFFFFFF, 1);
// Črno ozadje
//renderer.setClearColor(0x000000, 1);
2021-12-24 07:17:42 +01:00
var skupina = new THREE.Group();
2021-08-12 18:10:19 +02:00
// Dodaj test skatlo
var geo = new THREE.BoxGeometry(width, height, depth);
var mat = new THREE.MeshBasicMaterial({
color: 0xff00ff,
wireframe: true
});
2021-12-24 07:17:42 +01:00
var cube = new THREE.Mesh(geo, mat);
skupina.add(cube);
// Za pospeskomer - os X
var gAX = new THREE.CylinderGeometry(10, 10, 10, 16);
2022-01-01 22:10:59 +01:00
var mAX = new THREE.MeshBasicMaterial({ color: 0xff000055 });
2021-12-24 07:17:42 +01:00
var AX = new THREE.Mesh(gAX, mAX);
skupina.add(AX);
2021-12-24 07:17:42 +01:00
// Damo vse skupaj v kader
scene.add(skupina);
// Quaternioni za rotacijo in kalibracijo
var qWW = new THREE.Quaternion();
var qObj = new THREE.Quaternion();
var qStart = new THREE.Quaternion();
2021-12-24 07:17:42 +01:00
var reset = false;
2021-09-08 18:56:44 +02:00
2021-08-12 18:10:19 +02:00
var objekti = [cube];
function render () {
2021-12-24 07:17:42 +01:00
requestAnimationFrame(render);
renderer.render(scene, camera);
2021-12-24 07:17:42 +01:00
objAnim();
2021-08-12 18:10:19 +02:00
};
// Funkcija za animacijo objektov
function objAnim() {
objekti.map(function (obj) {
//obj.setRotationFromEuler(new THREE.Euler(rotacijaY, -rotacijaX, rotacijaZ, 'XYZ'));
2021-12-24 07:17:42 +01:00
// Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.)
qObj = qWW.clone();
qObj.multiply(qStart);
obj.setRotationFromQuaternion(qObj);
2022-01-01 22:10:59 +01:00
AX.scale.x = accX / 1000;
2021-08-12 18:10:19 +02:00
});
2021-12-24 07:17:42 +01:00
// Drzimo vse stiri gumbe (reset)? - kalibracija!
if ((keysPressed[0] + keysPressed[1] + keysPressed[2] + keysPressed[3]) === 4) {
if (!reset) {
qStart = qWW.clone();
qStart.conjugate();
reset = true;
console.log("RESET!");
}
} else {
if (reset) {
reset = false;
console.log("reset off....");
}
}
2021-08-12 18:10:19 +02:00
};
// Inicializiraj
document.onreadystatechange = function () {
if (document.readyState === 'complete') {
document.getElementById("anim-container").appendChild(renderer.domElement);
render();
}
};
// Lep risajz
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);
2021-08-14 15:15:16 +02:00
// Poslusaj OSC evente
keysPressed = [0, 0, 0, 0];
2021-09-08 18:56:44 +02:00
const getVal = function (msg) {
return msg.value;
}
2021-08-14 15:15:16 +02:00
oscCallbacks = {
2022-03-05 12:44:07 +01:00
'/keys': [
2021-08-14 15:15:16 +02:00
function(args) {
2021-12-24 07:17:42 +01:00
keysPressed = args.map(getVal);
2021-08-14 15:15:16 +02:00
}
],
2022-03-05 12:44:07 +01:00
'/quaternion': [
2021-08-14 15:15:16 +02:00
function (args) {
2021-12-24 07:17:42 +01:00
// Popravimo osi (w x y z po defaultu HMM)
2022-03-05 12:44:07 +01:00
[qWW.w, qWW.x, qWW.y, qWW.z] = args.map(getVal);
2021-12-24 07:17:42 +01:00
}
],
2022-03-05 12:44:07 +01:00
'/accel': [
2021-12-24 07:17:42 +01:00
function (args) {
[accX, accY, accZ] = args.map(getVal);
2021-08-14 15:15:16 +02:00
}
2021-09-08 18:56:44 +02:00
],
2022-03-05 12:44:07 +01:00
'/gyro': [
2021-08-14 15:15:16 +02:00
function (args) {
2021-09-08 18:56:44 +02:00
[rotacijaX, rotacijaY, rotacijaZ] = args.map(getVal);
2021-08-14 15:15:16 +02:00
}
]
}