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

Версия 22:54, 8 мая 2017

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

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

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

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

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

<!DOCTYPE html> <head> <meta charset = "utf-8"> <title> Задача из Мещерского </title> <script src = "http://tm.spbstu.ru/htmlets/Ivanova/Threads/three.js"> </script> <script src = "http://tm.spbstu.ru/htmlets/Ivanova/Threads/stats.min.js"> </script> <script src = "http://tm.spbstu.ru/htmlets/Ivanova/Threads/OrbitControls.js"> </script> <script src = "http://tm.spbstu.ru/htmlets/Ivanova/Threads/dat.gui.js"> </script> <style>

</head>

<body>

var arrowHelper1,arrowHelper2,arrowHelper3,arrowHelper4,arrowHelper5,arrowHelper6,arrowHelper7,arrowHelper8; var renderer,scene,camera,spotLight,stats,A,B,C,controls, control,line1,line2,line3;

var d; var L; var Q; scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,1000); renderer = new THREE.WebGLRenderer();

       renderer.setClearColor(0xEEEEEE, 1.0);
       renderer.setSize(window.innerWidth, window.innerHeight);
       renderer.shadowMapEnabled = true;

function init() { var axes = new THREE.AxisHelper(40); scene.add(axes);

camera.position.x = 40; camera.position.y = 40; camera.position.z = 40;

camera.lookAt(scene.position); document.getElementById("WebGL").appendChild(renderer.domElement);

var spotLight = new THREE.SpotLight( 0xffffff );

       spotLight.position.set( -40, 60, -10 );
       spotLight.castShadow = true;
       scene.add( spotLight );

controls1 = new function() { this.weightQ = 3; // вес, приложенный в узле this.lengthd = 10; // расстояние между точкой закрепления нити и началом координат this.lengthL = 9; // длина нити this.Vectors = true; this.angleA = + 0; // вывод полученных в ходе решения задачи значений this.angleB = + 0; this.angleC = + 0; this.Ta = + 0; this.Tb = + 0; this.Tc = + 0; }

stats = initStats(); controls = new THREE.OrbitControls(camera,renderer.domElement); renderScene();

var gui = new dat.GUI(); var contr = gui.addFolder('Controls');

contr.add(controls1, 'weightQ',0,100); contr.add(controls1, 'lengthl',0,10); contr.add(controls1, 'lengthL',0.816, 10); contr.add(controls1, 'Vectors').onChange(Change);

var res = gui.addFolder('Result'); res.add(controls, 'angleA').listen(); res.add(controls, 'angleB').listen(); res.add(controls, 'angleC').listen(); res.add(controls, 'Ta').listen(); res.add(controls, 'Tb').listen(); res.add(controls, 'Tc').listen();

}

function renderScene() { stats.update(); requestAnimationFrame(renderScene);

Q1 = controls1.weightQ; d1 = controls1.lengthl; L1 = controls1.lengthL;

var Tlength = (d1 - Math.sqrt(3*L1*L1 - 2*d1*d1))*L1*Q1/(3*d1*(Math.sqrt(3*L1*L1 - 2*d1*d1))); var TClength = (d1 - Math.sqrt(3*L1*L1 - 2*d1*d1))*L1*Q1/(3*d1*(Math.sqrt(3*L1*L1 - 2*d1*d1)));

controls.Ta = + Tlength; // вывод решения на экран controls.Tb = + Tlength; // вывод решения на экран controls.Tc = + TClength; // вывод решения на экран

A = Math.asin((d1 - Math.sqrt(3*d1*d1 - 2*d1*d1))/(3*d1)); B = Math.atan((d1 - Math.sqrt(3*d1*d1 - 2*d1*d1))/(2*d1 + Math.sqrt(3*d1*d1 - 2*d1*d1) )); C = Math.acos((2*d1 + Math.sqrt(3*d1*d1 - 2*d1*d1))/(3*d1)); controls.angleA = + A; controls.angleB = + B; controls.angleC = + C;

Change();

renderer.render(scene,camera); }

function Change() { if (controls1.Vectors == true) Draw(); else Draw1(); }

function ClearScene() { // удаляем ранее созданные объекты scene.remove(line1); scene.remove(line2); scene.remove(line3); scene.remove(qq); scene.remove(vvTa); scene.remove(vvTc); scene.remove(vvTb); }

function ReDrawN()// рисуем нити { var ty = (1/3)*(d1 - ((3*L1)^2 - (2*d1)^2)^(1/2));

var lineGeometry = new THREE.Geometry();//Производная фигура lineGeometry.vertices.push(new THREE.Vector3( d1,0, 0));//Указываем вектор первой точки lineGeometry.vertices.push(new THREE.Vector3( ty,ty, ty));//Указываем вектор второй точки var lineMaterial = new THREE.LineBasicMaterial({color:0x00FF00, linewidth:500}); line1 = new THREE.Line(lineGeometry, lineMaterial);//Создаем линию из созданной геометрии scene.add(line1);//Добавляем объект на сцену

var lineGeometry = new THREE.Geometry();//Производная фигур lineGeometry.vertices.push(new THREE.Vector3( 0, d1,0));//Указываем вектор первой точки lineGeometry.vertices.push(new THREE.Vector3( ty,ty, ty));//Указываем вектор второй точки var lineMaterial = new THREE.LineBasicMaterial({color:0x00FF00, linewidth:500}); line2 = new THREE.Line(lineGeometry, lineMaterial);//Создаем линию из созданной геометрии scene.add(line2);//Добавляем объект на сцену

var lineGeometry = new THREE.Geometry();//Производная фигура lineGeometry.vertices.push(new THREE.Vector3( 0,0, d1));//Указываем вектор первой точки lineGeometry.vertices.push(new THREE.Vector3( ty,ty, ty));//Указываем вектор второй точки var lineMaterial = new THREE.LineBasicMaterial({color:0x00FF00, linewidth:500}); line3 = new THREE.Line(lineGeometry, lineMaterial);//Создаем линию из созданной геометрии scene.add(line3);//Добавляем объект на сцену }

function ReDrawV()//вектора { var ty = (1/3)*(d1 - ((3*L1)^2 - (2*d1)^2)^(1/2));

var vQ = new THREE.Vector3 (0, 0, -1); // создаем геометрию вектора, отображающего вес, приложенный к пересечению нитей var origin = new THREE.Vector3(ty,ty,ty); // задаем точку начала для векторов Q и Tc qq = new THREE.ArrowHelper( vQ, origin, Q1, 0xDC143C ); // создаем срелочку scene.add( qq ); // заносим на сцену

var vTa = new THREE.Vector3(ty, ty, ty); // создаем геометрию вектора, отображающего натяжение нити А var originA = new THREE.Vector3(d1,0,0); vvTa = new THREE.ArrowHelper( vTa, origin, Tlength , 0x8B0000); // создаем стрелочку scene.add( vvTa ); // заносим на сцену

var vTb = new THREE.Vector3( ty, ty, ty); // создаем геометрию вектора, отображающего натяжение нити В var originB = new THREE.Vector3(0,d1,0); vvTb = new THREE.ArrowHelper( vTb, originB, Tlength, 0x8B0000); // создаем стрелочку scene.add( vvTb ); // заносим на сцену

var vTc = new THREE.Vector3(-1, -1, 1 ); // создаем геометрию вектора, отображающего натяжение нити C var origin = new THREE.Vector3(ty,ty,ty); vvTc = new THREE.ArrowHelper( vTc, origin, TClength, 0x8B0000); // создаем стрелочку scene.add(vvTc ); // заносим на сцену }

function Draw1() { ClearScene(); ReDrawN(); }

function Draw() { ClearScene(); ReDrawV(); ReDrawN(); }

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;

</script>

</body>

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

Версия 22:54, 8 мая 2017

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

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

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Навигация

Инструменты

Поделиться

@@ Строка 33: / Строка 33: @@
 </script>
 <style>
-  body
+ </head>
-  {
-  margin:0;
-  overflow:hidden;
-  }
-</style>
-</head>
 <body>
 <div id = "WebGL"> </div>
 <div id = "Stats-output"> </div>
 <script>
+var arrowHelper1,arrowHelper2,arrowHelper3,arrowHelper4,arrowHelper5,arrowHelper6,arrowHelper7,arrowHelper8;
+var renderer,scene,camera,spotLight,stats,A,B,C,controls, control,line1,line2,line3;
-var renderer,scene,camera,plane,stats,A,B,Y,controls,line1,line2,line3;
+var d;
-/////    ЗАДАНИЕ ПАРАМЕТРОВ, УКАЗАННЫХ В ЗАДАЧЕ    /////
-var l;
 var L;
 var Q;
+scene = new THREE.Scene();
+camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,1000);
+renderer = new THREE.WebGLRenderer();
+        renderer.setClearColor(0xEEEEEE, 1.0);
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.shadowMapEnabled = true;
 function init()
 {
-scene = new THREE.Scene();    // создаем сцену
+var axes = new THREE.AxisHelper(40);
-camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);    // создаем камеру
+scene.add(axes);
-renderer = new THREE.WebGLRenderer();
+camera.position.x = 40;
+camera.position.y = 40;
+camera.position.z = 40;
+camera.lookAt(scene.position);
+document.getElementById("WebGL").appendChild(renderer.domElement);
+var spotLight = new THREE.SpotLight( 0xffffff );
+        spotLight.position.set( -40, 60, -10 );
+        spotLight.castShadow = true;
+        scene.add( spotLight );
+controls1 = new function()
+{
+this.weightQ = 3;    // вес, приложенный в узле
+this.lengthd = 10;    // расстояние между точкой закрепления нити и началом координат
+this.lengthL = 9;    // длина нити
+this.Vectors = true;
+this.angleA = '' + 0;    // вывод полученных в ходе решения задачи значений
+this.angleB =  '' + 0;
+this.angleC =  '' + 0;
+this.Ta =  '' + 0;
+this.Tb =  '' + 0;
+this.Tc =  '' + 0;
+}
+stats = initStats();
+controls = new THREE.OrbitControls(camera,renderer.domElement);
+renderScene();
+var gui = new dat.GUI();
+var contr = gui.addFolder('Controls');
+contr.add(controls1, 'weightQ',0,100);
+contr.add(controls1, 'lengthl',0,10);
+contr.add(controls1, 'lengthL',0.816, 10);
+contr.add(controls1, 'Vectors').onChange(Change);
+var res = gui.addFolder('Result');
+res.add(controls, 'angleA').listen();
+res.add(controls, 'angleB').listen();
+res.add(controls, 'angleC').listen();
+res.add(controls, 'Ta').listen();
+res.add(controls, 'Tb').listen();
+res.add(controls, 'Tc').listen();
-        renderer.setClearColor(0xEEEEEE, 1);
+}
-        renderer.setSize(window.innerWidth, window.innerHeight);
-        renderer.shadowMap.enabled = true;
+function renderScene()
+{
+stats.update();
+requestAnimationFrame(renderScene);
-var axes = new THREE.AxisHelper(20);    // создаем координатные оси
-scene.add(axes);
+Q1 = controls1.weightQ;
+d1 = controls1.lengthl;
+L1 = controls1.lengthL;
-control = new THREE.OrbitControls(camera,renderer.domElement);
+var Tlength = (d1 - Math.sqrt(3*L1*L1 - 2*d1*d1))*L1*Q1/(3*d1*(Math.sqrt(3*L1*L1 - 2*d1*d1)));
+var TClength = (d1 - Math.sqrt(3*L1*L1 - 2*d1*d1))*L1*Q1/(3*d1*(Math.sqrt(3*L1*L1 - 2*d1*d1)));
+controls.Ta = '' + Tlength;    // вывод решения на экран
+controls.Tb = '' + Tlength;    // вывод решения на экран
+controls.Tc = '' + TClength;    // вывод решения на экран
-controls = new function()     // создаем переключатели, позволяющие изменять входные параметры
-{
+A = Math.asin((d1 - Math.sqrt(3*d1*d1 - 2*d1*d1))/(3*d1));
-//this.weightQ = 3;    // вес, приложенный в узле
+B = Math.atan((d1 - Math.sqrt(3*d1*d1 - 2*d1*d1))/(2*d1 + Math.sqrt(3*d1*d1 - 2*d1*d1) ));
-//this.lengthl = 10;    // расстояние между точкой закрепления нити и началом координат
+C = Math.acos((2*d1 + Math.sqrt(3*d1*d1 - 2*d1*d1))/(3*d1));
-//this.lengthL = 9;    // длина нити
+controls.angleA = '' + A;
+controls.angleB = '' + B;
-this.displayForces = true;    // модуль отображения задачи
+controls.angleC = ''+ C;
-this.angleA = "angle A = ";    // вывод полученных в ходе решения задачи значений
-this.angleB = "angle B = ";
-this.angleY = "angle C = ";
-this.Ta = "Ta = ";
-this.Tb = "Tb = ";
-this.Tc = "Tc = ";
-}
-var gui = new dat.GUI();    // позволяем менять каждый из параметров в определенном диапазоне, в случае изменения вызываем функцию, перестраивающую выводимую на экран картинку
-gui.add(controls, 'weightQ',0,100).onChange(ReDraw);
-gui.add(controls, 'lengthl',0,10).onChange(ReDraw);
-gui.add(controls, 'lengthL',0.816*l, l).onChange(ReDraw);
-gui.add(controls, 'angleA').listen();
-gui.add(controls, 'angleB').listen();
-gui.add(controls, 'angleC').listen();
-gui.add(controls, 'Ta').listen();
-gui.add(controls, 'Tb').listen();
-gui.add(controls, 'Tc').listen();
-stats = initStats();
+Change();
-Draw();
-renderScene();
+renderer.render(scene,camera);
 }
