Редактирование: Мещерский. Задача 5.8

'''Мещерский Задача 5.8'''

Визуализация 3D-задачи по статике на JavaScript 

Исполнитель: [[Рубинова Раиса]]

Группа 23604/1
Кафедра Теоретической механики

==Формулировка задачи==

Три груза A, B, C веса 10 H, 30 H и 60 H соответственно лежат на плоскости, наклоненной под углом a к горизонту. Грузы соединены тросами, как показано на рисунке. Коэффициенты трения между грузами и плоскостью Fa = 0,1, Fb = 0,25 и Fc = 0,5 соответственно. Определить угол a, при котором тела равномерно движутся вниз по плоскости. Найти также натяжения тросов Tab и Tbc

[[File:5.8.png]]

==Решение задачи==

{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Rubinova/Statics/M1.html |width=830 |height=600 |border=0 }}


<div class="mw-collapsible mw-collapsed" style="width:100%" >
<syntaxhighlight lang="javascript" line start="1" enclose="div">

<!DOCTYPE html>
<html>
<head>
<title> Задача из Мещерского </title>
<script src = "three.js">
</script>
<script src = "stats.min.js">
</script>
<script src = "OrbitControls.js" >
</script>
<script src = "dat.gui.js">
</script>
<style>
  body 
  {
  margin:0;
  overflow:hidden;
  }
</style>
</head>
<body>

<div id = "WebGL"> </div>
<div id = "Stats-output"> </div>

<script>

var renderer,scene,camera,plane,stats,al,controls,c1,c2,c3,line1,line2,arr1,arr1_1,arr1_2,arr1_3,arr1_t,arr2,arr2_1,arr2_2,arr2_t,arr3,arr3_1,arr3_3,arr3_t;

/////    ЗАДАНИЕ ПАРАМЕТРОВ, УКАЗАННЫХ В ЗАДАЧЕ    /////

var f2 = 0.1;
var f1 = 0.25;
var f3 = 0.5;
var P1 = 30;
var P2 = 10;
var P3 = 60;


function init()
{
scene = new THREE.Scene();    // создаем сцену
camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);    // создаем камеру
renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(0xEEEEEE, 1);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true;
    
var planeGeometry = new THREE.PlaneGeometry(100,50,1,1);  // задаем плоскость: ее ширину и высоту
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xDEB887});    // задаем материал и цвет плоскости
plane = new THREE.Mesh(planeGeometry,planeMaterial);   // создаем плоскость с заданными параметрами

//var axes = new THREE.AxisHelper(20);    // создаем координатные оси
//scene.add(axes);

control = new THREE.OrbitControls(camera,renderer.domElement);

controls = new function()     // создаем переключатели, позволяющие изменять входные параметры
{
this.weight1 = 30;    // вес первого тела  
this.weight2 = 10;    // вес второго тела
this.weight3 = 60;    // вес третьего тела
this.coefficient1 = 0.25;    // коэффициент трения первого тела
this.coefficient2 = 0.1;    // коэффициент трения второго тела
this.coefficient3 = 0.5;    // коэффициент трения третьего тела
this.displayForces = true;    // модуль отображения задачи
this.angle = "angle = ";    // вывод полученных в ходе решения задачи значений
this.t12 = "T12 = ";
this.t13 = "T13 = ";
}

var gui = new dat.GUI();    // позволяем менять каждый из параметров в определенном диапазоне, в случае изменения вызываем функцию, перестраивающую выводимую на экран картинку
gui.add(controls, 'weight1',0,100).onChange(ReDraw);
gui.add(controls, 'weight2',0,100).onChange(ReDraw);
gui.add(controls, 'weight3',0,100).onChange(ReDraw);
gui.add(controls, 'coefficient1',0,1).onChange(ReDraw);
gui.add(controls, 'coefficient2',0,1).onChange(ReDraw);
gui.add(controls, 'coefficient3',0,1).onChange(ReDraw);
gui.add(controls, 'displayForces').onChange(Change);    // параметр, определяющий вариант отображения задачи (с отображением сил и без отображения)
gui.add(controls, 'angle').listen();
gui.add(controls, 't12').listen();
gui.add(controls, 't13').listen();

stats = initStats();
Draw();
renderScene();
}

/////

function Change()    // функция, меняющая вариант отображения задачи
{
if (controls.displayForces == true)   // если требуется отображение сил
  {VisionTrue();}
if (controls.displayForces == false)   // если не требуется отображение сил
  {VisionFalse();}
}

function VisionTrue()    // функция, рисующая задачу с отображением сил
{
ReDraw();
}

function VisionFalse()    // общая картинка задача без отображения сил
{
ReDraw();
cm1.opacity = 1;    // делаем тела непрозрачными
cm2.opacity = 1;
cm3.opacity = 1;
arr1.visible = false;      // убираем векторы, отображающие силы
arr1_1.visible = false;
arr1_2.visible = false;
arr1_3.visible = false;
arr1_t.visible = false;
arr2.visible = false;
arr2_1.visible = false;
arr2_2.visible = false;
arr2_t.visible = false;
arr3.visible = false;
arr3_1.visible = false;
arr3_3.visible = false;
arr3_t.visible = false;
renderScene();
}


