Мещерский. Задача 4.57 — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
Строка 25: Строка 25:
 
<html>
 
<html>
 
<head>
 
<head>
<script src = "three.js">
+
<script src = "http://tm.spbstu.ru/htmlets/Timoshenko/Mesherskyi/three.js">
 
</script>
 
</script>
<script src = "stats.min.js">
+
<script src = "http://tm.spbstu.ru/htmlets/Timoshenko/Mesherskyi/stats.min.js">
 
</script>
 
</script>
<script src = "OrbitControls.js" >
+
<script src = "http://tm.spbstu.ru/htmlets/Timoshenko/Mesherskyi/OrbitControls.js" >
 
</script>
 
</script>
<script src = "dat.gui.js">
+
<script src = "http://tm.spbstu.ru/htmlets/Timoshenko/Mesherskyi/dat.gui.js">
 
</script>
 
</script>
 
     <style>
 
     <style>
Строка 244: Строка 244:
 
             window.addEventListener('resize', onResize, false);
 
             window.addEventListener('resize', onResize, false);
 
         </script>
 
         </script>
 +
</head>
 +
</body>

Версия 03:50, 2 июня 2017

Мещерский. Задача 4.57

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

Исполнитель: Тимошенко Валентина

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

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

Два гладких однородных шара С1 и С2, радиусы которых R1 и R2, а веса P1 и P2, подвешены на веревках AB и AD в точке A; AB = l1; AD = l2; l1 + R1= l2 + R2; угол BAD = α. Определить угол θ, образуемый веревкой AD с горизонтальной плоскостью AE, натяжения веревок T1, T2 и силу давления одного шара на другой.


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


<syntaxhighlight lang="javascript" line start="1" enclose="div">

<!DOCTYPE html> <html> <head> <script src = "http://tm.spbstu.ru/htmlets/Timoshenko/Mesherskyi/three.js"> </script> <script src = "http://tm.spbstu.ru/htmlets/Timoshenko/Mesherskyi/stats.min.js"> </script> <script src = "http://tm.spbstu.ru/htmlets/Timoshenko/Mesherskyi/OrbitControls.js" > </script> <script src = "http://tm.spbstu.ru/htmlets/Timoshenko/Mesherskyi/dat.gui.js"> </script>

   <style>
       body {
           margin: 0;
           overflow: hidden;
       }
   </style>
   <body>
       <script>
           var renderer, camera, scene, stats, controls;
           function init(){
           scene = new THREE.Scene(); //сцена
           camera = new THREE.PerspectiveCamera(10, window.innerWidth / window.innerHeight, 0.1, 1000); //камера
           renderer = new THREE.WebGLRenderer();
           renderer.setClearColor(0xEEEEEE, 1.0); //цвет
           renderer.setSize(window.innerWidth, window.innerHeight); //задаем размеры рендерера
           renderer.shadowMap.enabled = true;

controls = new function() { //функция контроля параметров this.Weight1 = 20; //вес шара слева

           this.Weight2 = 10; //вес шара справа 
           this.Alfa = 0.02;  //угол между нитями

this.Radius1=1; //радиус шара слева this.Coefficient=1.5; //коэффициент связи радиусов шаров this.Radius2=this.Radius1; //радиус шара справа this.Length1= "Length1 ="; //длина нити слева this.Length2= "Length2 ="; // длина нити справа this.Alfa= "Alfa ="; //угол между нитями this.Tetta = "Tetta ="; //угол между нитью и плоскостью

           this.T1 = "T1 = ";  //сила нятажения нити слева

this.T2 = "T2 = "; //сила натяжения нити справа this.N1 = "N1 = "; //сила давления левого шара на правый this.N2 = "N2 = "; //сила давления правого шара на левый

           }
           var gui = new dat.GUI() //функция управления ползунками (изменение параметров)

gui.add(controls, 'Radius1', 1, 2, 0.05).onChange(RePict);

           gui.add(controls, 'Coefficient', 0.125, 2, 0.25).onChange(RePict);		
           gui.add(controls, 'Weight1', 20, 70, 10).onChange(RePict);

gui.add(controls, 'Weight2', 10, 30, 5).onChange(RePict);

           gui.add(controls, 'Length2').listen();  //следующие параметры не изменяются пользователем, а отображают необходимые значения параметров, которые известны или должны быть найдены

gui.add(controls, 'Alfa').listen(); gui.add(controls, 'Tetta').listen(); gui.add(controls, 'T1').listen();

           gui.add(controls, 'T2').listen();

gui.add(controls, 'N1').listen(); gui.add(controls, 'N2').listen();

           control = new THREE.OrbitControls(camera, renderer.domElement); //функция управления 
           stats = initStats();

Pict();

           renderScene();

}

function RePict(){ //функция перерисовки конструкции при изменении параметров

scene.remove(box); scene.remove(sphere1); scene.remove(sphere2); scene.remove(line1); scene.remove(line2); scene.remove(arrow1); scene.remove(arrow2); scene.remove(arrow3); scene.remove(arrow4); scene.remove(arrow5); scene.remove(arrow6);

           Pict();		

renderScene(); }