-function VisionTrue()    // функция, рисующая задачу с отображением сил
+function Change()
 {
-ReDraw();
+if (controls1.Vectors == true)  Draw();
+else Draw1();
 }
-function ReDraw()    // функция, перерисовывающая всю картинку
+function ClearScene()
-{
+{ // удаляем ранее созданные объекты
-scene.remove(axes); // удаляем ранее созданные объекты
 scene.remove(line1);
 scene.remove(line2);
 scene.remove(line3);
-scene.remove(Ta);
+scene.remove(qq);
-scene.remove(Tb);
+scene.remove(vvTa);
-scene.remove(Tc);
+scene.remove(vvTc);
+scene.remove(vvTb);
-Q1 = controls.weightQ;    // меняем значения параметров на те, что ввел пользователь
-l1 = controls.lengthl;
-L1 = controls.lengthL;
-Draw();
 }
-function Draw()
+function ReDrawN()// рисуем нити
 {
-A = Math.asin((l1 - Math.sqrt(3*l1*l1 - 2*l1*l1))/(3*l1));
+var ty = (1/3)*(d1 - ((3*L1)^2 - (2*d1)^2)^(1/2));
-B = Math.atan((l1 - Math.sqrt(3*l1*l1 - 2*l1*l1))/(2*l1 + Math.sqrt(3*l1*l1 - 2*l1*l1) ));
-C = Math.acos((2*l1 + Math.sqrt(3*l1*l1 - 2*l1*l1))/(3*l1));
-controls.angle = "angleA = " + A;
-controls.angle = "angleB = " + B;
-controls.angle = "angleC = " + C;
+var lineGeometry = new THREE.Geometry();//Производная фигура
+lineGeometry.vertices.push(new THREE.Vector3( d1,0, 0));//Указываем вектор первой точки
+lineGeometry.vertices.push(new THREE.Vector3( ty,ty, ty));//Указываем вектор второй точки
+var lineMaterial = new THREE.LineBasicMaterial({color:0x00FF00, linewidth:500});
+line1 = new THREE.Line(lineGeometry, lineMaterial);//Создаем линию из созданной геометрии
+scene.add(line1);//Добавляем объект на сцену
-/////    СОЗДАНИЕ НИТЕЙ    /////
-var ty = (1/3)*(l1 - ((3*L1)^2 - (2*l1)^2)^(1/2));
+var lineGeometry = new THREE.Geometry();//Производная фигур
-var lg1 = new THREE.Geometry();    // создаем новую геометрию, предназначенную для изображения линии
+lineGeometry.vertices.push(new THREE.Vector3( 0, d1,0));//Указываем вектор первой точки
-lg1.vertices.push(
+lineGeometry.vertices.push(new THREE.Vector3( ty,ty, ty));//Указываем вектор второй точки
-  new THREE.Vector3(l1,0,0),    // задаем координату начала
+var lineMaterial = new THREE.LineBasicMaterial({color:0x00FF00, linewidth:500});
-  new THREE.Vector3(ty, ty, ty)      // задаем координату конца
+line2 = new THREE.Line(lineGeometry, lineMaterial);//Создаем линию из созданной геометрии
-);
+scene.add(line2);//Добавляем объект на сцену
-var lm1 = new THREE.LineBasicMaterial({color: 0xA0522D});    // задаем материал
-line1 = new THREE.Line(lg1, lm1);    // задаем линию с указанными координатами и материалом
-scene.add(line1);
-var lg2 = new THREE.Geometry();    // создаем новую геометрию, предназначенную для изображения линии
-lg2.vertices.push(
-  new THREE.Vector3(0, l1, 0),    // задаем координату начала
-  new THREE.Vector3(ty, ty, ty)      // задаем координату конца
-);
-var lm2 = new THREE.LineBasicMaterial({color: 0xA0522D});    // задаем материал
-line2 = new THREE.Line(lg2, lm2);    // задаем линию с указанными координатами и материалом
-scene.add(line2);
-var lg3 = new THREE.Geometry();    // создаем новую геометрию, предназначенную для изображения линии
-lg3.vertices.push(
-  new THREE.Vector3(0, 0, l1),    // задаем координату начала
-  new THREE.Vector3(ty, ty, ty)      // задаем координату конца
-);
-var lm3 = new THREE.LineBasicMaterial({color: 0xA0522D});    // задаем материал
-line3 = new THREE.Line(lg3, lm3);    // задаем линию с указанными координатами и материалом
-scene.add(line3);
-/////    СОЗДАНИЕ ВЕКТОРОВ, ОТОБРАЖАЮЩИХ СИЛЫ, ДЕЙСТВУЮЩИЕ НА ТЕЛА    /////
-var Tlength = (l1 - Math.sqrt(3*L1*L1 - 2*l1*l1))*L1*Q1/(3*l1*(Math.sqrt(3*L1*L1 - 2*l1*l1)));
-var TClength = (l1 - Math.sqrt(3*L1*L1 - 2*l1*l1))*L1*Q1/(3*l1*(Math.sqrt(3*L1*L1 - 2*l1*l1)));
+var lineGeometry = new THREE.Geometry();//Производная фигура
+lineGeometry.vertices.push(new THREE.Vector3( 0,0, d1));//Указываем вектор первой точки
+lineGeometry.vertices.push(new THREE.Vector3( ty,ty, ty));//Указываем вектор второй точки
+var lineMaterial = new THREE.LineBasicMaterial({color:0x00FF00, linewidth:500});
+line3 = new THREE.Line(lineGeometry, lineMaterial);//Создаем линию из созданной геометрии
+scene.add(line3);//Добавляем объект на сцену
+}
+function ReDrawV()//вектора
+{
+var ty = (1/3)*(d1 - ((3*L1)^2 - (2*d1)^2)^(1/2));
 var vQ = new THREE.Vector3 (0, 0, -1);    // создаем геометрию вектора, отображающего вес, приложенный к пересечению нитей
 var origin = new THREE.Vector3(ty,ty,ty);    // задаем точку начала для векторов Q и Tc
-var hex = 0xDC143C;    // задаем цвет для веса
+qq = new THREE.ArrowHelper( vQ, origin, Q1, 0xDC143C );    // создаем срелочку
-qq = new THREE.ArrowHelper( vQ, origin, Q1, hex );    // создаем срелочку
 scene.add( qq );    // заносим на сцену
 var vTa = new THREE.Vector3(ty, ty, ty);    // создаем геометрию вектора, отображающего натяжение нити А
-var originA =  new THREE.Vector3(l1,0,0);
+var originA =  new THREE.Vector3(d1,0,0);
-var hex1 = 0x8B0000;   // цвет, отображающий вектора сил натяжения
+vvTa = new THREE.ArrowHelper( vTa, origin, Tlength , 0x8B0000);    // создаем стрелочку
-vvTa = new THREE.ArrowHelper( vTa, origin, Tlength , hex1);    // создаем стрелочку
 scene.add( vvTa );    // заносим на сцену
 var vTb = new THREE.Vector3( ty, ty, ty);    // создаем геометрию вектора, отображающего натяжение нити В
-var originB =  new THREE.Vector3(0,l1,0);
+var originB =  new THREE.Vector3(0,d1,0);
-var hex1 = 0x8B0000;   // цвет, отображающий вектора сил натяжения
+vvTb = new THREE.ArrowHelper( vTb, originB, Tlength, 0x8B0000);    // создаем стрелочку
-vvTb = new THREE.ArrowHelper( vTb, originB, Tlength, hex1);    // создаем стрелочку
 scene.add( vvTb );    // заносим на сцену
@@ Строка 191: / Строка 209: @@
 var vTc = new THREE.Vector3(-1, -1, 1 );    // создаем геометрию вектора, отображающего натяжение нити C
 var origin = new THREE.Vector3(ty,ty,ty);
-var hex1 = 0x8B0000;   // цвет, отображающий вектора сил натяжения
+vvTc = new THREE.ArrowHelper( vTc, origin, TClength, 0x8B0000);    // создаем стрелочку
-vvTc = new THREE.ArrowHelper( vTc, origin, TClength, hex1);    // создаем стрелочку
 scene.add(vvTc );    // заносим на сцену
-controls.Ta = "Ta = " + Tlength;    // вывод решения на экран
-controls.Tb = "Tb = " + Tlength;    // вывод решения на экран
-controls.Tc = "Tc = " + TClength;    // вывод решения на экран
-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()
+function Draw1()
+{
+ClearScene();
+ReDrawN();
+}
+function Draw()
 {
-stats.update();
+ClearScene();
-Q1 = controls.weightQ;
+ReDrawV();
-l1 = controls.length1;
+ReDrawN();
-L1 = controls.lengthL;
-requestAnimationFrame(renderScene);
-renderer.render(scene,camera);
 }
 function initStats() //window in the left corner
 {
@@ Строка 229: / Строка 237: @@
 return stats;
 }
 function onResize()  //moving of camera
 {
-  camera.aspect = window.innerWidth/window.innerHeight;
+        camera.aspect = window.innerWidth/window.innerHeight;
-  camera.updateProjectionMatrix();
+        camera.updateProjectionMatrix();
-  renderer.setSize(window.innerWidth,window.innerHeight);
+        renderer.setSize(window.innerWidth,window.innerHeight);
 }
 window.onload = init;
-window.addEventListener('resize',onResize,true);
 </script>
+</body>