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

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

Исполнитель: [[Андреева Полина]]

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

==Формулировка задачи==
[[File:8.14(1).png]]


[[File:8.14.png]]

==Решение задачи==
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Andreeva/statica/Polks.html |width=1000 |height=830 |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 = "http://tm.spbstu.ru/htmlets/Andreeva/statica/three.js">
</script>
<script src = "http://tm.spbstu.ru/htmlets/Andreeva/statica/stats.min.js">
</script>
<script src = "http://tm.spbstu.ru/htmlets/Andreeva/statica/OrbitControls.js" >
</script>
<script src = "http://tm.spbstu.ru/htmlets/Andreeva/statica/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,arrowFt,arr1_1,arr1_2,arr1_3,arr1_t,arr2,arr2_1,arr2_2,arr2_t,arr3,arr3_1,arr3_3,arr3_t;

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

var P=20;
var rV=2;
 var LV=30; 
 var radiusSegment=150;
 var heightSegment=150;
 var radiusToppalki=0.5;
var L=LV+10;
var heightpalkivertical=20;
var LH=5;
var LL=5;
var A = Math.PI/6;
var lengthTHREAD=30;
var R=10;
var segments=50;
var radiusp=3;
var stats;
var ambiColor="#0c0c0c";
var ambientLight;
var step=0;
var cylindergeom;
var palka1geom;
var palka2geom;
var palka4geom;
var diskgeom ;
var boxQg;
var diskpgeom;
var boxPg;
var control;
var controls;
//var thetastart= 0;
//var thetalength= 2*Math.PI;

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 axes = new THREE.AxisHelper(20);    // создаем координатные оси
scene.add(axes);

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

controls = new function()     // создаем переключатели, позволяющие изменять входные параметры
{
this.lengthH = 5;  //расстояние между диском концом вала
this.LengthL = 5;    //расстояние до веса Q
this.lengthVAL = 30;    // длина вала
this.radiusVAL = 2;    //радиус вала
this.radius = 10;    //радиус диска
this.weightP = 2;//вес P
  this.alpha = Math.PI/6;  //угол 
this.displayForces = true;
}

controls1=new function()
{
this.Xa='0';  // вывод полученных в ходе решения задачи значений
this.Xb='0';
this.Zb='0';
this.Za='0';
this.Q='0';

}

var gui = new dat.GUI();    // позволяем менять каждый из параметров в определенном диапазоне, в случае изменения вызываем функцию, перестраивающую выводимую на экран картинку
gui.add(controls, 'lengthH',0,50).onChange(ReDraw);
gui.add(controls, 'lengthVAL',30,60).onChange(ReDraw);
gui.add(controls, 'LengthL',5,LV+5).onChange(ReDraw);
gui.add(controls, 'radiusVAL',0.1,3).onChange(ReDraw);
gui.add(controls, 'radius',1,30).onChange(ReDraw);
gui.add(controls, 'weightP',0,20).onChange(ReDraw);
gui.add(controls, 'alpha',0,Math.PI/2).onChange(ReDraw)
gui.add(controls, 'displayForces').onChange(Change);    // параметр, определяющий вариант отображения задачи (с отображением сил и без отображения)
gui.add(controls1, 'Xa').listen();
gui.add(controls1, 'Xb').listen();
gui.add(controls1, 'Za').listen();
gui.add(controls1, 'Zb').listen();
gui.add(controls1, 'Q').listen();


AmbientLight=new THREE.AmbientLight(ambiColor);
scene.add(ambientLight);
document.getElementById("WebGL").appendChild(renderer.domElement);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 100;
camera.lookAt(0,0,0);
spotLight=new THREE.SpotLight(0xffffff);
spotLight.position.set(90,-45,-90);
scene.add(spotLight);

stats = initStats();
Draw();
renderScene();
window.addEventListener('resize',onResize,false);
}

/////

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

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

