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

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

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

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

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

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

Два гладких однородных шара С<sub>1</sub> и С<sub>2</sub>, радиусы которых R<sub>1</sub> и R<sub>2</sub>, а веса P<sub>1</sub> и P<sub>2</sub>, подвешены на веревках AB и AD в точке A; AB = l<sub>1</sub>; AD = l<sub>2</sub>; l<sub>1</sub> + R<sub>1</sub>= l<sub>2</sub> + R<sub>2</sub>; угол BAD = α. Определить угол θ, образуемый веревкой AD с горизонтальной плоскостью AE, натяжения веревок T<sub>1</sub>, T<sub>2</sub> и силу давления одного шара на другой.



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

{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Timoshenko/Mesherskyi/ZadachaMesherskyi457.html |width=1200 |height=600 |border=0 }}


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

<!DOCTYPE html>

<head>
<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>

    <body>

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

        <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, 'Length1').listen(); //следующие параметры не изменяются пользователем, а отображают необходимые значения параметров, которые известны или должны быть найдены
            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>