172 lines
3.7 KiB
JavaScript
172 lines
3.7 KiB
JavaScript
console.log("Hello, Sky!");
|
|
|
|
/**** ☭☭☭☭☭☭☭☭☭☭☭☭ ******
|
|
/☭☭☭☭ Parametri razni ☭☭☭☭ *
|
|
******☭☭☭☭☭☭☭☭☭☭☭☭******/
|
|
|
|
// Odmik kamere
|
|
var odmik_kamere = 100;
|
|
|
|
// Rotacija kamere
|
|
var cam_rot_offset = 1;
|
|
|
|
// Vidni kot
|
|
var FOV = 140;
|
|
|
|
// Sirina in visina test objekta
|
|
var width = 25;
|
|
var height = 150;
|
|
var depth = 50;
|
|
|
|
// Stevec, za razno animiranje
|
|
var stevec = 0;
|
|
|
|
// Parametri animacije
|
|
var rotacijaX = 0.000;
|
|
var rotacijaY = 0.000;
|
|
var rotacijaZ = 0.000;
|
|
|
|
// Pozicija
|
|
var posX = 0;
|
|
var posY = 0;
|
|
var posZ = 0;
|
|
|
|
// Zamik pri novem objektu
|
|
var barva = 0.333;
|
|
var saturacija = 1;
|
|
var svetlost = 0.4;
|
|
|
|
// Drugi parametri
|
|
var wDiff = 0.5;
|
|
|
|
// 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
|
|
});
|
|
//quaternion = new THREE.Quaternion();
|
|
quaternion = null;
|
|
var cube = new THREE.Mesh(geo, mat);
|
|
scene.add(cube); //
|
|
|
|
var objekti = [cube];
|
|
|
|
function render () {
|
|
requestAnimationFrame(render);
|
|
|
|
stevec += 1;
|
|
renderer.render(scene, camera);
|
|
|
|
objAnim();
|
|
//camRotate();
|
|
};
|
|
|
|
// Funkcija za animacijo objektov
|
|
function objAnim() {
|
|
objekti.map(function (obj) {
|
|
obj.setRotationFromEuler(new THREE.Euler(rotacijaY, -rotacijaX, rotacijaZ, 'XYZ'));
|
|
/*
|
|
if (quaternion) {
|
|
obj.setRotationFromQuaternion(new THREE.Quaternion(...quaternion));
|
|
}
|
|
*/
|
|
|
|
/*
|
|
obj.rotation.y = -rotacijaX;
|
|
obj.rotation.x = rotacijaY;
|
|
obj.rotation.z = rotacijaZ;
|
|
*/
|
|
|
|
/*
|
|
const cor = 0.8;
|
|
obj.position.x += posX / 1000;
|
|
obj.position.x *= cor;
|
|
obj.position.y += posY / 1000;
|
|
obj.position.y *= cor;
|
|
obj.position.z += posZ / 1000;
|
|
obj.position.z *= cor;
|
|
*/
|
|
});
|
|
};
|
|
|
|
|
|
var xAksa = new THREE.Vector3(0, 1, 0);
|
|
function camRotate () {
|
|
// rotiraj po z osi
|
|
camera.translateX(cam_rot_offset);
|
|
camera.translateZ(odmik_kamere - Math.sqrt(Math.pow(odmik_kamere, 2) + Math.pow(cam_rot_offset, 2)));
|
|
|
|
/*
|
|
camera.translateY(cam_rot_offset);
|
|
camera.translateX(odmik_kamere - Math.sqrt(Math.pow(odmik_kamere, 2) + Math.pow(cam_rot_offset, 2)));
|
|
|
|
camera.translateY(cam_rot_offset);
|
|
camera.translateX(odmik_kamere - Math.sqrt(Math.pow(odmik_kamere, 2) + Math.pow(cam_rot_offset, 2)));
|
|
|
|
|
|
|
|
camera.position.x = Math.sin((stevec % 10) / 10) * cam_rot_offset;
|
|
camera.position.y = Math.cos((stevec % 10) / 10) * cam_rot_offset;
|
|
*/
|
|
|
|
camera.lookAt(scene.position);
|
|
};
|
|
|
|
// 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
|
|
keysPressed = [0, 0, 0, 0];
|
|
|
|
oscCallbacks = {
|
|
'/keys/': [
|
|
function(args) {
|
|
keysPressed = [...args];
|
|
}
|
|
],
|
|
/*
|
|
'/quaternion/': [
|
|
function (args) {
|
|
quaternion = args.map(function (a) { return a.value; });
|
|
}
|
|
]
|
|
*/
|
|
'/gyro/': [
|
|
function (args) {
|
|
[rotacijaX, rotacijaY, rotacijaZ] = args.map(function (a) { return a.value; });
|
|
}
|
|
]
|
|
}
|