| Текущая версия |
Ваш текст |
| Строка 3: |
Строка 3: |
| | | | |
| | | | |
| − | {{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Stepanov/mech.html |width=1000|height=550 |border=0 }} | + | {{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Stepanov/mech.html |width=800|height=800 |border=0 }} |
| | * Программа ([[Медиа: WebGLteormech2.zip|скачать]]) | | * Программа ([[Медиа: WebGLteormech2.zip|скачать]]) |
| − | <div class="mw-collapsible mw-collapsed">
| |
| − | '''Текст программы на языке JavaScript:''' <div class="mw-collapsible-content">
| |
| − | Файл '''"graphicMech.js"'''
| |
| − | <syntaxhighlight lang="javascript" line start="1" enclose="div">
| |
| | | | |
| − | function main()
| |
| − | {
| |
| − | var step = 0;
| |
| − | var stats = initStats();
| |
| | | | |
| − | //определяем сцену
| + | При работе над проектом использована библиотека Three.js. Это легковесная кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработки веб-приложений. Three.js скрипты могут использоваться совместно с элементом HTML5 CANVAS, SVG или WebGL. |
| − | | |
| − | var material = new THREE.LineBasicMaterial({color: 0x000000});
| |
| − |
| |
| − | var scene = new THREE.Scene();
| |
| − | var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 10000);
| |
| − | var render = new THREE.WebGLRenderer();
| |
| − | render.setClearColor(0xEEEEEE);
| |
| − | render.setSize(window.innerWidth ,window.innerHeight-80);
| |
| − |
| |
| − | //ставим оси
| |
| − |
| |
| − | var axes = new THREE.AxisHelper(1);
| |
| − | scene.add(axes);
| |
| − | var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
| |
| − | var planeMaterial = new THREE.MeshLambertMaterial({color:0xcccccc});
| |
| − | var plane = new THREE.Mesh(planeGeometry,planeMaterial);
| |
| − | plane.rotation.x = -0.5*Math.PI;
| |
| − | plane.position.x = 15;
| |
| − | plane.position.y = 0;
| |
| − | plane.position.z = 0;
| |
| − | | |
| − |
| |
| − | //создаем ползун
| |
| − |
| |
| − | var cubeGeometry = new THREE.CubeGeometry(4,2,5);
| |
| − | var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000, wireframe:false});
| |
| − | var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
| |
| − | cube.position.x = 0;
| |
| − | cube.position.y = 2;
| |
| − | cube.position.z = 0;
| |
| − | scene.add(cube);
| |
| − |
| |
| − | // создаем шатун
| |
| − | var cubeGeometry = new THREE.CubeGeometry(8,0.3,0.2);
| |
| − | var cubeMaterial = new THREE.MeshLambertMaterial({color:0x000000, wireframe:false});
| |
| − | var cube2 = new THREE.Mesh(cubeGeometry, cubeMaterial);
| |
| − | cube2.position.x = 0;
| |
| − | cube2.position.y = 0;
| |
| − | cube2.position.z = 2.51;
| |
| − | scene.add(cube2);
| |
| − |
| |
| − | // создаем кривошип
| |
| − | var cubeGeometry = new THREE.CubeGeometry(20,0.3,0.2);
| |
| − | var cubeMaterial = new THREE.MeshLambertMaterial({color:0x000000, wireframe:false});
| |
| − | var cube3 = new THREE.Mesh(cubeGeometry, cubeMaterial);
| |
| − | cube3.position.x = 6;
| |
| − | cube3.position.y = 0;
| |
| − | cube3.position.z = 2.51;
| |
| − | scene.add(cube3);
| |
| − |
| |
| − | | |
| − | //создаем цилиндр
| |
| − |
| |
| − | var cylinderGeometry = new THREE.CylinderGeometry(4,4,5,32);
| |
| − | var cylinderMaterial = new THREE.MeshLambertMaterial({color:0x7777f1, wireframe:false});
| |
| − | var cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
| |
| − | cylinder.position.x = 0;
| |
| − | cylinder.position.y = 0;
| |
| − | cylinder.position.z = 0;
| |
| − | cylinder.rotation.x = 0.5*Math.PI;
| |
| − | cylinder.rotation.y = 0;
| |
| − | cylinder.rotation.z = 0;
| |
| − | scene.add(cylinder);
| |
| − |
| |
| − | // устанавливаем источник света
| |
| − |
| |
| − | var spotLight = new THREE.SpotLight(0xffffff);
| |
| − | spotLight.position.set(-40,60,40);
| |
| − | scene.add(spotLight);
| |
| − |
| |
| − |
| |
| − | var geometry = new THREE.Geometry();
| |
| − | geometry.vertices.push(new THREE.Vector3(0, 0, 2.51));
| |
| − | geometry.vertices.push(new THREE.Vector3(-4,0,2.51));
| |
| − |
| |
| − | var line = new THREE.Line(geometry, material);
| |
| − | line.geometry.verticesNeedUpdate = true;
| |
| − | geometry.dynamic = true;
| |
| − |
| |
| − | scene.add(line);
| |
| − | //задаем тени
| |
| − |
| |
| − | render.shadowMapEnabled = true;
| |
| − | plane.receiveShadow = true;
| |
| − | cube.castShadow = true;
| |
| − | spotLight.castShadow = true;
| |
| − |
| |
| − | //задаем положение камеры
| |
| − | camera.position.x =0;
| |
| − | camera.position.y = 0;
| |
| − | camera.position.z = 60;
| |
| − | camera.lookAt(scene.position);
| |
| − | $("#webGL").append(render.domElement);
| |
| − |
| |
| − | //добавляем ползунки для настройки скорости вращения и радиуса цилиндра
| |
| − | var controls = new function()
| |
| − | {
| |
| − | this.rotationSpeed = -0.02;
| |
| − | this.bouncingSpeed = 0.03;
| |
| − | this.radius = 1;
| |
| − | }
| |
| − |
| |
| − | var gui = new dat.GUI();
| |
| − | gui.add(controls,'rotationSpeed',0,0.5);
| |
| − | gui.add(controls,'radius',0,2);
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | ccontrols = new THREE.OrbitControls(camera);
| |
| − | | |
| − | renderer();
| |
| − |
| |
| − | // функция, в уоторой задаются законы, по которым работает кривошипно0шатунный механизм
| |
| − | function renderer()
| |
| − | {
| |
| − | stats.update();
| |
| − | cylinder.rotation.y -=controls.rotationSpeed;
| |
| − | step += controls.rotationSpeed;
| |
| − | co = Math.cos(step); // в целях оптимизации
| |
| − | si = Math.sin(step);
| |
| − | cube.position.x =20-4*controls.radius*(co);
| |
| − | cube.position.y = 0;
| |
| − | line.rotation.z-=controls.rotationSpeed;
| |
| − | cube2.rotation.z-=controls.rotationSpeed;
| |
| − | v = 20-4*controls.radius*co + 4*controls.radius*co ; //в целях оптимизации
| |
| − | u = - 4*controls.radius*si ;
| |
| − | cube3.position.x = ((-4*controls.radius*co) + (20-4*controls.radius*co))/2;
| |
| − | cube3.position.y = (4*controls.radius*si)/2;
| |
| − | cube3.rotation.z = Math.asin(u/Math.sqrt(v*v + u*u));
| |
| − | cylinder.scale.set(controls.radius,1,controls.radius); //связь данных настраеваемых ползунками с общей программой
| |
| − | cube2.scale.set(controls.radius,1,1);
| |
| − | requestAnimationFrame(renderer);
| |
| − | ccontrols.update();
| |
| − | document.getElementById("td1").innerHTML = -20 + cube.position.x ; //даные, который будут выведены в таблицу
| |
| − | document.getElementById("td2").innerHTML =4*controls.radius ;
| |
| − | render.render(scene, camera);
| |
| − |
| |
| − | }
| |
| − | }
| |
| − | | |
| − | function initStats()
| |
| − | {
| |
| − | var stats = new Stats();
| |
| − | stats.setMode(0);
| |
| − | stats.domElement.style.position = 'absolute';
| |
| − | stats.domElement.style.left = '0px';
| |
| − | stats.domElement.style.top = '0px';
| |
| − | $("#stats").append(stats.domElement);
| |
| − | return stats;
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − | </div>
| |
| − | | |
| − | При работе над проектом использована библиотека Three.js. Это легковесная кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработки веб-приложений. Three.js скрипты могут использоваться совместно с элементом HTML5 CANVAS, SVG или WebGL. | |
| | | | |
| | == Используемые библиотеки == | | == Используемые библиотеки == |
| Строка 184: |
Строка 21: |
| | * В нижней части программы выводятся значения положения ползуна и радиус цилиндра. | | * В нижней части программы выводятся значения положения ползуна и радиус цилиндра. |
| | | | |
| − | == Решение частного случая == | + | == Визуальное представление == |
| − | | |
| − | '''''Условия задачи:''''' В кривошипном механизме длина кривошипа <math> l_{OA} = 40 </math>см, длина шатуна <math> l_{AB} = 2 </math>м; кривошип вращается равномерно с угловой скоростью, равной 6π рад/с. Найти угловую скорость ω шатуна и скорость средней его точки M при четырех положениях кривошипа, для которых угол AOB соответственно равен 0,<math> \frac{π}{2}\ </math>, <math> π </math>, <math>\frac{3π}{2}\</math>.
| |
| − | [[Файл:Zadach.png|thumb|300px]]
| |
| − | | |
| − | | |
| − | '''''Рещение:'''''
| |
| − | | |
| − | <math>\alpha= \frac{π}{2}\ : </math> - угол AOB
| |
| − | | |
| − | | |
| − | <math> v_{A} = l_{OA} * ω = 753,6 </math>см/c
| |
| − | | |
| − | <math> v_{A}‖v_{B} </math>
| |
| − | | |
| − | <math>\Downarrow </math>
| |
| − | | |
| − | <math> ω _{AB} = 0</math> , <math>v_{M} =v_{A} </math>
| |
| − | | |
| − | | |
| − | <math>\alpha= 0, π, \frac{3π}{2}\ : </math> - угол AOB
| |
| − | | |
| − | <math> ω _{AB} = \frac{v_{A}}{l_{AB}}\ = \frac{6}{5}\ * π </math>
| |
| | | | |
| | | | |
| − | <math> v_{M} = ω _{AB}*l_{AB} = \frac{v_{A}}{2}\ = 376,8 </math> см/c
| + | В основе визуализации лежит Модель-Представление. Виджет(окно) заполнения формы сортировки и вывода результата состоит из : |
| | + | * Окно сортировки по имени ( см. Однострочное текстовое поле QLineEdit) |
| | + | * Окна сортировки по дате дд.мм.гггг ( см. Выпадащий список QComboBox) |
| | + | * Поле для вывода результата соритровки ( см. создание модель-представления QStandardItemModel) |
| | + | * Кнопка передачи данных "GO!" ( cм. QPushButton) |
