Premik glasbene mize v svoj fajn, nazaj star test.js
parent
bda4e1fb21
commit
3128d02eff
|
|
@ -0,0 +1,17 @@
|
|||
<html >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>glasbena miza</title>
|
||||
<style type="text/css">
|
||||
body { margin: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="anim-container"></div>
|
||||
|
||||
<script src="node_modules/three/build/three.min.js"></script>
|
||||
<script src="node_modules/osc/dist/osc-browser.js"></script>
|
||||
<script src="glasbena-miza.js"></script>
|
||||
<script src="osctl.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,635 @@
|
|||
console.log("Hello, Sky!");
|
||||
|
||||
/**** ☭☭☭☭☭☭☭☭☭☭☭☭ ******
|
||||
/☭☭☭☭ Test skripta ☭☭☭☭ *
|
||||
******☭☭☭☭☭☭☭☭☭☭☭☭******/
|
||||
|
||||
// Ker kegel imamo?
|
||||
var izbranKegel = 9;
|
||||
if (window.location.hash.indexOf('kegel') > -1) {
|
||||
izbranKegel = window.location.hash.split('=')[1];
|
||||
console.log('definiran kegel!');
|
||||
}
|
||||
console.log('izbran kegel: ', izbranKegel);
|
||||
|
||||
// Vidni kot
|
||||
var FOV = 90;
|
||||
|
||||
// Parametri rotacije (euler)
|
||||
var rotacijaX = 0.000;
|
||||
var rotacijaY = 0.000;
|
||||
var rotacijaZ = 0.000;
|
||||
|
||||
// Parametri pospeska
|
||||
var accX = 0.000;
|
||||
var accY = 0.000;
|
||||
var accZ = 0.000;
|
||||
|
||||
var deformiraj = 0;
|
||||
|
||||
// Scena, kamera in render
|
||||
var scene = new THREE.Scene;
|
||||
window.scene = scene;
|
||||
|
||||
/*
|
||||
const axesHelper = new THREE.AxesHelper( 5 );
|
||||
scene.add( axesHelper );
|
||||
*/
|
||||
|
||||
var camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 2000);
|
||||
window.camera = camera;
|
||||
// Polozaj kamere
|
||||
camera.position.z = 10;
|
||||
|
||||
var renderer = new THREE.WebGLRenderer({ alpha: true });
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
|
||||
// Belo ozadje
|
||||
renderer.setClearColor(0xFFFFFF, 1);
|
||||
// Črno ozadje
|
||||
//renderer.setClearColor(0x000000, 1);
|
||||
|
||||
//var skupina = new THREE.Group();
|
||||
|
||||
/********
|
||||
* KEGEL *
|
||||
*********/
|
||||
|
||||
// Sirina in visina test objekta
|
||||
var width = 16;
|
||||
var height = 128;
|
||||
|
||||
var radialnihSegmentov = 4;
|
||||
var visinskihSegmentov = 128;
|
||||
|
||||
var geo = new THREE.BufferGeometry();
|
||||
var offset = width;
|
||||
var polozaji = [];
|
||||
|
||||
// visina: 128 segmentov
|
||||
// sirina: 9 segmentov
|
||||
|
||||
var sirinaSegmentov = 9;
|
||||
// Najprej "spodnja buba"
|
||||
var faktor = [
|
||||
2/sirinaSegmentov, 2/sirinaSegmentov
|
||||
];
|
||||
|
||||
// Pol rocaj (1.4 do 2.8 segmenta, dolgo 62 segmentov)
|
||||
var rocajSegmentov = 46;
|
||||
for (var i = 0; i <= rocajSegmentov; i++) {
|
||||
faktor.push((1.4 + i / rocajSegmentov * 1.4) / sirinaSegmentov);
|
||||
}
|
||||
|
||||
// pol stresica dol (2.8 do 7.4 segmenta)
|
||||
var stresicaSegmentov = 48;
|
||||
for (i = 0; i <= stresicaSegmentov; i++) {
|
||||
faktor.push((2.8 + i / stresicaSegmentov * 4.6) / sirinaSegmentov);
|
||||
}
|
||||
|
||||
// Pa se zadnji naklon (7.4 do 3 segmente)
|
||||
var konecSegmentov = 30;
|
||||
for (i = 0; i <= konecSegmentov; i++) {
|
||||
faktor.push((7.4 - i / konecSegmentov * 4.4) / sirinaSegmentov);
|
||||
}
|
||||
|
||||
// spodnji krog
|
||||
for (var s = 0; s < radialnihSegmentov; s++) {
|
||||
polozaji.push(
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
Math.sin(2 * Math.PI * s / radialnihSegmentov) * width * faktor[0],
|
||||
Math.cos(2 * Math.PI * s / radialnihSegmentov) * width * faktor[0],
|
||||
0.0,
|
||||
Math.sin(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[0],
|
||||
Math.cos(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[0],
|
||||
0.0
|
||||
);
|
||||
}
|
||||
console.log(polozaji);
|
||||
// vmesni segmenti
|
||||
for (var h = 0; h < visinskihSegmentov; h++) {
|
||||
for (s = 0; s < radialnihSegmentov; s++) {
|
||||
polozaji.push(
|
||||
Math.sin(2 * Math.PI * s / radialnihSegmentov) * width * faktor[h],
|
||||
Math.cos(2 * Math.PI * s / radialnihSegmentov) * width * faktor[h],
|
||||
h * height / visinskihSegmentov,
|
||||
Math.sin(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[h],
|
||||
Math.cos(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[h],
|
||||
h * height / visinskihSegmentov,
|
||||
Math.sin(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[h],
|
||||
Math.cos(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[h],
|
||||
(h + 1) * height / visinskihSegmentov,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// zgornji krog
|
||||
for (s = 0; s < radialnihSegmentov; s++) {
|
||||
polozaji.push(
|
||||
0,
|
||||
0,
|
||||
height,
|
||||
Math.sin(2 * Math.PI * s / radialnihSegmentov) * width * faktor[31],
|
||||
Math.cos(2 * Math.PI * s / radialnihSegmentov) * width * faktor[31],
|
||||
height,
|
||||
Math.sin(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[31],
|
||||
Math.cos(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[31],
|
||||
height
|
||||
);
|
||||
}
|
||||
|
||||
for (i = 0; i < polozaji.length; i++) {
|
||||
if (i % 3 == 2) {
|
||||
polozaji[i] -= height / 2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Spremeni v vertexe
|
||||
var vertices = new Float32Array(polozaji);
|
||||
geo.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
|
||||
|
||||
window.geo = geo;
|
||||
|
||||
var barva = new THREE.Color(0, 0, 0);
|
||||
var barvaDodatni = new THREE.Color();
|
||||
barvaDodatni.setHSL(0.6, 1.0, 0.5);
|
||||
var mat = new THREE.MeshBasicMaterial({
|
||||
//color: 0xff00ff,
|
||||
color: barva,
|
||||
wireframe: true,
|
||||
transparent: true
|
||||
});
|
||||
window.mat = mat;
|
||||
//var mat = new THREE.LineBasicMaterial({ color: 0xff00ff });
|
||||
var kegel = new THREE.Mesh(geo.clone(), mat);
|
||||
kegel.position.z = 20; // gor / dol
|
||||
kegel.position.y = -30; // levo / desno
|
||||
kegel.position.x = 12; // levo / desno drugic
|
||||
|
||||
if (izbranKegel == 1) {
|
||||
kegel.position.x -= 10;
|
||||
kegel.position.y += 8;
|
||||
kegel.position.z += 3;
|
||||
}
|
||||
|
||||
var barvnePalete = [
|
||||
[0x0a2d2e, 0x1c4e4f, 0x436e6f, 0x6a8e8f, 0x879693, 0xa49e97, 0xdeae9f, 0xefd7cf, 0xf7ebe7, 0xffffff],
|
||||
// https://colorkit.co/palette/0a2d2e-1c4e4f-436e6f-6a8e8f-879693-a49e97-deae9f-efd7cf-f7ebe7-ffffff/
|
||||
[0x80558c, 0xaf7ab3, 0xcba0ae, 0xd8b9a0, 0xe4d192],
|
||||
// https://colorkit.co/palette/80558c-af7ab3-cba0ae-d8b9a0-e4d192/
|
||||
[0xf68aa2, 0xcf6d93, 0xa85183, 0x813474, 0x5a1765],
|
||||
// https://colorkit.co/palette/f68aa2-cf6d93-a85183-813474-5a1765/
|
||||
[0x03071e, 0x211c1b, 0x3d3019, 0x594417, 0x745814, 0x906b12, 0xac7f0f, 0xc8930d, 0xe3a60a, 0xffba08]
|
||||
// https://colorkit.co/palette/03071e-211c1b-3d3019-594417-745814-906b12-ac7f0f-c8930d-e3a60a-ffba08/
|
||||
]
|
||||
var barvnePaleteIdx = [0, 0, 0, 0]
|
||||
|
||||
/*********
|
||||
* ZOGICE *
|
||||
*********/
|
||||
var zogice = false
|
||||
var kegli = false
|
||||
/*
|
||||
var barvnaPaleta = [
|
||||
new THREE.Color(0x003F5C),
|
||||
new THREE.Color(0x58508D),
|
||||
new THREE.Color(0xBC5090),
|
||||
new THREE.Color(0xFF6361),
|
||||
new THREE.Color(0xFFA600),
|
||||
// Simetrija
|
||||
new THREE.Color(0xFF6361),
|
||||
new THREE.Color(0xBC5090),
|
||||
new THREE.Color(0x58508D),
|
||||
];
|
||||
console.log(barvnaPaleta);
|
||||
var barvnaPaletaIdx = 0;
|
||||
*/
|
||||
|
||||
var barvaKrogleO = new THREE.Color();
|
||||
barvaKrogleO.setHSL(Math.random(), 0.8, 0.5);
|
||||
function novaKrogla () {
|
||||
//var barvaKrogle = barvaKrogleO.clone();
|
||||
var bId = izbranKegel == 0 ? 2 : 3
|
||||
console.log('id barve:', bId);
|
||||
var barvaKrogle = new THREE.Color(barvnePalete[bId][barvnePaleteIdx[bId]]);
|
||||
var mat = new THREE.MeshBasicMaterial({
|
||||
color: barvaKrogle,
|
||||
wireframe: true,
|
||||
transparent: true
|
||||
});
|
||||
var velikost = 1 + Math.random() * 5;
|
||||
var kroglaGeo = new THREE.SphereGeometry(velikost, 12, 12);
|
||||
var krogla = new THREE.Mesh(kroglaGeo, mat);
|
||||
|
||||
krogla.position.x = (Math.random() - 1) * 200;
|
||||
krogla.position.y = (Math.random() - 1) * 10;
|
||||
krogla.position.z = (Math.random() - 1) * 300;
|
||||
|
||||
krogla.position.y -= 100;
|
||||
krogla.position.x += 150;
|
||||
krogla.position.z += 230; // gor/dol
|
||||
|
||||
|
||||
//krogla.position.y += 200;
|
||||
|
||||
scene.add(krogla);
|
||||
krogle.push(krogla);
|
||||
}
|
||||
|
||||
function spremeniZoom (kolicina) {
|
||||
const noviZum = camera.position.z * (1 + kolicina / 25)
|
||||
console.log(noviZum)
|
||||
if ((noviZum > 10) && (noviZum < 300)) {
|
||||
camera.position.z = noviZum
|
||||
}
|
||||
}
|
||||
function spremeniDeformiraj (kolicina) {
|
||||
const noviDeformiraj = deformiraj + (kolicina / 2)
|
||||
//console.log('deform', noviDeformiraj)
|
||||
if (noviDeformiraj > 0) {
|
||||
deformiraj = noviDeformiraj
|
||||
} else {
|
||||
deformiraj = 0
|
||||
}
|
||||
}
|
||||
|
||||
//skupina.add(kegel);
|
||||
|
||||
// Za pospeskomer - os X
|
||||
var gAX = new THREE.CylinderGeometry(10, 10, 10, 16);
|
||||
var mAX = new THREE.MeshBasicMaterial({ color: 0xff000055 });
|
||||
var AX = new THREE.Mesh(gAX, mAX);
|
||||
|
||||
//skupina.add(AX);
|
||||
|
||||
// Damo vse skupaj v kader
|
||||
// scene.add(skupina);
|
||||
scene.add(kegel);
|
||||
|
||||
// Quaternioni za rotacijo in kalibracijo
|
||||
var qWW = new THREE.Quaternion();
|
||||
var qPrej = new THREE.Quaternion();
|
||||
var qObj = new THREE.Quaternion();
|
||||
var qStart = new THREE.Quaternion();
|
||||
var reset = false;
|
||||
var calibrate = true;
|
||||
|
||||
|
||||
var objekti = [kegel];
|
||||
var dodatniObjekti = [];
|
||||
var krogle = [];
|
||||
var stevec = 0;
|
||||
|
||||
// Zacetna orientacija kegla
|
||||
scene.rotation.x = 90;
|
||||
scene.rotation.z = 270;
|
||||
|
||||
//skupina.position.z = 32;
|
||||
//skupina.position.y = -100;
|
||||
|
||||
var cakajDeformiraj = false
|
||||
var cakajZogice = false
|
||||
var cakajKegli = false
|
||||
function inputHandle () {
|
||||
if (kbdPressed.c) {
|
||||
calibrate = true;
|
||||
sendAll('/ww/calibrate');
|
||||
}
|
||||
if (kbdPressed['-']) {
|
||||
sendAll('/ww/reload');
|
||||
window.location.reload();
|
||||
}
|
||||
/*
|
||||
if (kbdPressed.d && !cakajDeformiraj) {
|
||||
deformiraj = !deformiraj
|
||||
cakajDeformiraj = true
|
||||
const args = [{
|
||||
type: "f",
|
||||
value: deformiraj
|
||||
}];
|
||||
sendAll('/ww/zoom', args)
|
||||
setTimeout(() => cakajDeformiraj = false, 200)
|
||||
}
|
||||
*/
|
||||
if (kbdPressed.g && !cakajZogice) {
|
||||
zogice = !zogice
|
||||
cakajZogice = true
|
||||
const args = [{
|
||||
type: "i",
|
||||
value: zogice ? 1 : 0
|
||||
}];
|
||||
sendAll('/ww/zogice', args)
|
||||
setTimeout(() => cakajZogice = false, 200)
|
||||
}
|
||||
if (kbdPressed['l'] && !cakajKegli) {
|
||||
kegli = !kegli
|
||||
console.log('sprememba kegli', kegli)
|
||||
cakajKegli = true
|
||||
const args = [{
|
||||
type: "i",
|
||||
value: kegli ? 1 : 0
|
||||
}];
|
||||
sendAll('/ww/kegli', args)
|
||||
setTimeout(() => cakajKegli = false, 200)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function render () {
|
||||
requestAnimationFrame(render);
|
||||
renderer.render(scene, camera);
|
||||
stevec += 1;
|
||||
|
||||
objAnim();
|
||||
inputHandle();
|
||||
|
||||
while (krogle.length > 50) {
|
||||
scene.remove(krogle[0]);
|
||||
krogle.shift();
|
||||
}
|
||||
};
|
||||
|
||||
var cakajDodatni = false
|
||||
|
||||
// Funkcija za animacijo objektov
|
||||
function objAnim() {
|
||||
// Rotacija kegla
|
||||
objekti.map(function (obj) {
|
||||
// Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.)
|
||||
qObj = qWW.clone();
|
||||
qObj.multiply(qStart);
|
||||
obj.setRotationFromQuaternion(qObj);
|
||||
|
||||
AX.scale.x = accX / 1000;
|
||||
|
||||
// Deformiranje kegla!
|
||||
// Random 500 zamaknemo
|
||||
var koti = obj.geometry.attributes.position.array;
|
||||
var faktorD = 5;
|
||||
for (var i = 0; i < 500; i++) {
|
||||
koti[Math.floor(Math.random() * koti.length)] += (Math.random() - 1) * deformiraj;
|
||||
}
|
||||
|
||||
// In priblizamo osnovni geometriji
|
||||
for (var i = 0; i < koti.length; i++) {
|
||||
koti[i] = (geo.attributes.position.array[i] - koti[i]) * 0.75;
|
||||
}
|
||||
|
||||
obj.geometry.attributes.position.needsUpdate = true;
|
||||
});
|
||||
// Ce jih je prevec, pucaj
|
||||
while (dodatniObjekti.length > 100) {
|
||||
scene.remove(dodatniObjekti[0]);
|
||||
dodatniObjekti.shift();
|
||||
}
|
||||
|
||||
dodatniObjekti.map(function (obj) {
|
||||
// Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.)
|
||||
qObj = qWW.clone();
|
||||
//qObj.multiply(obj.qStart).multiply(qStart);
|
||||
//obj.setRotationFromQuaternion(qObj);
|
||||
|
||||
obj.translateOnAxis(obj.premakniAxis, obj.premakniKolicina);
|
||||
|
||||
// obj.material.color.offsetHSL(0, 0, 0.003);
|
||||
obj.material.opacity *= 0.998;
|
||||
obj.premakniKolicina *= 0.98;
|
||||
|
||||
var dQ = obj.quaternion.multiply(obj.rotirajQ);
|
||||
/*
|
||||
dQ.multiply(obj.rotirajQ);
|
||||
obj.setRotationFromQuaternion(dQ);
|
||||
*/
|
||||
|
||||
/*
|
||||
obj.premakni.x *= 1.1;
|
||||
obj.premakni.y *= 1.1;
|
||||
obj.premakni.z *= 1.1;
|
||||
*/
|
||||
obj.material.opacity *= 0.98;
|
||||
});
|
||||
|
||||
barvaKrogleO.offsetHSL(-(2/1000), 0, 0);
|
||||
krogle.map(function (obj) {
|
||||
obj.material.opacity *= 0.98;
|
||||
var scaleF = 0.05;
|
||||
obj.scale.x += scaleF;
|
||||
obj.scale.y += scaleF;
|
||||
obj.scale.z += scaleF;
|
||||
});
|
||||
|
||||
// Kalibracija rotacije kegla
|
||||
if (calibrate) {
|
||||
qStart = qWW.clone();
|
||||
qStart.conjugate();
|
||||
calibrate = false;
|
||||
console.log("RESET!");
|
||||
}
|
||||
|
||||
|
||||
// rotiramo skupino da se vidi
|
||||
//skupina.rotation.x += 0.003;
|
||||
//skupina.rotation.y += 0.005;
|
||||
//skupina.rotation.z += 0.007;
|
||||
|
||||
if (kegel.scale.x > 1) {
|
||||
kegel.scale.x *= 0.95;
|
||||
}
|
||||
|
||||
if (kegel.scale.z > 1) {
|
||||
kegel.scale.z *= 0.95;
|
||||
}
|
||||
|
||||
// kegel.material.color.offsetHSL(2 / 1000, 0, 0);
|
||||
|
||||
// Dupliranje keglov
|
||||
if (kegli) {
|
||||
var vsota = Math.abs(accX) + Math.abs(accZ)
|
||||
if (vsota > 2 && !cakajDodatni) {
|
||||
cakajDodatni = true
|
||||
var dodatni = kegel.clone();
|
||||
dodatni.renderOrder = stevec;
|
||||
var dodatniMat = kegel.material.clone();
|
||||
//var dodatniBarva = barvaDodatni.clone();
|
||||
var bId = izbranKegel == 0 ? 0 : 1
|
||||
var dodatniBarva = new THREE.Color(barvnePalete[bId][barvnePaleteIdx[bId]])
|
||||
dodatniMat.color = dodatniBarva;
|
||||
dodatni.material = dodatniMat;
|
||||
dodatni.premakniAxis = new THREE.Vector3(
|
||||
Math.random(),
|
||||
Math.random(),
|
||||
Math.random()
|
||||
);
|
||||
dodatni.premakniKolicina = vsota;
|
||||
var rQ = qWW.clone();
|
||||
rQ.invert();
|
||||
rQ.multiply(qPrej);
|
||||
dodatni.rotirajQ = rQ;
|
||||
|
||||
//dodatni.qStart = kegel.quaternion.clone();
|
||||
dodatniObjekti.push(dodatni);
|
||||
scene.add(dodatni);
|
||||
barvnePaleteIdx[bId] = (barvnePaleteIdx[bId] + 1) % barvnePalete[bId].length;
|
||||
}
|
||||
if (cakajDodatni && vsota < 1) {
|
||||
cakajDodatni = false
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
// 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);
|
||||
|
||||
|
||||
// Poslusaj OSC evente
|
||||
var keysPressed = [0, 0, 0, 0];
|
||||
|
||||
const getVal = function (msg) {
|
||||
return msg.value;
|
||||
}
|
||||
var prepend = `/ww/${izbranKegel}`;
|
||||
console.log('prepend!', prepend);
|
||||
|
||||
var oscCallbacks = {};
|
||||
|
||||
oscCallbacks[`${prepend}'/keys`] = function(args) {
|
||||
keysPressed = args.map(getVal);
|
||||
};
|
||||
oscCallbacks[`${prepend}/quat`] = function (args) {
|
||||
// Popravimo osi (w x y z po defaultu HMM)
|
||||
[qPrej.w, qPrej.x, qPrej.y, qPrej.z] = [qWW.w, qWW.x, qWW.y, qWW.z];
|
||||
[qWW.w, qWW.x, qWW.y, qWW.z] = args.map(getVal);
|
||||
};
|
||||
oscCallbacks[`${prepend}/accel`] = function (args) {
|
||||
[accX, accY, accZ] = args.map(getVal);
|
||||
};
|
||||
oscCallbacks[`${prepend}/gyro`] = function (args) {
|
||||
[rotacijaX, rotacijaY, rotacijaZ] = args.map(getVal);
|
||||
};
|
||||
oscCallbacks['/ww/calibrate'] = function () {
|
||||
calibrate = true;
|
||||
};
|
||||
oscCallbacks['/ww/reload'] = function () {
|
||||
window.location.reload();
|
||||
};
|
||||
oscCallbacks['/ww/zoom'] = args => {
|
||||
const [kolicina] = args.map(getVal)
|
||||
spremeniZoom(kolicina)
|
||||
}
|
||||
oscCallbacks['/ww/deformiraj'] = args => {
|
||||
const [kolicina] = args.map(getVal)
|
||||
spremeniDeformiraj(kolicina)
|
||||
}
|
||||
oscCallbacks['/ww/kegli'] = args => {
|
||||
const [ali] = args.map(getVal)
|
||||
kegli = ali
|
||||
}
|
||||
oscCallbacks['/ww/zogice'] = args => {
|
||||
const [ali] = args.map(getVal)
|
||||
zogice = ali
|
||||
}
|
||||
oscCallbacks['/midi-in'] = function (args) {
|
||||
//console.log("MAMOMO MIDI!", args);
|
||||
var minus = (izbranKegel == 1) ? -1 : 1;
|
||||
// kegel.material.color.offsetHSL(minus * args[2].value / 1000, 0, 0);
|
||||
barvaDodatni.offsetHSL(minus * args[2].value / 1000, 0, 0);
|
||||
|
||||
|
||||
if (Math.random() < 0.5) {
|
||||
kegel.scale.x *= 2;
|
||||
} else {
|
||||
kegel.scale.z *= 2;
|
||||
}
|
||||
|
||||
//kegel.scale.y *= 1 + (args[2] / 100000);
|
||||
//kegel.scale.z *= 1 + (args[2] / 100000);
|
||||
|
||||
if (zogice) {
|
||||
novaKrogla();
|
||||
var bId = izbranKegel == 0 ? 2 : 3
|
||||
console.log('id barve:', bId)
|
||||
barvnePaleteIdx[bId] = (barvnePaleteIdx[bId] + 1) % barvnePalete[bId].length;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const kbdPressed = {
|
||||
a: false,
|
||||
s: false,
|
||||
d: false,
|
||||
f: false,
|
||||
c: false
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', e => {
|
||||
kbdPressed[e.key] = true
|
||||
})
|
||||
|
||||
window.addEventListener('keyup', e => {
|
||||
if (e.key in kbdPressed) {
|
||||
kbdPressed[e.key] = false
|
||||
}
|
||||
})
|
||||
|
||||
window.addEventListener('mousedown', e => {
|
||||
e.preventDefault()
|
||||
switch (e.button) {
|
||||
case 0:
|
||||
kbdPressed['miska'] = true
|
||||
break;
|
||||
case 2:
|
||||
kbdPressed['miskaD'] = true
|
||||
}
|
||||
return false
|
||||
})
|
||||
window.addEventListener('mouseup', e => {
|
||||
if ('miska' in kbdPressed) {
|
||||
kbdPressed['miska'] = false
|
||||
}
|
||||
if ('miskaD' in kbdPressed) {
|
||||
kbdPressed['miskaD'] = false
|
||||
}
|
||||
})
|
||||
|
||||
var skrolam = false;
|
||||
var zadnjiSkrol = 0;
|
||||
window.addEventListener('mousemove', e => {
|
||||
if (kbdPressed['miska']) {
|
||||
const sprememba = (e.movementX + e.movementY) / 10
|
||||
|
||||
spremeniZoom(sprememba)
|
||||
const args = [{
|
||||
type: "f",
|
||||
value: sprememba
|
||||
}];
|
||||
sendAll('/ww/zoom', args)
|
||||
}
|
||||
if (kbdPressed['miskaD']) {
|
||||
const sprememba = (e.movementX + e.movementY) / 10
|
||||
|
||||
spremeniDeformiraj(sprememba)
|
||||
const args = [{
|
||||
type: "f",
|
||||
value: sprememba
|
||||
}];
|
||||
sendAll('/ww/deformiraj', args)
|
||||
}
|
||||
})
|
||||
604
test.js
604
test.js
|
|
@ -4,16 +4,16 @@ console.log("Hello, Sky!");
|
|||
/☭☭☭☭ Test skripta ☭☭☭☭ *
|
||||
******☭☭☭☭☭☭☭☭☭☭☭☭******/
|
||||
|
||||
// Ker kegel imamo?
|
||||
var izbranKegel = 1;
|
||||
if (window.location.hash.indexOf('kegel') > -1) {
|
||||
izbranKegel = window.location.hash.split('=')[1];
|
||||
console.log('definiran kegel!');
|
||||
}
|
||||
console.log('izbran kegel: ', izbranKegel);
|
||||
// Odmik kamere
|
||||
var odmik_kamere = 100;
|
||||
|
||||
// Vidni kot
|
||||
var FOV = 90;
|
||||
var FOV = 140;
|
||||
|
||||
// Sirina in visina test objekta
|
||||
var width = 25;
|
||||
var height = 150;
|
||||
var depth = 50;
|
||||
|
||||
// Parametri rotacije (euler)
|
||||
var rotacijaX = 0.000;
|
||||
|
|
@ -25,23 +25,15 @@ var accX = 0.000;
|
|||
var accY = 0.000;
|
||||
var accZ = 0.000;
|
||||
|
||||
var deformiraj = 0;
|
||||
|
||||
// Scena, kamera in render
|
||||
var scene = new THREE.Scene;
|
||||
window.scene = scene;
|
||||
scene = new THREE.Scene;
|
||||
|
||||
/*
|
||||
const axesHelper = new THREE.AxesHelper( 5 );
|
||||
scene.add( axesHelper );
|
||||
*/
|
||||
camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 2000);
|
||||
camera.position.z = odmik_kamere;
|
||||
|
||||
var camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 2000);
|
||||
window.camera = camera;
|
||||
// Polozaj kamere
|
||||
camera.position.z = 10;
|
||||
|
||||
var renderer = new THREE.WebGLRenderer({ alpha: true });
|
||||
renderer = new THREE.WebGLRenderer({
|
||||
alpha: true
|
||||
});
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
|
||||
// Belo ozadje
|
||||
|
|
@ -49,445 +41,81 @@ renderer.setClearColor(0xFFFFFF, 1);
|
|||
// Črno ozadje
|
||||
//renderer.setClearColor(0x000000, 1);
|
||||
|
||||
//var skupina = new THREE.Group();
|
||||
var skupina = new THREE.Group();
|
||||
|
||||
/********
|
||||
* KEGEL *
|
||||
*********/
|
||||
|
||||
// Sirina in visina test objekta
|
||||
var width = 16;
|
||||
var height = 128;
|
||||
|
||||
var radialnihSegmentov = 4;
|
||||
var visinskihSegmentov = 128;
|
||||
|
||||
var geo = new THREE.BufferGeometry();
|
||||
var offset = width;
|
||||
var polozaji = [];
|
||||
|
||||
// visina: 128 segmentov
|
||||
// sirina: 9 segmentov
|
||||
|
||||
var sirinaSegmentov = 9;
|
||||
// Najprej "spodnja buba"
|
||||
var faktor = [
|
||||
2/sirinaSegmentov, 2/sirinaSegmentov
|
||||
];
|
||||
|
||||
// Pol rocaj (1.4 do 2.8 segmenta, dolgo 62 segmentov)
|
||||
var rocajSegmentov = 46;
|
||||
for (var i = 0; i <= rocajSegmentov; i++) {
|
||||
faktor.push((1.4 + i / rocajSegmentov * 1.4) / sirinaSegmentov);
|
||||
}
|
||||
|
||||
// pol stresica dol (2.8 do 7.4 segmenta)
|
||||
var stresicaSegmentov = 48;
|
||||
for (i = 0; i <= stresicaSegmentov; i++) {
|
||||
faktor.push((2.8 + i / stresicaSegmentov * 4.6) / sirinaSegmentov);
|
||||
}
|
||||
|
||||
// Pa se zadnji naklon (7.4 do 3 segmente)
|
||||
var konecSegmentov = 30;
|
||||
for (i = 0; i <= konecSegmentov; i++) {
|
||||
faktor.push((7.4 - i / konecSegmentov * 4.4) / sirinaSegmentov);
|
||||
}
|
||||
|
||||
// spodnji krog
|
||||
for (var s = 0; s < radialnihSegmentov; s++) {
|
||||
polozaji.push(
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
Math.sin(2 * Math.PI * s / radialnihSegmentov) * width * faktor[0],
|
||||
Math.cos(2 * Math.PI * s / radialnihSegmentov) * width * faktor[0],
|
||||
0.0,
|
||||
Math.sin(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[0],
|
||||
Math.cos(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[0],
|
||||
0.0
|
||||
);
|
||||
}
|
||||
console.log(polozaji);
|
||||
// vmesni segmenti
|
||||
for (var h = 0; h < visinskihSegmentov; h++) {
|
||||
for (s = 0; s < radialnihSegmentov; s++) {
|
||||
polozaji.push(
|
||||
Math.sin(2 * Math.PI * s / radialnihSegmentov) * width * faktor[h],
|
||||
Math.cos(2 * Math.PI * s / radialnihSegmentov) * width * faktor[h],
|
||||
h * height / visinskihSegmentov,
|
||||
Math.sin(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[h],
|
||||
Math.cos(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[h],
|
||||
h * height / visinskihSegmentov,
|
||||
Math.sin(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[h],
|
||||
Math.cos(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[h],
|
||||
(h + 1) * height / visinskihSegmentov,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// zgornji krog
|
||||
for (s = 0; s < radialnihSegmentov; s++) {
|
||||
polozaji.push(
|
||||
0,
|
||||
0,
|
||||
height,
|
||||
Math.sin(2 * Math.PI * s / radialnihSegmentov) * width * faktor[31],
|
||||
Math.cos(2 * Math.PI * s / radialnihSegmentov) * width * faktor[31],
|
||||
height,
|
||||
Math.sin(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[31],
|
||||
Math.cos(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[31],
|
||||
height
|
||||
);
|
||||
}
|
||||
|
||||
for (i = 0; i < polozaji.length; i++) {
|
||||
if (i % 3 == 2) {
|
||||
polozaji[i] -= height / 2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Spremeni v vertexe
|
||||
var vertices = new Float32Array(polozaji);
|
||||
geo.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
|
||||
|
||||
window.geo = geo;
|
||||
|
||||
var barva = new THREE.Color(0, 0, 0);
|
||||
var barvaDodatni = new THREE.Color();
|
||||
barvaDodatni.setHSL(0.6, 1.0, 0.5);
|
||||
// Dodaj test skatlo
|
||||
var geo = new THREE.BoxGeometry(width, height, depth);
|
||||
var mat = new THREE.MeshBasicMaterial({
|
||||
//color: 0xff00ff,
|
||||
color: barva,
|
||||
wireframe: true,
|
||||
transparent: true
|
||||
color: 0xff00ff,
|
||||
wireframe: true
|
||||
});
|
||||
window.mat = mat;
|
||||
//var mat = new THREE.LineBasicMaterial({ color: 0xff00ff });
|
||||
var kegel = new THREE.Mesh(geo.clone(), mat);
|
||||
kegel.position.z = 20; // gor / dol
|
||||
kegel.position.y = -30; // levo / desno
|
||||
kegel.position.x = 12; // levo / desno drugic
|
||||
var cube = new THREE.Mesh(geo, mat);
|
||||
|
||||
if (izbranKegel == 1) {
|
||||
kegel.position.x -= 10;
|
||||
kegel.position.y += 8;
|
||||
kegel.position.z += 3;
|
||||
}
|
||||
|
||||
var barvnePalete = [
|
||||
[0x0a2d2e, 0x1c4e4f, 0x436e6f, 0x6a8e8f, 0x879693, 0xa49e97, 0xdeae9f, 0xefd7cf, 0xf7ebe7, 0xffffff],
|
||||
// https://colorkit.co/palette/0a2d2e-1c4e4f-436e6f-6a8e8f-879693-a49e97-deae9f-efd7cf-f7ebe7-ffffff/
|
||||
[0x80558c, 0xaf7ab3, 0xcba0ae, 0xd8b9a0, 0xe4d192],
|
||||
// https://colorkit.co/palette/80558c-af7ab3-cba0ae-d8b9a0-e4d192/
|
||||
[0xf68aa2, 0xcf6d93, 0xa85183, 0x813474, 0x5a1765],
|
||||
// https://colorkit.co/palette/f68aa2-cf6d93-a85183-813474-5a1765/
|
||||
[0x03071e, 0x211c1b, 0x3d3019, 0x594417, 0x745814, 0x906b12, 0xac7f0f, 0xc8930d, 0xe3a60a, 0xffba08]
|
||||
// https://colorkit.co/palette/03071e-211c1b-3d3019-594417-745814-906b12-ac7f0f-c8930d-e3a60a-ffba08/
|
||||
]
|
||||
var barvnePaleteIdx = [0, 0, 0, 0]
|
||||
|
||||
/*********
|
||||
* ZOGICE *
|
||||
*********/
|
||||
var zogice = false
|
||||
var kegli = false
|
||||
/*
|
||||
var barvnaPaleta = [
|
||||
new THREE.Color(0x003F5C),
|
||||
new THREE.Color(0x58508D),
|
||||
new THREE.Color(0xBC5090),
|
||||
new THREE.Color(0xFF6361),
|
||||
new THREE.Color(0xFFA600),
|
||||
// Simetrija
|
||||
new THREE.Color(0xFF6361),
|
||||
new THREE.Color(0xBC5090),
|
||||
new THREE.Color(0x58508D),
|
||||
];
|
||||
console.log(barvnaPaleta);
|
||||
var barvnaPaletaIdx = 0;
|
||||
*/
|
||||
|
||||
var barvaKrogleO = new THREE.Color();
|
||||
barvaKrogleO.setHSL(Math.random(), 0.8, 0.5);
|
||||
function novaKrogla () {
|
||||
//var barvaKrogle = barvaKrogleO.clone();
|
||||
var bId = izbranKegel == 0 ? 2 : 3
|
||||
console.log('id barve:', bId);
|
||||
var barvaKrogle = new THREE.Color(barvnePalete[bId][barvnePaleteIdx[bId]]);
|
||||
var mat = new THREE.MeshBasicMaterial({
|
||||
color: barvaKrogle,
|
||||
wireframe: true,
|
||||
transparent: true
|
||||
});
|
||||
var velikost = 1 + Math.random() * 5;
|
||||
var kroglaGeo = new THREE.SphereGeometry(velikost, 12, 12);
|
||||
var krogla = new THREE.Mesh(kroglaGeo, mat);
|
||||
|
||||
krogla.position.x = (Math.random() - 1) * 200;
|
||||
krogla.position.y = (Math.random() - 1) * 10;
|
||||
krogla.position.z = (Math.random() - 1) * 300;
|
||||
|
||||
krogla.position.y -= 100;
|
||||
krogla.position.x += 150;
|
||||
krogla.position.z += 230; // gor/dol
|
||||
|
||||
|
||||
//krogla.position.y += 200;
|
||||
|
||||
scene.add(krogla);
|
||||
krogle.push(krogla);
|
||||
}
|
||||
|
||||
function spremeniZoom (kolicina) {
|
||||
const noviZum = camera.position.z * (1 + kolicina / 25)
|
||||
console.log(noviZum)
|
||||
if ((noviZum > 10) && (noviZum < 300)) {
|
||||
camera.position.z = noviZum
|
||||
}
|
||||
}
|
||||
function spremeniDeformiraj (kolicina) {
|
||||
const noviDeformiraj = deformiraj + (kolicina / 2)
|
||||
//console.log('deform', noviDeformiraj)
|
||||
if (noviDeformiraj > 0) {
|
||||
deformiraj = noviDeformiraj
|
||||
} else {
|
||||
deformiraj = 0
|
||||
}
|
||||
}
|
||||
|
||||
//skupina.add(kegel);
|
||||
skupina.add(cube);
|
||||
|
||||
// Za pospeskomer - os X
|
||||
var gAX = new THREE.CylinderGeometry(10, 10, 10, 16);
|
||||
var mAX = new THREE.MeshBasicMaterial({ color: 0xff000055 });
|
||||
var AX = new THREE.Mesh(gAX, mAX);
|
||||
|
||||
//skupina.add(AX);
|
||||
skupina.add(AX);
|
||||
|
||||
// Damo vse skupaj v kader
|
||||
// scene.add(skupina);
|
||||
scene.add(kegel);
|
||||
scene.add(skupina);
|
||||
|
||||
// Quaternioni za rotacijo in kalibracijo
|
||||
var qWW = new THREE.Quaternion();
|
||||
var qPrej = new THREE.Quaternion();
|
||||
var qObj = new THREE.Quaternion();
|
||||
var qStart = new THREE.Quaternion();
|
||||
var reset = false;
|
||||
var calibrate = true;
|
||||
|
||||
|
||||
var objekti = [kegel];
|
||||
var dodatniObjekti = [];
|
||||
var krogle = [];
|
||||
var stevec = 0;
|
||||
|
||||
// Zacetna orientacija kegla
|
||||
scene.rotation.x = 90;
|
||||
scene.rotation.z = 270;
|
||||
|
||||
//skupina.position.z = 32;
|
||||
//skupina.position.y = -100;
|
||||
|
||||
var cakajDeformiraj = false
|
||||
var cakajZogice = false
|
||||
var cakajKegli = false
|
||||
function inputHandle () {
|
||||
if (kbdPressed.c) {
|
||||
calibrate = true;
|
||||
sendAll('/ww/calibrate');
|
||||
}
|
||||
if (kbdPressed['-']) {
|
||||
sendAll('/ww/reload');
|
||||
window.location.reload();
|
||||
}
|
||||
/*
|
||||
if (kbdPressed.d && !cakajDeformiraj) {
|
||||
deformiraj = !deformiraj
|
||||
cakajDeformiraj = true
|
||||
const args = [{
|
||||
type: "f",
|
||||
value: deformiraj
|
||||
}];
|
||||
sendAll('/ww/zoom', args)
|
||||
setTimeout(() => cakajDeformiraj = false, 200)
|
||||
}
|
||||
*/
|
||||
if (kbdPressed.g && !cakajZogice) {
|
||||
zogice = !zogice
|
||||
cakajZogice = true
|
||||
const args = [{
|
||||
type: "i",
|
||||
value: zogice ? 1 : 0
|
||||
}];
|
||||
sendAll('/ww/zogice', args)
|
||||
setTimeout(() => cakajZogice = false, 200)
|
||||
}
|
||||
if (kbdPressed['l'] && !cakajKegli) {
|
||||
kegli = !kegli
|
||||
console.log('sprememba kegli', kegli)
|
||||
cakajKegli = true
|
||||
const args = [{
|
||||
type: "i",
|
||||
value: kegli ? 1 : 0
|
||||
}];
|
||||
sendAll('/ww/kegli', args)
|
||||
setTimeout(() => cakajKegli = false, 200)
|
||||
}
|
||||
}
|
||||
|
||||
var objekti = [cube];
|
||||
|
||||
function render () {
|
||||
requestAnimationFrame(render);
|
||||
renderer.render(scene, camera);
|
||||
stevec += 1;
|
||||
|
||||
objAnim();
|
||||
inputHandle();
|
||||
|
||||
while (krogle.length > 50) {
|
||||
scene.remove(krogle[0]);
|
||||
krogle.shift();
|
||||
}
|
||||
};
|
||||
|
||||
var cakajDodatni = false
|
||||
|
||||
// Funkcija za animacijo objektov
|
||||
function objAnim() {
|
||||
// Rotacija kegla
|
||||
objekti.map(function (obj) {
|
||||
//obj.setRotationFromEuler(new THREE.Euler(rotacijaY, -rotacijaX, rotacijaZ, 'XYZ'));
|
||||
// Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.)
|
||||
qObj = qWW.clone();
|
||||
qObj.multiply(qStart);
|
||||
obj.setRotationFromQuaternion(qObj);
|
||||
|
||||
AX.scale.x = accX / 1000;
|
||||
|
||||
// Deformiranje kegla!
|
||||
// Random 500 zamaknemo
|
||||
var koti = obj.geometry.attributes.position.array;
|
||||
var faktorD = 5;
|
||||
for (var i = 0; i < 500; i++) {
|
||||
koti[Math.floor(Math.random() * koti.length)] += (Math.random() - 1) * deformiraj;
|
||||
}
|
||||
|
||||
// In priblizamo osnovni geometriji
|
||||
for (var i = 0; i < koti.length; i++) {
|
||||
koti[i] = (geo.attributes.position.array[i] - koti[i]) * 0.75;
|
||||
}
|
||||
|
||||
obj.geometry.attributes.position.needsUpdate = true;
|
||||
});
|
||||
// Ce jih je prevec, pucaj
|
||||
while (dodatniObjekti.length > 100) {
|
||||
scene.remove(dodatniObjekti[0]);
|
||||
dodatniObjekti.shift();
|
||||
}
|
||||
|
||||
dodatniObjekti.map(function (obj) {
|
||||
// Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.)
|
||||
qObj = qWW.clone();
|
||||
//qObj.multiply(obj.qStart).multiply(qStart);
|
||||
//obj.setRotationFromQuaternion(qObj);
|
||||
|
||||
obj.translateOnAxis(obj.premakniAxis, obj.premakniKolicina);
|
||||
|
||||
// obj.material.color.offsetHSL(0, 0, 0.003);
|
||||
obj.material.opacity *= 0.998;
|
||||
obj.premakniKolicina *= 0.98;
|
||||
|
||||
var dQ = obj.quaternion.multiply(obj.rotirajQ);
|
||||
/*
|
||||
dQ.multiply(obj.rotirajQ);
|
||||
obj.setRotationFromQuaternion(dQ);
|
||||
*/
|
||||
|
||||
/*
|
||||
obj.premakni.x *= 1.1;
|
||||
obj.premakni.y *= 1.1;
|
||||
obj.premakni.z *= 1.1;
|
||||
*/
|
||||
obj.material.opacity *= 0.98;
|
||||
});
|
||||
|
||||
barvaKrogleO.offsetHSL(-(2/1000), 0, 0);
|
||||
krogle.map(function (obj) {
|
||||
obj.material.opacity *= 0.98;
|
||||
var scaleF = 0.05;
|
||||
obj.scale.x += scaleF;
|
||||
obj.scale.y += scaleF;
|
||||
obj.scale.z += scaleF;
|
||||
});
|
||||
|
||||
// Kalibracija rotacije kegla
|
||||
if (calibrate) {
|
||||
qStart = qWW.clone();
|
||||
qStart.conjugate();
|
||||
calibrate = false;
|
||||
console.log("RESET!");
|
||||
}
|
||||
|
||||
|
||||
// rotiramo skupino da se vidi
|
||||
//skupina.rotation.x += 0.003;
|
||||
//skupina.rotation.y += 0.005;
|
||||
//skupina.rotation.z += 0.007;
|
||||
|
||||
if (kegel.scale.x > 1) {
|
||||
kegel.scale.x *= 0.95;
|
||||
}
|
||||
|
||||
if (kegel.scale.z > 1) {
|
||||
kegel.scale.z *= 0.95;
|
||||
}
|
||||
|
||||
// kegel.material.color.offsetHSL(2 / 1000, 0, 0);
|
||||
|
||||
// Dupliranje keglov
|
||||
if (kegli) {
|
||||
var vsota = Math.abs(accX) + Math.abs(accZ)
|
||||
if (vsota > 2 && !cakajDodatni) {
|
||||
cakajDodatni = true
|
||||
var dodatni = kegel.clone();
|
||||
dodatni.renderOrder = stevec;
|
||||
var dodatniMat = kegel.material.clone();
|
||||
//var dodatniBarva = barvaDodatni.clone();
|
||||
var bId = izbranKegel == 0 ? 0 : 1
|
||||
var dodatniBarva = new THREE.Color(barvnePalete[bId][barvnePaleteIdx[bId]])
|
||||
dodatniMat.color = dodatniBarva;
|
||||
dodatni.material = dodatniMat;
|
||||
dodatni.premakniAxis = new THREE.Vector3(
|
||||
Math.random(),
|
||||
Math.random(),
|
||||
Math.random()
|
||||
);
|
||||
dodatni.premakniKolicina = vsota;
|
||||
var rQ = qWW.clone();
|
||||
rQ.invert();
|
||||
rQ.multiply(qPrej);
|
||||
dodatni.rotirajQ = rQ;
|
||||
|
||||
//dodatni.qStart = kegel.quaternion.clone();
|
||||
dodatniObjekti.push(dodatni);
|
||||
scene.add(dodatni);
|
||||
barvnePaleteIdx[bId] = (barvnePaleteIdx[bId] + 1) % barvnePalete[bId].length;
|
||||
// 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!");
|
||||
}
|
||||
if (cakajDodatni && vsota < 1) {
|
||||
cakajDodatni = false
|
||||
} else {
|
||||
if (reset) {
|
||||
reset = false;
|
||||
console.log("reset off....");
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Inicializiraj
|
||||
document.onreadystatechange = function () {
|
||||
if (document.readyState === 'complete') {
|
||||
document.getElementById("anim-container").appendChild(renderer.domElement);
|
||||
render();
|
||||
}
|
||||
if (document.readyState === 'complete') {
|
||||
document.getElementById("anim-container").appendChild(renderer.domElement);
|
||||
|
||||
render();
|
||||
}
|
||||
};
|
||||
|
||||
// Lep risajz
|
||||
|
|
@ -500,136 +128,32 @@ window.addEventListener('resize', onWindowResize, false);
|
|||
|
||||
|
||||
// Poslusaj OSC evente
|
||||
var keysPressed = [0, 0, 0, 0];
|
||||
keysPressed = [0, 0, 0, 0];
|
||||
|
||||
const getVal = function (msg) {
|
||||
return msg.value;
|
||||
}
|
||||
var prepend = `/ww/0/ww/${izbranKegel}`;
|
||||
console.log('prepend!', prepend);
|
||||
|
||||
var oscCallbacks = {};
|
||||
|
||||
oscCallbacks[`${prepend}'/keys`] = function(args) {
|
||||
keysPressed = args.map(getVal);
|
||||
};
|
||||
oscCallbacks[`${prepend}/quaternion`] = function (args) {
|
||||
// Popravimo osi (w x y z po defaultu HMM)
|
||||
[qPrej.w, qPrej.x, qPrej.y, qPrej.z] = [qWW.w, qWW.x, qWW.y, qWW.z];
|
||||
[qWW.w, qWW.x, qWW.y, qWW.z] = args.map(getVal);
|
||||
};
|
||||
oscCallbacks[`${prepend}/accel`] = function (args) {
|
||||
[accX, accY, accZ] = args.map(getVal);
|
||||
};
|
||||
oscCallbacks[`${prepend}/gyro`] = function (args) {
|
||||
[rotacijaX, rotacijaY, rotacijaZ] = args.map(getVal);
|
||||
};
|
||||
oscCallbacks['/ww/calibrate'] = function () {
|
||||
calibrate = true;
|
||||
};
|
||||
oscCallbacks['/ww/reload'] = function () {
|
||||
window.location.reload();
|
||||
};
|
||||
oscCallbacks['/ww/zoom'] = args => {
|
||||
const [kolicina] = args.map(getVal)
|
||||
spremeniZoom(kolicina)
|
||||
oscCallbacks = {
|
||||
'/keys': [
|
||||
function(args) {
|
||||
keysPressed = args.map(getVal);
|
||||
}
|
||||
],
|
||||
'/quaternion': [
|
||||
function (args) {
|
||||
// Popravimo osi (w x y z po defaultu HMM)
|
||||
[qWW.w, qWW.x, qWW.y, qWW.z] = args.map(getVal);
|
||||
}
|
||||
],
|
||||
'/accel': [
|
||||
function (args) {
|
||||
[accX, accY, accZ] = args.map(getVal);
|
||||
}
|
||||
],
|
||||
'/gyro': [
|
||||
function (args) {
|
||||
[rotacijaX, rotacijaY, rotacijaZ] = args.map(getVal);
|
||||
}
|
||||
]
|
||||
}
|
||||
oscCallbacks['/ww/deformiraj'] = args => {
|
||||
const [kolicina] = args.map(getVal)
|
||||
spremeniDeformiraj(kolicina)
|
||||
}
|
||||
oscCallbacks['/ww/kegli'] = args => {
|
||||
const [ali] = args.map(getVal)
|
||||
kegli = ali
|
||||
}
|
||||
oscCallbacks['/ww/zogice'] = args => {
|
||||
const [ali] = args.map(getVal)
|
||||
zogice = ali
|
||||
}
|
||||
oscCallbacks['/midi-in'] = function (args) {
|
||||
//console.log("MAMOMO MIDI!", args);
|
||||
var minus = (izbranKegel == 1) ? -1 : 1;
|
||||
// kegel.material.color.offsetHSL(minus * args[2].value / 1000, 0, 0);
|
||||
barvaDodatni.offsetHSL(minus * args[2].value / 1000, 0, 0);
|
||||
|
||||
|
||||
if (Math.random() < 0.5) {
|
||||
kegel.scale.x *= 2;
|
||||
} else {
|
||||
kegel.scale.z *= 2;
|
||||
}
|
||||
|
||||
//kegel.scale.y *= 1 + (args[2] / 100000);
|
||||
//kegel.scale.z *= 1 + (args[2] / 100000);
|
||||
|
||||
if (zogice) {
|
||||
novaKrogla();
|
||||
var bId = izbranKegel == 0 ? 2 : 3
|
||||
console.log('id barve:', bId)
|
||||
barvnePaleteIdx[bId] = (barvnePaleteIdx[bId] + 1) % barvnePalete[bId].length;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const kbdPressed = {
|
||||
a: false,
|
||||
s: false,
|
||||
d: false,
|
||||
f: false,
|
||||
c: false
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', e => {
|
||||
kbdPressed[e.key] = true
|
||||
})
|
||||
|
||||
window.addEventListener('keyup', e => {
|
||||
if (e.key in kbdPressed) {
|
||||
kbdPressed[e.key] = false
|
||||
}
|
||||
})
|
||||
|
||||
window.addEventListener('mousedown', e => {
|
||||
e.preventDefault()
|
||||
switch (e.button) {
|
||||
case 0:
|
||||
kbdPressed['miska'] = true
|
||||
break;
|
||||
case 2:
|
||||
kbdPressed['miskaD'] = true
|
||||
}
|
||||
return false
|
||||
})
|
||||
window.addEventListener('mouseup', e => {
|
||||
if ('miska' in kbdPressed) {
|
||||
kbdPressed['miska'] = false
|
||||
}
|
||||
if ('miskaD' in kbdPressed) {
|
||||
kbdPressed['miskaD'] = false
|
||||
}
|
||||
})
|
||||
|
||||
var skrolam = false;
|
||||
var zadnjiSkrol = 0;
|
||||
window.addEventListener('mousemove', e => {
|
||||
if (kbdPressed['miska']) {
|
||||
const sprememba = (e.movementX + e.movementY) / 10
|
||||
|
||||
spremeniZoom(sprememba)
|
||||
const args = [{
|
||||
type: "f",
|
||||
value: sprememba
|
||||
}];
|
||||
sendAll('/ww/zoom', args)
|
||||
}
|
||||
if (kbdPressed['miskaD']) {
|
||||
const sprememba = (e.movementX + e.movementY) / 10
|
||||
|
||||
spremeniDeformiraj(sprememba)
|
||||
const args = [{
|
||||
type: "f",
|
||||
value: sprememba
|
||||
}];
|
||||
sendAll('/ww/deformiraj', args)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue