Мещерский. Задача 4.57 — различия между версиями
| Строка 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>