function VisionFalse()    // общая картинка задача без отображения сил
{
ReDraw();
cylinder.opacity = 1
palka1.opacity = 1
palka2.opacity = 1
palka3.opacity = 1
palka4.opacity = 1
disk.opacity = 1
disk2.opacity = 1
diskp.opacity = 1
diskp2.opacity = 1
boxP.opacity = 1
boxQ.opacity = 1
boxPvec.visible = false;      // убираем векторы, отображающие силы
boxQvec.visible = false;
XBvec.visible = false;
XAvec.visible = false;
ZBvec.visible = false;
ZAvec.visible = false;

renderScene();
}


function ReDraw()    // функция, перерисовывающая всю картинку
{
scene.remove(cylinder);    // удаляем ранее созданные объекты
scene.remove(palka1);
scene.remove(palka2);
scene.remove(palka3);
scene.remove(palka4);
scene.remove(disk);
scene.remove(disk2);
scene.remove(diskp);
scene.remove(diskp2);
scene.remove(boxP);
scene.remove(boxQ);


LH = controls.lengthH;    // меняем значения параметров на те, что ввел пользователь
LV = controls.lengthVAL;
LL = controls.LengthL;
L = controls.lengthVAL+10;
rV = controls.radiusVAL;
R = controls.radius;
P=controls.weightP;
A=controls.alpha;
Draw();
}