function Pict(){ //функция рисования

//расчет данных, которые требуется найти в задачe и угла альфа, который используется при решении chisl = controls.Radius1*controls.Radius1 + controls.Coefficient*controls.Radius2*controls.Coefficient*controls.Radius2+32-(controls.Radius1+controls.Coefficient*controls.Radius2)*(controls.Radius1+controls.Coefficient*controls.Radius2); znam = 2*Math.sqrt(controls.Radius1*controls.Radius1+16)*Math.sqrt(controls.Coefficient*controls.Radius2*controls.Coefficient*controls.Radius2+16); Alfa = Math.acos(chisl/znam); Tetta = Math.atan(-(this.Weight2 + this.Weight1 * Math.cos(this.Alfa)) / (this.Weight1 * Math.sin(this.Alfa))); //угол тетта

               T1 = this.Weight1 * (Math.sin(this.Tetta - 0.5 * this.Alfa) / Math.cos(0.5 * this.Alfa)); ///сила натяжения нити 1

T2 = this.Weight2 * (Math.sin(this.Tetta - 0.5 * this.Alfa) / Math.cos(0.5 * this.Alfa)); //сила натяжения нити 2 N1 = (this.Weight1 * Math.abs(Math.cos(this.Tetta))) / Math.cos(0.5 * this.Alfa); //сила действия левого шара на правый N2 = (this.Weight2 * Math.abs(Math.cos(this.Tetta))) / Math.cos(0.5 * this.Alfa); //сила действия правого шара на левый

var axes = new THREE.AxisHelper(4); //оси координат

               scene.add(axes);

axes.position.y=4;

box = new THREE.BoxGeometry(9, 0.5, 15); //создаем плоскость, к которой будет крепиться конструкция

               boxM = new THREE.MeshBasicMaterial({
                   opacity: 0.9,
                   color: 0x9475736,
                   transparent: true
               });				

box = new THREE.Mesh(box, boxM); box.position.y=4;

               scene.add(box);

var sphereG1 = new THREE.SphereGeometry(controls.Radius1, 50, 50); //создаем шар слева var mat_s2 = new THREE.MeshBasicMaterial({

                   opacity: 0.5,
                   color: 0x764367,
                   transparent: true
               });
               sphere1 = new THREE.Mesh(sphereG1, mat_s2);
               sphere1.castShadow = true;
               scene.add(sphere1);
               sphere1.position.z = controls.Radius1;

var sphereG = new THREE.SphereGeometry(controls.Coefficient*controls.Radius2, 100, 100); //создаем шар справа var mat_s1 = new THREE.MeshBasicMaterial({

                   opacity: 0.7,
                   color: 0x0656ff,
                   transparent: true
               });
               sphere2 = new THREE.Mesh(sphereG, mat_s1);
               sphere2.castShadow = true;
               scene.add(sphere2);
               sphere2.position.z = -controls.Coefficient*controls.Radius2;

var lineGeometry = new THREE.Geometry(); //Нить справа

               lineGeometry.vertices.push(new THREE.Vector3(0, 0, 0)); //Указываем вектор первой точки
               lineGeometry.vertices.push(new THREE.Vector3(0, -4, sphere1.position.z)); //Указываем вектор второй точки
               var lineMaterial = new THREE.LineBasicMaterial({
                   color: 0x00ffff,
                   linewidth: 500
               });
               line1 = new THREE.Line(lineGeometry, lineMaterial); //Создаем линию из созданной геометрии

line1.position.y=4;

               scene.add(line1);

var lineGeometry = new THREE.Geometry(); //Нить слева

               lineGeometry.vertices.push(new THREE.Vector3(0, 0, 0)); //Указываем вектор первой точки
               lineGeometry.vertices.push(new THREE.Vector3(0, -4, sphere2.position.z)); //Указываем вектор второй точки
               var lineMaterial1 = new THREE.LineBasicMaterial({
                   color: 0xf4ff00,
                   linewidth: 500
               });
               line2 = new THREE.Line(lineGeometry, lineMaterial1); //Создаем линию из созданной геометрии

line2.position.y=4;

               scene.add(line2);

//слева arrow1 = new THREE.ArrowHelper(new THREE.Vector3(0, -1, 0), new THREE.Vector3(0, 0, sphere1.position.z), controls.Weight1/20, 0x4500ff, 0.5, 0.5); scene.add(arrow1); //стрелка вниз, обозначает вес шара слева arrow2 = new THREE.ArrowHelper(new THREE.Vector3(0, 0, -1), new THREE.Vector3(0, 0, sphere1.position.z - controls.Radius1), controls.N1/5, 0xff0000, 0.5, 0.5); scene.add(arrow2); //стрелка вправо, обозначает силу давления левого шара на правый //справа arrow3 = new THREE.ArrowHelper(new THREE.Vector3(0, 0, 1), new THREE.Vector3(0, 0, sphere2.position.z + controls.Coefficient*controls.Radius2), controls.N2/5, 0x00ff00, 0.5, 0.5); scene.add(arrow3);//стрелка влево, обозначает силу давления правого шара на левый arrow4 = new THREE.ArrowHelper(new THREE.Vector3(0, -1, 0), new THREE.Vector3(0, 0, sphere2.position.z), controls.Weight2/10, 0x756238, 0.5, 0.5); scene.add(arrow4); //стрелка вниз, обозначает вес шара справа

