| Текущая версия |
Ваш текст |
| Строка 1: |
Строка 1: |
| | [[Проектная деятельность по информатике]] > [[Курсовые проекты Группы 09 2015]] > '''Коническая передача''' <HR> | | [[Проектная деятельность по информатике]] > [[Курсовые проекты Группы 09 2015]] > '''Коническая передача''' <HR> |
| | | | |
| − | [[File:ConicGears.JPG|400px|right]] | + | [[File:iPhone_image_2015-4-13-1431495674163_1.jpg|800px|right]] |
| | '''''Курсовой проект по [[Проектная деятельность по информатике|информатике]]''''' | | '''''Курсовой проект по [[Проектная деятельность по информатике|информатике]]''''' |
| | | | |
| Строка 10: |
Строка 10: |
| | '''Семестр:''' весна 2015 | | '''Семестр:''' весна 2015 |
| | | | |
| − | == Задача ==
| |
| − | Продемонстрировать принцип работы конической передачи на примере двух конусов, осуществляющих передачу вращающего момента под углом 90°. Передаточное число, направление вращения и скорость ведущего вала устанавливаются пользователем.
| |
| − |
| |
| − | Передаточное число менять в диапазоне <math>\left[\frac13;3\right]</math>.
| |
| − |
| |
| − | Скорость ведущего вала менять в диапазоне <math>\left[0;10\right] \times 10^{-1}</math> об/с.
| |
| − |
| |
| − | == Решение ==
| |
| | <center> | | <center> |
| − | {{#widget:Iframe|url=https://ailurus.ru/stands/conicGears/|width=960|height:540|border=0}} | + | {{#widget:Iframe|url=http://cl49743.tmweb.ru/node/conicGears/|width=960|height:540|border=0}} |
| | | | |
| − | <big>[https://ailurus.ru/stands/conicGears/ Страница решения]</big> | + | <big>[http://cl49743.tmweb.ru/node/conicGears/ Страница решения]</big> |
| | </center> | | </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: Студенческие проекты]]
| |
