Редактирование: КП: Коническая передача

[[Проектная деятельность по информатике]] > [[Курсовые проекты Группы 09 2015]] > '''Коническая передача''' <HR>

[[File:ConicGears.JPG|400px|right]]
'''''Курсовой проект по [[Проектная деятельность по информатике|информатике]]'''''

'''Исполнитель:''' [[Старобинский Егор]]

'''Группа:''' [[Группа 09|09]] (23604)

'''Семестр:''' весна 2015

== Задача ==
Продемонстрировать принцип работы конической передачи на примере двух конусов, осуществляющих передачу вращающего момента под углом 90°. Передаточное число, направление вращения и скорость ведущего вала устанавливаются пользователем.

Передаточное число менять в диапазоне <math>\left[\frac13;3\right]</math>.

Скорость ведущего вала менять в диапазоне <math>\left[0;10\right] \times 10^{-1}</math> об/с.

== Решение ==
<center>
{{#widget:Iframe|url=https://ailurus.ru/stands/conicGears/|width=960|height:540|border=0}}

<big>[https://ailurus.ru/stands/conicGears/ Страница решения]</big>
</center>


Программа написана на JavaScript с использованием следующих библиотек: Zepto (DOM-навигация), Three.js (WebGL-отрисовка), Dat-gui.js (интерфейс).

Применение данных библиотек не оправдано условиями текущей задачи, и служит лишь демонстрацией их функционала. Однако востребованность такого решения возрастает пропорционально сложности проекта при добавлении возможностей в программу.

Стандартный интерфейс Dat-gui.js был модифицирован средствами CSS. Также при помощи CSS созданы подписи ведущего и ведомого валов.

== Исходный код ==


<div class="mw-collapsible mw-collapsed">
'''Исходный код  [HTML, JS, CSS]:''' <div class="mw-collapsible-content">
Файл '''"common.js"'''
<syntaxhighlight lang="javascript" line start="1" enclose="div">
/*
	Created by E.Starobinskii [starobinskii@yahoo.com],SPbPU, TheorMech, 2015.
*/
$(document).ready(function(){
/*
		------<====== Prelusive ======>------
*/
	var leadCone;
	var drivenCone;
	var gui = new dat.GUI();
	var scene = new THREE.Scene();
	var spotlight = new THREE.SpotLight(0xffffff);
	var renderer = new THREE.WebGLRenderer({ antialias: false,alpha:true });
	var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
	var controls = new function() {
	  this.angulator = 2.7;
	  this.ratio = 2;
	  this.rememberedRatio = this.ratio;
	}
		
	camera.position.set(-45, 45, 45);
	camera.lookAt(scene.position);
	
	spotlight.position.set(-45, 45, 45);
	spotlight.castShadow = true;
	
	[leadCone, leadArbor, drivenCone, drivenArbor] = generateCones(controls.ratio);
	
	scene.add(leadCone);
	scene.add(leadArbor);
	scene.add(drivenCone);
	scene.add(drivenArbor);
	scene.add(spotlight);
	scene.add(new THREE.AmbientLight(0x333333));
	
	renderer.setClearColor(0x000000, 0);
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.shadowMapEnabled = true;
	$('body').append('<div id="output">');
	$("#output").append(renderer.domElement);
	
	gui.add(controls, 'angulator', -10, 10).name('Скорость вращ.');
	gui.add(controls, 'ratio', 0.3, 3).name('Передат. число');
		
/*
		   ------<====== End ======>------
		------<====== Generator ======>------
*/
	function generateCones(squaredRatio){
		var PiBy2 = Math.PI / 2;
		var ratio = Math.sqrt(squaredRatio);
		var defaultConeRadius = 15;
		var radiusDividedByRatio = defaultConeRadius / ratio;
		var radiusMultipliedByRatio = defaultConeRadius * ratio;
		var coneMaterial = new THREE.MeshLambertMaterial({map: THREE.ImageUtils.loadTexture('./source/coneMaterial.jpg')});
		var arborMaterial = new THREE.MeshLambertMaterial({map: THREE.ImageUtils.loadTexture('./source/arborMaterial.jpg')});
		var leadConeGeometry = new THREE.CylinderGeometry(0, radiusMultipliedByRatio, radiusDividedByRatio, 50);
		var leadCone = new THREE.Mesh(leadConeGeometry, coneMaterial);
		var leadArborGeometry = new THREE.CylinderGeometry(5, 5, 50, 50);
		var leadArbor = new THREE.Mesh(leadArborGeometry, arborMaterial);
		var drivenConeGeometry = new THREE.CylinderGeometry(0, radiusDividedByRatio, radiusMultipliedByRatio, 50);
		var drivenCone = new THREE.Mesh(drivenConeGeometry, coneMaterial);
		var drivenArborGeometry = new THREE.CylinderGeometry(5, 5, 50, 50);
		var drivenArbor = new THREE.Mesh(drivenArborGeometry, arborMaterial);
		
		leadCone.position.z = - radiusDividedByRatio / 2;
		leadArbor.position.z = - radiusDividedByRatio - 25;
		leadCone.rotation.x = Math.PI / 2;
		leadArbor.rotation.x = Math.PI / 2;
		leadCone.castShadow = true;
		leadArbor.castShadow = true;
		drivenCone.position.x = radiusMultipliedByRatio / 2;
		drivenArbor.position.x = radiusMultipliedByRatio + 25;
		drivenCone.rotation.set(PiBy2, 0, PiBy2);
		drivenArbor.rotation.set(PiBy2, 0, PiBy2);
		drivenCone.castShadow = true;
		drivenArbor.castShadow = true;

		return [leadCone, leadArbor, drivenCone, drivenArbor];
	}
/*
		   ------<====== End ======>------
		------<====== Rendering ======>------
*/		
	(function render() {
	  var speed = controls.angulator / 100;
	  var ratio = controls.ratio;
	  
	  if(controls.rememberedRatio != ratio){
		  scene.remove(leadCone);
		  scene.remove(leadArbor);
		  scene.remove(drivenCone);
		  scene.remove(drivenArbor);
		  [leadCone, leadArbor, drivenCone, drivenArbor] = generateCones(ratio);
		  scene.add(leadCone);
		  scene.add(leadArbor);
		  scene.add(drivenCone);
		  scene.add(drivenArbor);
		  controls.rememberedRatio = ratio;
	  }
	  
	  leadCone.rotateY(-speed);
	  leadArbor.rotateY(-speed);
	  drivenCone.rotateY(speed * ratio);
	  drivenArbor.rotateY(speed * ratio);
	  
	  requestAnimationFrame(render);
	  renderer.render(scene, camera);
	})();
/*
		   ------<====== End ======>------
*/
});
</syntaxhighlight>

Файл '''"common.css"'''
<syntaxhighlight lang="css" line start="1" enclose="div">
/*
	Created by E.Starobinskii [starobinskii@yahoo.com],SPbPU, TheorMech, 2015.
*/
body{
	margin: 0;
	padding: 0;
	background: gainsboro;
	overflow: hidden;
	width: 100%;
	height: 100%;
	min-width: 700px;
}
img{display: none;}
#output:before,
#output:after{
	top: 40%;
	position: fixed;
	color: white;
	font-seight: bold;
	font-size: 24px;
	background: dodgerblue;
	border: 3px solid white;
	padding: 5px 10px;
}
#output:before{
	content: 'Ведущий вал';
	left: 5%;
}
#output:after{
	content: 'Ведомый вал';
	right: 5%;
}
#output canvas{
	width: 100%!important;
	height: auto!important;
}
.dg.main{
	width: 700px!important;
	float: none!important;
	border: 3px solid white;
	bottom: 0px;
	height: 144px;
	position: fixed;
	opacity: 0.1;
}
.dg.main:hover{opacity: 1;}
.dg *{
	font-size: 30px!important;
	line-height: 50px!important;
	color: white!important;
}
.dg li{
	height: 50px!important;
	background-color: dodgerblue!important;
	padding: 10px!important;
	border: none!important;
}
.dg li:first-child{
	border-bottom: 3px solid white!important;
}
.dg input[type='text'],
.dg .slider{
	height: 46px!important; 
	text-align: center;
	background-color: lightslategray!important;
}
.dg .slider-fg{
	background-color: white!important;
}
.dg .close-button{display: none;}
</syntaxhighlight>

Файл '''"index.php"'''
<syntaxhighlight lang="html5" line start="1" enclose="div">
<!DOCTYPE html>
<html lang="ru">
	<head>
		<title>Коническая передача</title>
		<meta charset="utf-8">
		<meta coder="E. Starobinskii">
		<link rel="stylesheet" href="./source/common.css"></link>
	</head>
	<body>
		<script src="https://ajax.googleapis.com/ajax/libs/threejs/r69/three.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
		<script src="http://zeptojs.com/zepto.min.js"></script>
		<script src="./source/common.js"></script>
</body>
</html>
</syntaxhighlight>
</div>
</div>

[[ Медиа : ConicGears.zip|Исходный код [php js css].zip]]

== См. также ==

* [[Справка:Содержание|Справочная информация]]
* [[Проектная деятельность по информатике]]


[[Category: Студенческие проекты]]