Текущая версия |
Ваш текст |
Строка 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=780|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();
| |
− |
| |
− | //определяем сцену
| |
− |
| |
− | 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. | | При работе над проектом использована библиотека Three.js. Это легковесная кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработки веб-приложений. Three.js скрипты могут использоваться совместно с элементом HTML5 CANVAS, SVG или WebGL. |
Строка 186: |
Строка 23: |
| == Решение частного случая == | | == Решение частного случая == |
| | | |
− | '''''Условия задачи:''''' В кривошипном механизме длина кривошипа <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>. | + | '''''Условия задачи:''''' В кривошипном механизме длина кривошипа <math> l_{OA} = 40 </math>см, длина шатуна <math> l_{AB} = 2 </math>м; кривошип вращается равномерно с угловой скоростью, равной 6π рад/с. Найти угловую скорость ω шатуна и скорость средней его точки M при четырех положениях кривошипа, для которых угол AOB соответственно равен 0, π/2, π, Зπ/2. |
− | [[Файл:Zadach.png|thumb|300px]]
| |
| | | |
| | | |
| '''''Рещение:''''' | | '''''Рещение:''''' |
− | | + | <math>\alpha= π/2 : |
− | <math>\alpha= \frac{π}{2}\ : </math> - угол AOB | |
− | | |
| | | |
| <math> v_{A} = l_{OA} * ω = 753,6 </math>см/c | | <math> v_{A} = l_{OA} * ω = 753,6 </math>см/c |
Строка 201: |
Строка 35: |
| <math>\Downarrow </math> | | <math>\Downarrow </math> |
| | | |
− | <math> ω _{AB} = 0</math> , <math>v_{M} =v_{A} </math> | + | <math> ω _{AB} = 0 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>\alpha= 0, π, Зπ/2 : |
| | | |
| + | ω _{AB} = \frac{v_{A}}{l_{AB}}\ = \frac{6}{5}\ * π </math> |
| | | |
| <math> v_{M} = ω _{AB}*l_{AB} = \frac{v_{A}}{2}\ = 376,8 </math> см/c | | <math> v_{M} = ω _{AB}*l_{AB} = \frac{v_{A}}{2}\ = 376,8 </math> см/c |