arrow5 = new THREE.ArrowHelper(new THREE.Vector3 (0, 1, 0), new THREE.Vector3(0, 0, sphere1.position.z), controls.T1/20, 0x987823, 0.35, 0.35); arrow5.rotation.x= -Math.PI/2 + Math.acos(controls.Radius1/Math.sqrt(controls.Radius1*controls.Radius1+16)) arrow5.position.y = controls.Radius1*Math.sin(Math.acos(controls.Radius1/Math.sqrt(controls.Radius1*controls.Radius1+16))) arrow5.position.z = sphere1.position.z - controls.Radius1*Math.cos(Math.acos(controls.Radius1/Math.sqrt(controls.Radius1*controls.Radius1+16))); scene.add(arrow5);

arrow6 = new THREE.ArrowHelper(new THREE.Vector3 (0, 1, 0), new THREE.Vector3(0, 0, sphere2.position.z), controls.T2/20, 0x573929, 0.35, 0.35); arrow6.rotation.x= Math.PI/2 - Math.acos((controls.Coefficient*controls.Radius2)/Math.sqrt(controls.Coefficient*controls.Radius2*controls.Coefficient*controls.Radius2+16)) arrow6.position.y = controls.Coefficient*controls.Radius2*Math.sin(Math.acos((controls.Coefficient*controls.Radius2)/Math.sqrt(controls.Coefficient*controls.Radius2*controls.Coefficient*controls.Radius2+16))); arrow6.position.z = sphere2.position.z + controls.Coefficient*controls.Radius2*Math.cos(Math.acos((controls.Coefficient*controls.Radius2)/Math.sqrt(controls.Coefficient*controls.Radius2*controls.Coefficient*controls.Radius2+16))); scene.add(arrow6);

               camera.position.x = 90; //точка обзора камеры
               camera.position.y = 20;
               camera.position.z = 20;
               camera.lookAt(scene.position); //направление камеры
               document.getElementById("WebGL").appendChild(renderer.domElement);

}

           function renderScene() //анимация, при изменении параметров передает вычисленные значения на панель с соответствующими обозначениями
           {

chisl = controls.Radius1*controls.Radius1 + controls.Coefficient*controls.Radius2*controls.Coefficient*controls.Radius2+32-(controls.Radius1+controls.Coefficient*controls.Radius2)*(controls.Radius1+controls.Coefficient*controls.Radius2); znam = 2*Math.sqrt(controls.Radius1*controls.Radius1+16)*Math.sqrt(controls.Coefficient*controls.Radius2*controls.Coefficient*controls.Radius2+16); controls.Length1 = Math.sqrt(controls.Radius1*controls.Radius1+16); //длина нити слева controls.Length2 = Math.sqrt(controls.Coefficient*controls.Radius2*controls.Coefficient*controls.Radius2+16); //длина нити справа controls.Alfa = Math.acos(chisl/znam); controls.Tetta = Math.atan((controls.Weight2 + controls.Weight1 * Math.cos(controls.Alfa)) / (controls.Weight1 * Math.sin(controls.Alfa))); //угол тетта

               controls.T1 = controls.Weight1 * (Math.sin(controls.Tetta - 0.5 * controls.Alfa) / Math.cos(0.5 * controls.Alfa)); ///сила натяжения нити 1

controls.T2 = controls.Weight2 * (Math.sin(controls.Tetta - 0.5 * controls.Alfa) / Math.cos(0.5 * controls.Alfa)); //сила натяжения нити 2 controls.N1 = (controls.Weight1 * Math.abs(Math.cos(controls.Tetta))) / Math.cos(0.5 * controls.Alfa); //сила действия первого шара на второй controls.N2 = (controls.Weight2 * Math.abs(Math.cos(controls.Tetta))) / Math.cos(0.5 * controls.Alfa); //сила действия второго шара на первый stats.update(); //обновление

               requestAnimationFrame(renderScene); //вызов анимации
               renderer.render(scene,camera);
           

}

           function initStats() 
           {
               stats = new Stats();
               renderer.shadowMap.enabled = true;
               return stats;

}

           function onResize() //функция управления "камерой"
           {
               camera.aspect = window.innerWidth / window.innerHeight;
               camera.updateProjectionMatrix();
               renderer.setSize(window.innerWidth, window.innerHeight);
           }

window.onload = init;

           window.addEventListener('resize', onResize, false);
       </script>

</head>

</body>