function Draw()
{
Q=P*R/rV;
Q2 = P*R/rV;
controls1.Q= Q2;  // вывод решения на экран

vectXb =P*Math.cos(A)*LH/((L));
controls1.Xb= vectXb;

vectXa =  P*Math.cos(A) + vectXb;
controls1.Xa= vectXa;

vectP = P;
controls1.P1= vectP;

vectZb = Q*LL/(L) - P*Math.sin(A)*LH/(L);
controls1.Zb= vectZb;

vectZa =  Q+  P*Math.sin(A)-vectZb;
controls1.Za= vectZa;
/////    СОЗДАНИЕ всех ТЕЛ  /////

cylindergeom = new THREE.CylinderGeometry (rV, rV, LV, radiusSegment, heightSegment);   // задаем геометрию вала
cylindermaterial = new THREE.MeshLambertMaterial( { opacity:1, color: 0xDAA520,transparent:true } );    // задаем материал 1-ого тела
cylinder = new THREE.Mesh(cylindergeom,cylindermaterial);    // создаем тело с заданными геометрией и материалом
cylinder.rotation.z = 1.57;    // смещаем его центр из точки (0,0,0)
scene.add(cylinder);    // добавляем тело в сцену

palka1geom = new THREE.CylinderGeometry (radiusToppalki, radiusToppalki, L, radiusSegment, heightSegment);   // задаем геометрию вала
palka1material = new THREE.MeshLambertMaterial( { opacity:1, color: 0xDAA520,transparent:true } );    // задаем материал 1-ого тела
palka1 = new THREE.Mesh(palka1geom,palka1material);    // создаем тело с заданными геометрией и материалом
palka1.rotation.z = 1.57;    // смещаем его центр из точки (0,0,0)
scene.add(palka1);    // добавляем тело в сцену

palka2geom = new THREE.CylinderGeometry (radiusToppalki, radiusToppalki, heightpalkivertical, radiusSegment, heightSegment);   // задаем геометрию вала
palka2 = new THREE.Mesh(palka2geom,palka1material);    // создаем тело с заданными геометрией и материалом
palka2.position.x = L/2 - radiusToppalki ;    // смещаем его центр из точки (0,0,0)
palka2.position.y = -heightpalkivertical/2;
scene.add(palka2);

palka3 = new THREE.Mesh(palka2geom,palka1material);    // создаем тело с заданными геометрией и материалом
palka3.position.x = - L/2 + radiusToppalki ;    // смещаем его центр из точки (0,0,0)
palka3.position.y = -heightpalkivertical/2;
scene.add(palka3);

palka4geom = new THREE.CylinderGeometry (radiusToppalki, radiusToppalki, LH, radiusSegment, heightSegment);   // задаем геометрию вала
palka4 = new THREE.Mesh(palka4geom,palka1material);    // создаем тело с заданными геометрией и материалом
palka4.position.x = - L/2 -LH/2  ;    // смещаем его центр из точки (0,0,0)
palka4.rotation.z = 1.57;
scene.add(palka4);

diskgeom = new THREE.CircleGeometry(R,segments);//рисуем плоскость кольцо
diskmaterial = new THREE.MeshBasicMaterial( {opacity:1, color: 0xCD853F, transparent: true});   // задаем материал
disk = new THREE.Mesh(diskgeom,diskmaterial);    // создаем тело с заданными геометрией и материалом
disk.position.x = -L/2 - LH ;    // смещаем его центр из точки (0,0,0)
disk.rotation.y=Math.PI/2;
//disk.position.x = ;
scene.add(disk);     // добавляем тело в сцену


disk2 = new THREE.Mesh(diskgeom,diskmaterial);    // создаем тело с заданными геометрией и материалом
disk2.position.x = -L/2 -LH ;    // смещаем его центр из точки (0,0,0)
disk2.rotation.y=-Math.PI/2;
//disk.position.x = ;
scene.add(disk2); 

 boxQg = new THREE.BoxGeometry (2, 2, 2);    // задаем геометрию третьего тела (правое)
boxm = new THREE.MeshBasicMaterial( {opacity:1, color: 0xFFDEAD, transparent: true});    // задаем материал 
boxQ = new THREE.Mesh(boxQg, boxm);    // создаем тело с заданными геометрией и материалом
boxQ.position.x = -L/2+LL;    // смещаем его центр из точки (0,0,0)
boxQ.position.y = -rV-10;
boxQ.position.z = rV;
scene.add(boxQ);     // добавляем тело в сцену


diskpgeom = new THREE.CircleGeometry(radiusp,segments);//рисуем плоскость кольцо
diskp = new THREE.Mesh(diskpgeom,diskmaterial);    // создаем тело с заданными геометрией и материалом
diskp.position.x = -L/2 - LH ;    // смещаем его центр из точки (0,0,0)
diskp.rotation.y=Math.PI/2;
diskp.position.z = R*Math.sin(A)+lengthTHREAD*Math.cos(A) - Math.sin(A) * radiusp ;  
diskp.position.y = R*Math.cos(A) - lengthTHREAD*Math.sin(A) - Math.cos(A)*radiusp;
scene.add(diskp);     // добавляем тело в сцену


diskp2 = new THREE.Mesh(diskpgeom,diskmaterial);    // создаем тело с заданными геометрией и материалом
diskp2.position.x = -L/2 - LH ;    // смещаем его центр из точки (0,0,0)
diskp2.rotation.y=-Math.PI/2;
diskp2.position.z = R*Math.sin(A)+lengthTHREAD*Math.cos(A) - Math.sin(A) * radiusp ;  
diskp2.position.y = R*Math.cos(A) - lengthTHREAD*Math.sin(A) - Math.cos(A)*radiusp;
scene.add(diskp2);

boxPg = new THREE.BoxGeometry (2, 2, 2);    // задаем геометрию третьего тела (правое)
  boxP = new THREE.Mesh(boxPg, boxm);
boxP.position.x = -L/2 - LH;    // смещаем его центр из точки (0,0,0)
boxP.position.z = diskp.position.z + radiusp;
boxP.position.y = diskp.position.y - radiusp - 5;
scene.add(boxP);     // добавляем тело в сцену


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



 lg1 = new THREE.Geometry();    // создаем новую геометрию, предназначенную для изображения линии
lg1.vertices.push(
  new THREE.Vector3(0,0,0),    // задаем координату начала
  new THREE.Vector3(0,-boxQ.position.y,0)      // задаем координату конца
);
 lm = new THREE.LineBasicMaterial({color: 0xA0522D});    // задаем материал
line1 = new THREE.Line(lg1, lm);    // задаем линию с указанными координатами и материалом
boxQ.add(line1);



 lg2 = new THREE.Geometry();    // создаем новую геометрию, предназначенную для изображения линии
lg2.vertices.push(
 new THREE.Vector3(-R*Math.sin(A),R*Math.cos(A),0),
 new THREE.Vector3(-R*Math.sin(A)-lengthTHREAD*Math.cos(A),R*Math.cos(A) - lengthTHREAD*Math.sin(A),0)
);
line2 = new THREE.Line(lg2, lm);    // задаем линию с указанными координатами и материалом
disk.add(line2);

 lg3 = new THREE.Geometry();    // создаем новую геометрию, предназначенную для изображения линии
lg3.vertices.push(
 new THREE.Vector3(0,0,0),
 new THREE.Vector3(0,radiusp+5,0)
);
line3 = new THREE.Line(lg3, lm);    // задаем линию с указанными координатами и материалом
boxP.add(line3);


/////    СОЗДАНИЕ ВЕКТОРОВ, ОТОБРАЖАЮЩИХ СИЛЫ, ДЕЙСТВУЮЩИЕ НА ТЕЛА    /////
var boxPv= new THREE.Vector3( 0, -1, 1 );
var v0 = new THREE.Vector3( 0, 0, 0 );  
var color = 0xDC143C;  
var lengthP = P/5;    // задаем длину (численно равную исходному параметру в задаче)
boxPvec = new THREE.ArrowHelper( boxPv, v0, lengthP, color );    // создаем срелочку
boxP.add( boxPvec );    // прикрепляем вектор к первому телу

var boxQv= new THREE.Vector3( 0, -1, 1 );
Q=P*R/rV;
var lengthQ = Q/5;    // задаем длину (численно равную исходному параметру в задаче)
boxQvec = new THREE.ArrowHelper( boxQv, v0, lengthQ, color );    // создаем срелочку
boxQ.add( boxQvec );    // прикрепляем вектор к первому телу


var XBV= new THREE.Vector3( 0,0, 1 );
  var Xb = 5*P*Math.cos(A)*LH/((L));
XBvec = new THREE.ArrowHelper( XBV, v0,  Xb, color );    // создаем срелочку
XBvec.position.y = -L/2;
//XB.rotation.y = Math.PI/2;
palka1.add(XBvec );  



var ZBV= new THREE.Vector3( 1, 0, 0 );
  var Zb = Q*LL/(L) - P*Math.sin(A)*LH/(L);
ZBvec = new THREE.ArrowHelper( ZBV, v0,  Zb, color );
ZBvec.position.y = -L/2;
palka1.add(ZBvec );  

var ZAV= new THREE.Vector3( 1, 0, 0 );
  var Za = Q+  P*Math.sin(A)-Zb;
ZAvec = new THREE.ArrowHelper( ZAV, v0,  Za, color );
ZAvec.position.y = L/2;
//ZAvec.rotation.y = -Math.PI/2;
palka1.add(ZAvec );  

var XAV= new THREE.Vector3( 0, 0, -1 );
  var Xa = P*Math.cos(A) + Xb;
XAvec = new THREE.ArrowHelper( XAV, v0,  Xa, color );
XAvec.position.y = L/2;
//XAvec.rotation.y = -Math.PI/2;
palka1.add(XAvec );  


renderer.render(scene,camera);
}

function renderScene()
{
stats.update();
LH = controls.lengthH;
LL = controls.LengthL;
LV = controls.lengthVAL;
P = controls.weightP;
L = controls.length;
rV = controls.radiusVAL;
R=controls.radius;
P=controls.weightP;
A=controls.alpha;
requestAnimationFrame(renderScene);
renderer.render(scene,camera);
}


function initStats() 
{
var 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()  
{
  camera.aspect = window.innerWidth/window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth,window.innerHeight);
}

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


<!-- http://colorscheme.ru/html-colors.html -->