function ReDraw()    // функция, перерисовывающая всю картинку
{
plane.remove(c1);    // удаляем ранее созданные объекты
plane.remove(c2);
plane.remove(c3);
scene.remove(plane);
P1 = controls.weight1;    // меняем значения параметров на те, что ввел пользователь
P2 = controls.weight2;
P3 = controls.weight3;
f1 = controls.coefficient1;
f2 = controls.coefficient2;
f3 = controls.coefficient3;
Draw();
}

function Draw()
{
al = Math.atan((P1*f1+P2*f2+P3*f3)/(P1+P2+P3));
controls.angle = "angle = " + al;
//alert (al);

plane.rotation.x = - 0.5*Math.PI;   // задаем поворот плоскости в пространстве
plane.rotation.y = - al;
plane.position.x = 10;  // задаем положение плоскости в пространстве
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);    // добавляем в созданную нами сцену созданную плоскость

/////    СОЗДАНИЕ ТРЕХ ТЕЛ, ЛЕЖАЩИХ НА ПЛОСКОСТИ   /////

var cg1 = new THREE.BoxGeometry (10,5,5);   // задаем геометрию первого тела (среднее)
cm1 = new THREE.MeshBasicMaterial( { opacity:0.23, color: 0xDAA520,transparent:true } );    // задаем материал 1-ого тела
c1 = new THREE.Mesh(cg1,cm1);    // создаем тело с заданными геометрией и материалом
c1.position.z = c1.geometry.parameters.depth/2;    // смещаем его центр из точки (0,0,0), чтобы тело "легло" на плоскость
plane.add(c1);    // добавляем тело в сцену

var cg2 = new THREE.BoxGeometry (5, 2.5, 2.5);    // задаем геометрию второго тела (левое)
cm2 = new THREE.MeshBasicMaterial( {opacity:0.23, color: 0xCD853F, transparent: true});   // задаем материал
c2 = new THREE.Mesh(cg2,cm2);    // создаем тело с заданными геометрией и материалом
c2.position.z = c2.geometry.parameters.depth/2;    // смещаем его центр из точки (0,0,0), чтобы тело "легло" на плоскость
c2.position.x = -4*c2.geometry.parameters.width;
plane.add(c2);     // добавляем тело в сцену

var cg3 = new THREE.BoxGeometry (20, 10, 10);    // задаем геометрию третьего тела (правое)
cm3 = new THREE.MeshBasicMaterial( {opacity:0.23, color: 0xFFDEAD, transparent: true});    // задаем материал 
c3 = new THREE.Mesh(cg3, cm3);    // создаем тело с заданными геометрией и материалом
c3.position.x = 2*c3.geometry.parameters.width;    // смещаем его центр из точки (0,0,0), чтобы тело "легло" на плоскость
c3.position.z = c3.geometry.parameters.depth/2;
plane.add(c3);     // добавляем тело в сцену

/////    СОЗДАНИЕ НИТЕЙ, СОЕДИНЯЮЩИХ ТЕЛА    /////

var lg1 = new THREE.Geometry();    // создаем новую геометрию, предназначенную для изображения линии
lg1.vertices.push(
  new THREE.Vector3(c1.geometry.parameters.width/2,0,0),    // задаем координату начала
  new THREE.Vector3(3/2*c3.geometry.parameters.width,0,0)      // задаем координату конца
);
var lm = new THREE.LineBasicMaterial({color: 0xA0522D});    // задаем материал
line1 = new THREE.Line(lg1, lm);    // задаем линию с указанными координатами и материалом
c1.add(line1);

var lg2 = new THREE.Geometry();    // создаем новую геометрию, предназначенную для изображения линии
lg2.vertices.push(
  new THREE.Vector3(c2.geometry.parameters.width/2,0,0),    // задаем координату начала
  new THREE.Vector3(3*c2.geometry.parameters.width,0,0)      // задаем координату конца
);
line2 = new THREE.Line(lg2, lm);    // задаем линию с указанными координатами и материалом
c2.add(line2);

/////    СОЗДАНИЕ ВЕКТОРОВ, ОТОБРАЖАЮЩИХ СИЛЫ, ДЕЙСТВУЮЩИЕ НА ТЕЛА    /////

var ar = new THREE.Vector3( 1, 2, 0 );    // создаем геометрию вектора, отображающего вес тела
var ar1 = new THREE.Vector3 (0, 0, -1);    // создаем геометрию вектора, отображающего силу тяжести, действующую на тело
var origin = new THREE.Vector3( 0, 0, 0 );    // задаем точку начала
var hex = 0xDC143C;    // задаем цвет для веса
var hex1 = 0x8B0000;   // цвет, отображающий вектора силы тяжести
var hex2 = 0xFF4500;  // цвет, отображающий вектора сил натяжения
var hex3 = 0x191970;   // цвет, отображающий силы трения

