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-09-08 18:56:44 +02:00
|
|
|
// Parametri animacije (euler)
|
2021-08-12 18:10:19 +02:00
|
|
|
var rotacijaX = 0.000;
|
|
|
|
var rotacijaY = 0.000;
|
|
|
|
var rotacijaZ = 0.000;
|
|
|
|
|
|
|
|
// 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);
|
|
|
|
|
|
|
|
// Dodaj test skatlo
|
|
|
|
var geo = new THREE.BoxGeometry(width, height, depth);
|
|
|
|
var mat = new THREE.MeshBasicMaterial({
|
|
|
|
color: 0xff00ff,
|
|
|
|
wireframe: true
|
|
|
|
});
|
2021-10-09 06:39:14 +02:00
|
|
|
|
|
|
|
var start = false;
|
|
|
|
var qWW = new THREE.Quaternion();
|
|
|
|
var qObj = new THREE.Quaternion(-1, 0, 0, 0);
|
|
|
|
var qStart = null;
|
2021-09-08 18:56:44 +02:00
|
|
|
|
2021-08-12 18:10:19 +02:00
|
|
|
var cube = new THREE.Mesh(geo, mat);
|
|
|
|
scene.add(cube); //
|
|
|
|
|
|
|
|
var objekti = [cube];
|
|
|
|
|
|
|
|
function render () {
|
|
|
|
requestAnimationFrame(render);
|
|
|
|
renderer.render(scene, camera);
|
2021-10-09 06:39:14 +02:00
|
|
|
|
|
|
|
if (start) {
|
2021-08-12 18:10:19 +02:00
|
|
|
objAnim();
|
2021-10-09 06:39:14 +02:00
|
|
|
} else {
|
|
|
|
if (qWW) {
|
|
|
|
qStart = qWW.clone();
|
|
|
|
qStart.inverse();
|
|
|
|
start = true;
|
|
|
|
}
|
|
|
|
}
|
2021-08-12 18:10:19 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
// Funkcija za animacijo objektov
|
|
|
|
function objAnim() {
|
|
|
|
objekti.map(function (obj) {
|
2021-10-09 06:39:14 +02:00
|
|
|
//obj.setRotationFromEuler(new THREE.Euler(rotacijaY, -rotacijaX, rotacijaZ, 'XYZ'));
|
|
|
|
//newq = quaternion.clone();
|
|
|
|
//newq.multiplyQuaternions(quaternion, conjugation);
|
|
|
|
//newq.multiply(conjugation);
|
|
|
|
//quaternion.premultiply(conjugation);
|
|
|
|
//quaternion.normalize();
|
|
|
|
//console.log(quaternion);
|
|
|
|
//obj.setRotationFromQuaternion(THREE.Quaternion.multiplyQuaternions(quaternion, conjugation));
|
|
|
|
//quaterion = new THREE.Quaternion(-1, 0, 0, 0);
|
|
|
|
//qObj = qWW.clone();
|
|
|
|
//qObj.multiply(qStart);
|
|
|
|
obj.setRotationFromQuaternion(qWW);
|
|
|
|
//obj.setRotationFromQuaternion(conjugation);
|
|
|
|
console.log(obj.rotation.x);
|
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 = {
|
|
|
|
'/keys/': [
|
|
|
|
function(args) {
|
|
|
|
keysPressed = [...args];
|
|
|
|
}
|
|
|
|
],
|
|
|
|
'/quaternion/': [
|
|
|
|
function (args) {
|
2021-10-09 06:39:14 +02:00
|
|
|
[qWW.w, qWW.x, qWW.y, qWW.z] = args.map(getVal);
|
2021-08-14 15:15:16 +02:00
|
|
|
}
|
2021-09-08 18:56:44 +02:00
|
|
|
],
|
2021-08-14 15:15:16 +02:00
|
|
|
'/gyro/': [
|
|
|
|
function (args) {
|
2021-09-08 18:56:44 +02:00
|
|
|
[rotacijaX, rotacijaY, rotacijaZ] = args.map(getVal);
|
2021-08-14 15:15:16 +02:00
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|