let scene, camera, renderer, width, height, radiusOfBoundCylinder = 0.1, controls;


const initThreeJS = () => {
	// создание сцены, ее настройка
	scene = new THREE.Scene();
	width = window.innerWidth * 0.8;
	height = window.innerHeight * 0.7;
	camera = new THREE.PerspectiveCamera(90, width / height, 0.001, 25);
	renderer = new THREE.WebGLRenderer({canvas: glcanvas});

	function resize() {
		if (window.innerWidth * 0.8 !== width || window.innerHeight * 0.7 !== height) {
			width = window.innerWidth * 0.8;
			height = window.innerHeight * 0.7;
			renderer.setSize(width, height, false);
			camera.aspect = width / height;
			camera.updateProjectionMatrix();
		}
	}
	function render() {
		resize();
		renderer.render(scene, camera);
		requestAnimationFrame(render);
	}
	render();

	let delta = 0.05;
	let xAxis = new THREE.Vector3(1, 0, 0);
	let yAxis = new THREE.Vector3(0, 1, 0);
	let zAxis = new THREE.Vector3(0, 0, 1);
	// управление камерой
	// w - вперед, s - назад
	// a - влево, d - вправо
	// q - вниз, e - вверх
	window.addEventListener('keydown', function(event) {
		event.preventDefault();
		switch (event.keyCode) {
			// w
			case 87:
				camera.translateOnAxis(zAxis, -delta);
				break;
			// s
			case 83:
				camera.translateOnAxis(zAxis, delta);
				break;
			// a
			case 65:
				camera.translateOnAxis(xAxis, delta);
				break;
			// d
			case 68:
				camera.translateOnAxis(xAxis, -delta);
				break;
			// q
			case 81:
				camera.translateOnAxis(yAxis, delta);
				break;
			// e
			case 69:
				camera.translateOnAxis(yAxis, -delta);
				break;
		}
	});
}


const drawMoleculaStick = () => {
	let count = molecula.bonds.length;
	// определяем наибольшую z координату молекул для определения оптимального положения камеры
	let maxZ = -100;
	// цикл для отрисовки кадой связи молекулы
	for (let i = 0; i < count; i++) {
		// получение информации о молекулах, соединяемых текущей связью
		let currentBond = molecula.bonds[i];
		let startAtom = molecula.atoms[currentBond.atom1 - 1];
		let finishAtom = molecula.atoms[currentBond.atom2 - 1];

		if (startAtom.coords[2] > maxZ) {
			maxZ = startAtom.coords[2];
		}
		if (finishAtom.coords[2] > maxZ) {
			maxZ = finishAtom.coords[2];
		}

		// вычисление параметров цилиндра, изображающего связь между молекулами
		console.log(startAtom.coords[0], startAtom.coords[1], startAtom.coords[2]);
		console.log(finishAtom.coords[0], finishAtom.coords[1], finishAtom.coords[2]);
		let x = finishAtom.coords[0] - startAtom.coords[0],
			y = finishAtom.coords[1] - startAtom.coords[1],
			z = finishAtom.coords[2] - startAtom.coords[2];
		let cylinderHeight = Math.sqrt(x ** 2 + y ** 2 + z ** 2);
		let angleX = Math.acos(Math.abs(x) / cylinderHeight);
		let angleY = Math.acos(Math.abs(y) / cylinderHeight);
		let angleZ = Math.acos(Math.abs(z) / cylinderHeight);

		// создание первой половины цилиндра (так как разные половинки разных цветов (по цвету атома, к которому они примыкают))
		let geometry1 = new THREE.CylinderGeometry(radiusOfBoundCylinder, radiusOfBoundCylinder,
			cylinderHeight / 2, 30, 1, true);
		let material1 = new THREE.MeshBasicMaterial({color: startAtom.atom.color});
		let cylinder1 = new THREE.Mesh(geometry1, material1);
		cylinder1.position.set(startAtom.coords[0], startAtom.coords[1], startAtom.coords[2]);
		cylinder1.rotation.set(angleX, angleY, angleZ);
		scene.add(cylinder1);

		// вторая половинка
		let geometry2 = new THREE.CylinderGeometry(radiusOfBoundCylinder, radiusOfBoundCylinder,
		   cylinderHeight / 2, 30, 1, true);
		let material2 = new THREE.MeshBasicMaterial({color: finishAtom.atom.color});
		let cylinder2 = new THREE.Mesh(geometry2, material2);
		cylinder2.position.set(startAtom.coords[0] + x / 2, startAtom.coords[1] + y / 2, startAtom.coords[2] + z / 2);
		cylinder1.rotation.set(angleX, angleY, angleZ);
		scene.add(cylinder2);
	}
	// стартовая позиция камеры
	camera.position.z = maxZ + 0.5;
}