console.log("Hello, Sky!"); /**** ☭☭☭☭☭☭☭☭☭☭☭☭ ****** /☭☭☭☭ Parametri razni ☭☭☭☭ * ******☭☭☭☭☭☭☭☭☭☭☭☭******/ // Odmik kamere var odmik_kamere = 80; // Rotacija kamere var cam_rot_offset = 0; // Vidni kot var FOV = 90; // Sirina in visina objektov var width = 6; // Limit stevila objektov var obj_limit = 10; // Prvotno prazno polje objektov. Lahko bi kak buffer to bil pozneje var objekti = []; // Stevec, za razno animiranje var stevec = 0; var gostota_obj = 1; // Parametri animacije var drotacijaX = 0.000; var drotacijaY = 0.000; var drotacijaZ = 0.000; var rotacijaX = 0; var rotacijaY = 0; var rotacijaZ = 0; // Premik obstojecih barv var zamikBarve = 0.01; // Zamik pri novem objektu var barva_mod = 0.003; var saturacija = 1; var svetlost = 0.4; // Rotiranje kamere var qKamera = new THREE.Quaternion(); // Quaternioni za rotacijo in kalibracijo var qWW = new THREE.Quaternion(); var qWWo = new THREE.Quaternion(); var qWWd = new THREE.Quaternion(); var qObj = new THREE.Quaternion(); var qStart = new THREE.Quaternion(); var calibrate = true; var reset = false; // Razlika v eulerjih var dqX = 0; var dqY = 0; var dqZ = 0; // Gumbi in pa pospesek var keysPressed = [0, 0, 0, 0]; var accel = [0, 0, 0]; // Scena, kamera in render scene = new THREE.Scene; camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 1, 10000); 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); //var pivot = new THREE.Group(); //scene.add( pivot ); function render () { requestAnimationFrame(render); stevec += 1; // Dodaj objekt vcasih if (stevec % gostota_obj === 0) { addObj(width, width); } renderer.render(scene, camera); modulirajParametre(); objAnim(); camRotate(); }; function modulirajParametre() { // Vsi gumbi? => RESET if ((keysPressed[0] + keysPressed[1] + keysPressed[2] + keysPressed[3]) === 4 && !reset) { setTimeout(() => { if ((keysPressed[0] + keysPressed[1] + keysPressed[2] + keysPressed[3]) === 4) { setTimeout(() => { window.location.reload() }, 1000); } }, 1000) } // Posodobi kvaternion polozaja kontrolerja if (calibrate) { qStart = qWW.clone(); qStart.conjugate(); calibrate = false; console.log("RESET!"); } // Rotiranje manualno (z rocnimi gibi "iz sredine") if (keysPressed[3]) { var k = objekti.slice(-1)[0]; qObj.multiply(qWWd); k.quaternion.multiply(qWWd); } if (keysPressed[2]) { drotacijaX += qWWd.x / 10; drotacijaY += qWWd.y / 10; drotacijaZ += qWWd.z / 10; } if (keysPressed[1]) { //qKamera.multiply(qWWd); obj_limit *= 1 - dqY; } if (keysPressed[0]) { width *= 1 + (dqX / 3); barva_mod += (dqZ / 1000); } } // Funkcija za animacijo objektov function objAnim() { objekti.map(function (obj) { obj.rotation.x += drotacijaX; obj.rotation.y += drotacijaY; obj.rotation.z += drotacijaZ; obj.scale.z += width / 4; obj.scale.y += width / 4; obj.scale.x += width / 4; obj.material.color.offsetHSL(zamikBarve, 0, 0); }); }; // Funkcija za dodajanje novih objektov function addObj(w, h) { var col = new THREE.Color(); col.setHSL(stevec * barva_mod, saturacija, svetlost); var mat = new THREE.LineBasicMaterial({ color: col }); var geo = new THREE.BufferGeometry(); var offset = h / 2; // Karo var vertices = new Float32Array([ -offset, 0, 0, 0, offset, 0, -offset, 0, 0, 0, -offset, 0, offset, 0, 0, 0, offset, 0, offset, 0, 0, 0, -offset, 0 ]); // 3d objekt (3 komponente na vertex) geo.setAttribute('position', new THREE.BufferAttribute(vertices, 3)); var obj = new THREE.Line(geo, mat, THREE.LineSegments); scene.add(obj); //pivot.add(obj); obj.setRotationFromQuaternion(qObj); // Pocisti za seboj if (objekti.push(obj) > obj_limit) { while (objekti.length > obj_limit) { scene.remove(objekti[0]); objekti.shift(); } } }; qK = new THREE.Quaternion() scene.setRotationFromQuaternion(qK) function camRotate () { qK.multiply(qKamera); } // 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); function getVal(msg) { return msg.value; } const kbdPressed = { a: false, s: false, d: false, f: false }; window.addEventListener('keydown', (e) => { kbdPressed[e.key] = true; }) window.addEventListener('keyup', (e) => { if (e.key in kbdPressed) { kbdPressed[e.key] = false; } }) var oscCallbacks = { '/keys': [ function(args) { keysPressed = args.map(getVal); keysPressed[0] |= kbdPressed['a']; keysPressed[1] |= kbdPressed['s']; keysPressed[2] |= kbdPressed['d']; keysPressed[3] |= kbdPressed['f']; //console.log(keysPressed, kbdPressed); } ], '/quaternion': [ function (args) { // Popravimo osi (w x y z po defaultu HMM) [qWW.w, qWW.z, qWW.x, qWW.y] = args.map(getVal); } ], '/quaternionDiff': [ function (args) { [qWWd.w, qWWd.x, qWWd.y, qWWd.z] = args.map(getVal); } ], '/eulerDiff': [ function (args) { [dqX, dqY, dqZ] = args.map(getVal); } ], /* Ne uporabljamo vec '/gyro/': [ function (args) { var [gx, gy, gz] = args.map(getVal); console.log(keysPressed) if (keysPressed[2]) { rotacijaX += gyro[0] - gx rotacijaY += gyro[1] - gy rotacijaZ += gyro[2] - gz } if (keysPressed[3]) { drotacijaX += gyro[0] - gx drotacijaY += gyro[1] - gy drotacijaZ += gyro[2] - gz } if (keysPressed[1]) { kameraX += gyro[0] - gx FOV *= 1 + (gy - gyro[1]) //kameraY += gyro[1] - gy //kameraZ += gyro[2] - gz } if (keysPressed[0]) { zamikBarve *= 1 + (gx - gyro[0]) obj_limit *= 1 + (gy - gyro[1]) width *= 1 + (gz - gyro[2]) } gyro = [gx, gy, gz] } ], */ }