var length1 = P1/2;    // задаем длину (численно равную исходному параметру в задаче)
arr1 = new THREE.ArrowHelper( ar, origin, length1, hex );    // создаем срелочку
arr1.rotation.x = 0.5*Math.PI;    // поворачиваем ее, чтобы ее ориентация соответствовала
arr1.rotation.y = 0.5*Math.PI;
c1.add( arr1 );    // прикрепляем вектор к первому телу

arr1_1 = new THREE.ArrowHelper (ar1, origin, length1, hex1);    // создаем стрелочку 
arr1_1.rotation.z = al;    // поворачиваем ее согласно ориентации плоскости
c1.add( arr1_1);   // прикрепляем к нужному телу

var ar1_3 = new THREE.Vector3( 1, 0, 0 );    // создаем геометрию вектора, отображающего натяжение нити, соединяющей первое и третье тело
arr1_3 = new THREE.ArrowHelper( ar1_3, origin, P3*(f3-Math.tan(al)), hex2);  // создаем стрелочку
c1.add( arr1_3 );    // прикрепляем к нужному телу

controls.t13 = "T13 = " + P3*(f3-Math.tan(al));    // вывод решения на экран

var ar1_2 = new THREE.Vector3(-1,0,0);    // создаем геометрию вектора, отображающего натяжение нити, соединяющей первое и второе тело
arr1_2 = new THREE.ArrowHelper( ar1_2, origin, P2*(Math.tan(al)-f2), hex2);    // создаем стрелочку
c1.add( arr1_2 );    // прикрепляем к нужному телу

controls.t12 = "T12 = " + P2*(Math.tan(al)-f2);    // вывод решения на экран

arr1_t = new THREE.ArrowHelper( ar1_3, origin, f1*length1, hex3);    // создаем вектор, отображающий силу трения
c1.add( arr1_t );    // прикрепляем к нужному телу

var length2 = P2/2;    // задаем длину (численно равную исходному параметру в задаче)
arr2 = new THREE.ArrowHelper( ar, origin, length2, hex );    // создаем срелочку
arr2.rotation.x = 0.5*Math.PI;    // поворачиваем ее, чтобы ее ориентация соответствовала
arr2.rotation.y = 0.5*Math.PI;
c2.add( arr2 );    // прикрепляем вектор ко второму телу

arr2_2 = new THREE.ArrowHelper (ar1, origin, length2, hex1);    // создаем стрелочку 
arr2_2.rotation.z = al;    // поворачиваем ее согласно ориентации плоскости
c2.add( arr2_2);   // прикрепляем к нужному телу

var ar2_1 = new THREE.Vector3( 1, 0, 0);    // создаем геометрию вектора, отображающего натяжение нити, соединяющей второе и первое тело
arr2_1 = new THREE.ArrowHelper( ar2_1, origin, P2*(Math.tan(al)-f2), hex2);    // создаем стрелочку
c2.add( arr2_1 );    // прикрепляем к нужному телу

arr2_t = new THREE.ArrowHelper( ar1_3, origin, f2*length2, hex3);    // создаем вектор, отображающий силу трения
c2.add( arr2_t );    // прикрепляем к нужному телу

var length3 = P3/2;    // задаем длину (численно равную исходному параметру в задаче)
arr3 = new THREE.ArrowHelper( ar, origin, length3, hex );    // создаем срелочку
arr3.rotation.x = 0.5*Math.PI;    // поворачиваем ее, чтобы ее ориентация соответствовала
arr3.rotation.y = 0.5*Math.PI;
c3.add( arr3 );    // прикрепляем вектор к третьему телу

var ar3_1 = new THREE.Vector3( -1, 0, 0);    // создаем геометрию вектора, отображающего натяжение нити, соединяющей третье и первое тело
arr3_1 = new THREE.ArrowHelper( ar3_1, origin, P3*(f3-Math.tan(al)), hex2);    // создаем стрелочку
c3.add( arr3_1 );    // прикрепляем к нужному телу

arr3_3 = new THREE.ArrowHelper (ar1, origin, length3, hex1);    // создаем стрелочку 
arr3_3.rotation.z = al;    // поворачиваем ее согласно ориентации плоскости
c3.add( arr3_3);   // прикрепляем к нужному телу

arr3_t = new THREE.ArrowHelper( ar1_3, origin, f3*length3, hex3);    // создаем вектор, отображающий силу трения
c3.add( arr3_t );    // прикрепляем к нужному телу
  
camera.position.x = -30;    // задаем местоположение камеры
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
document.getElementById("WebGL").appendChild(renderer.domElement);

renderer.render(scene,camera);
}

function renderScene()
{
stats.update();
P1 = controls.weight1;
P2 = controls.weight2;
P3 = controls.weight3;
f1 = controls.coefficient1;
f2 = controls.coefficient2;
f3 = controls.coefficient3;
requestAnimationFrame(renderScene);
renderer.render(scene,camera);
}


function initStats() //window in the left corner
{
stats  = new Stats();
stats.setMode(0);
stats.domElement.style.position = '0px';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}

function onResize()  //moving of camera
{
  camera.aspect = window.innerWidth/window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth,window.innerHeight);
}

window.onload = init;
window.addEventListener('resize',onResize,true);
</script>
</div>