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

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
(→‎Решение задачи)
(→‎Задача)
 
(не показаны 4 промежуточные версии этого же участника)
Строка 1: Строка 1:
−
'''''Курсовой проект по информатике'''''
+
 
 +
'''Визуализация 3D-задачи по статике на JavaScript'''
  
 
'''Исполнитель: [[Лобанов Илья]]
 
'''Исполнитель: [[Лобанов Илья]]
  
 
'''Группа:''' 23604/1
 
'''Группа:''' 23604/1
−
 
−
 
  
 
==Задача==
 
==Задача==
  
  
−
[[File:_uB98cczQ-0.png]]
+
[[File:forprog2.PNG]]
−
 
+
[[File:forprog.PNG]]
  
 
==Решение задачи==
 
==Решение задачи==
Строка 22: Строка 21:
 
<html>
 
<html>
 
     <head>
 
     <head>
−
  <script src ="http://tm.spbstu.ru/htmlets/Lobanov_I_Y/JS_files/three.js"></script>
+
        <script src = "http://tm.spbstu.ru/htmlets/Lobanov_I_Y/JS_files/three.js"></script>
−
  <script src ="http://tm.spbstu.ru/htmlets/Lobanov_I_Y/JS_files/stats.min.js"></script>
+
        <script src = "http://tm.spbstu.ru/htmlets/Lobanov_I_Y/JS_files/OrbitControls.js"></script>
−
  <script src ="http://tm.spbstu.ru/htmlets/Lobanov_I_Y/JS_files/OrbitControls.js"></script>
+
        <script src = "http://tm.spbstu.ru/htmlets/Lobanov_I_Y/JS_files/dat.gui.min.js"></script>
−
  <script src ="http://tm.spbstu.ru/htmlets/Lobanov_I_Y/JS_files/dat.gui.js"></script>
+
        <script src = "http://tm.spbstu.ru/htmlets/Lobanov_I_Y/JS_files/stats.min.js"></script>
 
     </head>
 
     </head>
 
     <body>
 
     <body>
Строка 32: Строка 31:
 
         <script>
 
         <script>
 
              
 
              
−
             var scene,    //Сцена.
+
             var scene,     
−
                 camera,    //Камера.
+
                 camera,     
−
                 renderer;  //Рендер.
+
                 renderer;   
 
              
 
              
−
             var LENGTH_AB = 20;  //Длина стойки AB.
+
             var LENGTH_AB = 20;   
−
             var RADIUS_RACK = 1; //Радиус стойки.
+
             var RADIUS_RACK = 1;  
−
             var statFPS;        //Объект, для вывода информации о текущем FPS.
+
             var statFPS;         
 
              
 
              
−
             var panelControlOptions; //Объект, через которую изменяется угол альфа и вес груза, а так же возможность отображения усилий.
+
             var panelControlOptions;  
−
             var panelInfoEffort;    //Объект, через который выводим информацию об усилиях.
+
             var panelInfoEffort;     
−
             var gui;                //Панель с интерфейсом.
+
             var gui;                 
 
              
 
              
 
             //Стойка AB.
 
             //Стойка AB.
−
             var geometryRackAB,  //Геометрическая фигура.
+
             var geometryRackAB,   
−
                 materialRackAB,  //Материал.
+
                 materialRackAB,   
−
                 meshRackAB,      //Объект сцены (на геом. фигуру накладываем материал).
+
                 meshRackAB,       
−
                 colorRackAB = {color: 0x6A5ACD}; //Цвет.
+
                 colorRackAB = {color: 0x6A5ACD};  
 
              
 
              
 
             //Стойка BD.
 
             //Стойка BD.
−
             var geometryRackBD,  //Геометрическая фигура.
+
             var geometryRackBD,   
−
                 materialRackBD,  //Материал.
+
                 materialRackBD,   
−
                 meshRackBD,      //Объект сцены (на геом. фигуру накладываем материал).
+
                 meshRackBD,       
−
                 colorRackBD = {color: 0x6A5ACD}; //Цвет.
+
                 colorRackBD = {color: 0x6A5ACD};  
 
              
 
              
 
             //Стойка BE.
 
             //Стойка BE.
−
             var geometryRackBE,  //Геометрическая фигура.
+
             var geometryRackBE,   
−
                 materialRackBE,  //Материал.
+
                 materialRackBE,   
−
                 meshRackBE,      //Объект сцены (на геом. фигуру накладываем материал).
+
                 meshRackBE,       
−
                 colorRackBE = {color: 0x6A5ACD}; //Цвет.
+
                 colorRackBE = {color: 0x6A5ACD};             
−
              
 
 
             //Стойка AC.
 
             //Стойка AC.
−
             var geometryRackAC, //Геометрическая фигура.
+
             var geometryRackAC,  
−
                 materialRackAC,  //Материал.
+
                 materialRackAC,   
−
                 meshRackAC,      //Объект сцены (на геом. фигуру накладываем материал).
+
                 meshRackAC,       
−
                 colorRackAC = {color: 0x6A5ACD}; //Цвет.
+
                 colorRackAC = {color: 0x6A5ACD};
 
              
 
              
 
             //Шарнир в точке B.
 
             //Шарнир в точке B.
−
             var geometryHingeB,  //Геометрическая фигура.
+
             var geometryHingeB,   
−
                 materialHingeB,  //Материал.
+
                 materialHingeB,   
−
                 meshHingeB,      //Объект сцены (на геом. фигуру накладываем материал).
+
                 meshHingeB,       
−
                 colorHingeB = {color: 0x6A5ACD}; //Цвет.
+
                 colorHingeB = {color: 0x6A5ACD};
 
              
 
              
 
             //Шарнир в точке A.
 
             //Шарнир в точке A.
−
             var geometryHingeA,  //Геометрическая фигура.
+
             var geometryHingeA,   
−
                 materialHingeA,  //Материал.
+
                 materialHingeA,   
−
                 meshHingeA,      //Объект сцены (на геом. фигуру накладываем материал).
+
                 meshHingeA,       
−
                 colorHingeA = {color: 0x6A5ACD}; //Цвет.
+
                 colorHingeA = {color: 0x6A5ACD};  
 
              
 
              
 
             //Шарнир в точке D.
 
             //Шарнир в точке D.
−
             var geometryHingeD,  //Геометрическая фигура.
+
             var geometryHingeD,   
−
                 materialHingeD,  //Материал.
+
                 materialHingeD,   
−
                 meshHingeD,      //Объект сцены (на геом. фигуру накладываем материал).
+
                 meshHingeD,       
−
                 colorHingeD = {color: 0x6A5ACD}; //Цвет.
+
                 colorHingeD = {color: 0x6A5ACD};  
 
              
 
              
 
             //Шарнир в точке E.
 
             //Шарнир в точке E.
−
             var geometryHingeE,  //Геометрическая фигура.
+
             var geometryHingeE,   
−
                 materialHingeE,  //Материал.
+
                 materialHingeE,   
−
                 meshHingeE,      //Объект сцены (на геом. фигуру накладываем материал).
+
                 meshHingeE,       
−
                 colorHingeE = {color: 0x6A5ACD}; //Цвет.
+
                 colorHingeE = {color: 0x6A5ACD};  
 
              
 
              
 
             //Трос.
 
             //Трос.
−
             var geometryCableBCP,  //Геометрическая фигура.
+
             var geometryCableBCP,   
−
                 materialCableBCP,  //Материал.
+
                 materialCableBCP,   
−
                 meshCableBCP,      //Объект сцены (на геом. фигуру накладываем материал).
+
                 meshCableBCP,       
−
                 colorCableBCP = {color: 0x000000}; //Цвет.
+
                 colorCableBCP = {color: 0x000000};  
 
              
 
              
 
              
 
              
−
             //Наконечник стоки AC.
+
             //Наконечник стойки AC.
−
             var geometryEndRackAC, //Геометрическая фигура.
+
             var geometryEndRackAC,  
−
                 materialEndRackAC, //Материал.
+
                 materialEndRackAC,  
−
                 meshEndRackAC,    //Объект сцены (на геом. фигуру накладываем материал).
+
                 meshEndRackAC,     
−
                 colorEndRackAC = {color: 0x6A5ACD}; //Цвет.
+
                 colorEndRackAC = {color: 0x6A5ACD};  
 
              
 
              
 
             //Груз.
 
             //Груз.
−
             var geometryCargoP, //Геометрическая фигура.
+
             var geometryCargoP,  
−
                 materialCargoP, //Материал.
+
                 materialCargoP,  
−
                 meshCargoP,     //Объект сцены (на геом. фигуру накладываем материал).
+
                 meshCargoP,  
−
                 colorCargoP = {color: 0xFF4500}; //Цвет.
+
                 colorCargoP = {color: 0xFF4500};  
 
              
 
              
−
            //Вектор усилия опоры AB.
 
−
            var vectorEffortAB,            //Вектор.
 
−
                colorEffortAB = 0xFF0000;  //Цвет.
 
 
              
 
              
−
            //Вектор усилия опоры BD.
+
             var vectorEffortAB,          
−
             var vectorEffortBD,           //Вектор.
+
                 colorEffortAB = 0xFF0000;   
−
                 colorEffortBD = 0xFF0000;  //Цвет.
 
 
              
 
              
−
            //Вектор усилия опоры BE.
 
−
            var vectorEffortBE,            //Вектор.
 
−
                colorEffortBE = 0xFF0000;  //Цвет.
 
 
              
 
              
−
             //Функции инициализации, которая создает необходимые объекты. Для работы приложения.
+
            var vectorEffortBD,           
 +
                colorEffortBD = 0xFF0000;
 +
           
 +
         
 +
            var vectorEffortBE,           
 +
                colorEffortBE = 0xFF0000; 
 +
           
 +
             //Функции инициализации
 
             function init() {
 
             function init() {
−
                 scene = new THREE.Scene(); //Создаем сцену.
+
                 scene = new THREE.Scene();
−
                 camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 100); //Добавляем камеру (точка с которой смотрит на сцену пользователь).
+
                 camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 100);  
−
                 renderer = new THREE.WebGLRenderer(); //Создаем WebGL-рендер.
+
                 renderer = new THREE.WebGLRenderer();
−
                 renderer.setSize(window.innerWidth, window.innerHeight); //Задаем размеры рендера.
+
                 renderer.setSize(window.innerWidth, window.innerHeight);
−
                 renderer.setClearColor(0xEEEEEE); //Задем цвет фона (серый цвет).
+
                 renderer.setClearColor(0xEEEEEE);  
 
                 //renderer.shadowMap.enabled=true;
 
                 //renderer.shadowMap.enabled=true;
  
−
                 document.getElementById("WebGL").appendChild(renderer.domElement); //Добавляем рендер на страницу.
+
                 document.getElementById("WebGL").appendChild(renderer.domElement);  
 
                  
 
                  
−
                //Задаем позицию камеры.
 
 
                 camera.position.x = 0;
 
                 camera.position.x = 0;
 
                 camera.position.y = 0;
 
                 camera.position.y = 0;
Строка 140: Строка 137:
 
                 camera.lookAt(0, 0, 0);
 
                 camera.lookAt(0, 0, 0);
 
                  
 
                  
−
                 axes = new THREE.AxisHelper(50); //Создаем оси координат.
+
                 axes = new THREE.AxisHelper(50);  
−
                 scene.add(axes); //Добавляем оси координат на сцену.
+
                 scene.add(axes);  
  
−
                 control = new THREE.OrbitControls(camera,renderer.domElement); //Добавляем управление мышью (маштаб и ракурс обзора).
+
                 control = new THREE.OrbitControls(camera,renderer.domElement);  
 
                  
 
                  
−
                //Создали объект через который меняем угол альфа и вес груза, а так же отображение усилий.
 
 
                 panelControlOptions = new function() {
 
                 panelControlOptions = new function() {
−
                     this.alpha = 0.0;   //Угол альфа.
+
                     this.alpha = 0.0;  
−
                     this.weightP = 10.0; //Вес груза.
+
                     this.weightP = 10.0;  
−
                     this.visibleEffort = true; //Отображения усилий.
+
                     this.visibleEffort = true;  
 
                 }
 
                 }
 
                  
 
                  
−
                //Создали объект, через который выводим информацию об усилиях.
 
 
                 panelInfoEffort = new function() {
 
                 panelInfoEffort = new function() {
 
                     this.Sbd = '0';
 
                     this.Sbd = '0';
Строка 158: Строка 153:
 
                     this.Sab = '0';
 
                     this.Sab = '0';
 
                 }
 
                 }
−
                 gui = new dat.GUI(); //Создали панель.
+
                 gui = new dat.GUI();  
−
                //Добавили на панель возможность изменять угол. При изменения вызывается функция перерисовки сцены.
 
 
                 gui.add(panelControlOptions, 'alpha', -90, 90).onChange(redrawCraneElements);  
 
                 gui.add(panelControlOptions, 'alpha', -90, 90).onChange(redrawCraneElements);  
−
                //Добавили на панель возможность изменять вес груза. При изменения вызывается функция перерисовки сцены.
 
 
                 gui.add(panelControlOptions, 'weightP', 1, 100).onChange(redrawCraneElements);  
 
                 gui.add(panelControlOptions, 'weightP', 1, 100).onChange(redrawCraneElements);  
−
                //Добавили на панель возможность показа/скрытия усилий. При изменения вызывается функция перерисовки сцены.
 
 
                 gui.add(panelControlOptions, 'visibleEffort').onChange(redrawCraneElements);  
 
                 gui.add(panelControlOptions, 'visibleEffort').onChange(redrawCraneElements);  
 
                  
 
                  
−
                //Добавили на панель вывод усилий стоек.
 
 
                 gui.add(panelInfoEffort, 'Sbd').listen();
 
                 gui.add(panelInfoEffort, 'Sbd').listen();
 
                 gui.add(panelInfoEffort, 'Sbe').listen();
 
                 gui.add(panelInfoEffort, 'Sbe').listen();
 
                 gui.add(panelInfoEffort, 'Sab').listen();
 
                 gui.add(panelInfoEffort, 'Sab').listen();
 
                  
 
                  
−
                 drawStaticCraneElements();  //Добавление статичных элементов крана на сцену.
+
                 drawStaticCraneElements();   
−
                 drawDynamicCraneElements(); //Добавление динамических элементов крана на сцену.
+
                 drawDynamicCraneElements();  
 
      
 
      
 
                 statFPS = initStatFPS();
 
                 statFPS = initStatFPS();
−
                 render(); //Отрисовываем сцену.
+
                 render();  
 
      
 
      
−
                //Повешали обработчик на событие: изменение размеров окна.
 
 
                 window.addEventListener('resize',changeSizeWindow,false);
 
                 window.addEventListener('resize',changeSizeWindow,false);
 
             }
 
             }
 
              
 
              
−
            //Функция добавления статичный элементов крана на сцену.
 
 
             function drawStaticCraneElements() {
 
             function drawStaticCraneElements() {
−
                //Создаем стойку AB.
+
                 geometryRackAB = new THREE.CylinderGeometry(RADIUS_RACK, RADIUS_RACK, LENGTH_AB, 32);  
−
                 geometryRackAB = new THREE.CylinderGeometry(RADIUS_RACK, RADIUS_RACK, LENGTH_AB, 32); //Создаем фигуру (цилиндр).
+
                 materialRackAB = new THREE.MeshBasicMaterial(colorRackAB);                             
−
                 materialRackAB = new THREE.MeshBasicMaterial(colorRackAB);                            //Создаем материал.
+
                 meshRackAB = new THREE.Mesh(geometryRackAB, materialRackAB);                        
−
                 meshRackAB = new THREE.Mesh(geometryRackAB, materialRackAB);                         //Создаем объект сцены.
 
−
                //Задаем положение центра стойки.
 
 
                 meshRackAB.position.x = 0;
 
                 meshRackAB.position.x = 0;
 
                 meshRackAB.position.y = LENGTH_AB / 2;
 
                 meshRackAB.position.y = LENGTH_AB / 2;
 
                 meshRackAB.position.z = 0;
 
                 meshRackAB.position.z = 0;
−
                //Помещаем стойку на сцену.
 
 
                 scene.add(meshRackAB);
 
                 scene.add(meshRackAB);
 
                  
 
                  
−
                //Создаем стойку BD.
+
                 geometryRackBD = new THREE.CylinderGeometry(RADIUS_RACK, RADIUS_RACK, Math.sqrt(2) * LENGTH_AB, 32);  
−
                 geometryRackBD = new THREE.CylinderGeometry(RADIUS_RACK, RADIUS_RACK, Math.sqrt(2) * LENGTH_AB, 32); //Создаем фигуру (цилиндр).
+
                 materialRackBD = new THREE.MeshBasicMaterial(colorRackBD);                                           
−
                 materialRackBD = new THREE.MeshBasicMaterial(colorRackBD);                                          //Создаем материал.
+
                 meshRackBD = new THREE.Mesh(geometryRackBD, materialRackBD);                                      
−
                 meshRackBD = new THREE.Mesh(geometryRackBD, materialRackBD);                                         //Создаем объект сцены.
 
−
                //Задаем положение центра стойки.
 
 
                 meshRackBD.position.x = -Math.cos(Math.PI / 4) * (LENGTH_AB / 2);
 
                 meshRackBD.position.x = -Math.cos(Math.PI / 4) * (LENGTH_AB / 2);
 
                 meshRackBD.position.y = LENGTH_AB / 2;
 
                 meshRackBD.position.y = LENGTH_AB / 2;
 
                 meshRackBD.position.z = Math.sin(Math.PI / 4) * (LENGTH_AB / 2);
 
                 meshRackBD.position.z = Math.sin(Math.PI / 4) * (LENGTH_AB / 2);
−
                //Задаем углы поворота стойки.
 
 
                 meshRackBD.rotation.y = Math.PI / 4;
 
                 meshRackBD.rotation.y = Math.PI / 4;
 
                 meshRackBD.rotation.z = -Math.PI / 4;
 
                 meshRackBD.rotation.z = -Math.PI / 4;
−
                //Помещаем стойку на сцену.
 
 
                 scene.add(meshRackBD);
 
                 scene.add(meshRackBD);
 
                  
 
                  
−
                //Создаем стойку BE.
+
                 geometryRackBE = new THREE.CylinderGeometry(RADIUS_RACK, RADIUS_RACK, Math.sqrt(2) * LENGTH_AB, 32);  
−
                 geometryRackBE = new THREE.CylinderGeometry(RADIUS_RACK, RADIUS_RACK, Math.sqrt(2) * LENGTH_AB, 32); //Создаем фигуру (цилиндр).
+
                 materialRackBE = new THREE.MeshBasicMaterial(colorRackBE);                                           
−
                 materialRackBE = new THREE.MeshBasicMaterial(colorRackBE);                                          //Создаем материал.
+
                 meshRackBE = new THREE.Mesh(geometryRackBE, materialRackBE);                                      
−
                 meshRackBE = new THREE.Mesh(geometryRackBE, materialRackBE);                                         //Создаем объект сцены.
 
−
                //Задаем положение центра стойки.
 
 
                 meshRackBE.position.x = -Math.cos(Math.PI / 4) * (LENGTH_AB / 2);
 
                 meshRackBE.position.x = -Math.cos(Math.PI / 4) * (LENGTH_AB / 2);
 
                 meshRackBE.position.y = LENGTH_AB / 2;
 
                 meshRackBE.position.y = LENGTH_AB / 2;
 
                 meshRackBE.position.z = -Math.sin(Math.PI / 4) * (LENGTH_AB / 2);
 
                 meshRackBE.position.z = -Math.sin(Math.PI / 4) * (LENGTH_AB / 2);
−
                //Задаем углы поворота стойки.
 
 
                 meshRackBE.rotation.y = -Math.PI / 4;
 
                 meshRackBE.rotation.y = -Math.PI / 4;
 
                 meshRackBE.rotation.z = -Math.PI / 4;
 
                 meshRackBE.rotation.z = -Math.PI / 4;
−
                //Помещаем стойку на сцену.
 
 
                 scene.add(meshRackBE);
 
                 scene.add(meshRackBE);
 
                  
 
                  
−
                //Создаем шарнир в точке B.
+
                 geometryHingeB = new THREE.SphereGeometry(RADIUS_RACK, 32, 32);   
−
                 geometryHingeB = new THREE.SphereGeometry(RADIUS_RACK, 32, 32);  //Создаем фигуру (сфера).
+
                 materialHingeB = new THREE.MeshBasicMaterial(colorHingeB);       
−
                 materialHingeB = new THREE.MeshBasicMaterial(colorHingeB);      //Создаем материал.
+
                 meshHingeB = new THREE.Mesh(geometryHingeB, materialHingeB);     
−
                 meshHingeB = new THREE.Mesh(geometryHingeB, materialHingeB);    //Создаем объект сцены.
 
−
                //Задаем положение центра шарнира.
 
 
                 meshHingeB.position.y = LENGTH_AB;
 
                 meshHingeB.position.y = LENGTH_AB;
−
                //Помещаем шарнир на сцену.
 
 
                 scene.add(meshHingeB);
 
                 scene.add(meshHingeB);
 
                  
 
                  
−
                //Создаем шарнир в точке A.
+
                 geometryHingeA = new THREE.SphereGeometry(RADIUS_RACK, 32, 32);   
−
                 geometryHingeA = new THREE.SphereGeometry(RADIUS_RACK, 32, 32);  //Создаем фигуру (сфера).
+
                 materialHingeA = new THREE.MeshBasicMaterial(colorHingeA);       
−
                 materialHingeA = new THREE.MeshBasicMaterial(colorHingeA);      //Создаем материал.
+
                 meshHingeA = new THREE.Mesh(geometryHingeA, materialHingeA);     
−
                 meshHingeA = new THREE.Mesh(geometryHingeA, materialHingeA);    //Создаем объект сцены.
 
−
                //Помещаем шарнир на сцену.
 
 
                 scene.add(meshHingeA);
 
                 scene.add(meshHingeA);
 
                  
 
                  
−
                //Создаем шарнир в точке D.
+
                 geometryHingeD = new THREE.SphereGeometry(RADIUS_RACK, 32, 32);   
−
                 geometryHingeD = new THREE.SphereGeometry(RADIUS_RACK, 32, 32);  //Создаем фигуру (сфера).
+
                 materialHingeD = new THREE.MeshBasicMaterial(colorHingeD);       
−
                 materialHingeD = new THREE.MeshBasicMaterial(colorHingeD);      //Создаем материал.
+
                 meshHingeD = new THREE.Mesh(geometryHingeD, materialHingeD);     
−
                 meshHingeD = new THREE.Mesh(geometryHingeD, materialHingeD);    //Создаем объект сцены.
 
−
                //Задаем положение центра шарнира.
 
 
                 meshHingeD.position.x = -LENGTH_AB * Math.cos(Math.PI / 4);
 
                 meshHingeD.position.x = -LENGTH_AB * Math.cos(Math.PI / 4);
 
                 meshHingeD.position.z = LENGTH_AB * Math.sin(Math.PI / 4);
 
                 meshHingeD.position.z = LENGTH_AB * Math.sin(Math.PI / 4);
−
                //Помещаем шарнир на сцену.
 
 
                 scene.add(meshHingeD);
 
                 scene.add(meshHingeD);
 
                  
 
                  
−
                //Создаем шарнир в точке E.
+
                 geometryHingeE = new THREE.SphereGeometry(RADIUS_RACK, 32, 32);   
−
                 geometryHingeE = new THREE.SphereGeometry(RADIUS_RACK, 32, 32);  //Создаем фигуру (сфера).
+
                 materialHingeE = new THREE.MeshBasicMaterial(colorHingeE);       
−
                 materialHingeE = new THREE.MeshBasicMaterial(colorHingeE);      //Создаем материал.
+
                 meshHingeE = new THREE.Mesh(geometryHingeE, materialHingeE);     
−
                 meshHingeE = new THREE.Mesh(geometryHingeE, materialHingeE);    //Создаем объект сцены.
 
−
                //Задаем положение центра шарнира.
 
 
                 meshHingeE.position.x = -LENGTH_AB * Math.cos(Math.PI / 4);
 
                 meshHingeE.position.x = -LENGTH_AB * Math.cos(Math.PI / 4);
 
                 meshHingeE.position.z = -LENGTH_AB * Math.sin(Math.PI / 4);
 
                 meshHingeE.position.z = -LENGTH_AB * Math.sin(Math.PI / 4);
−
                //Помещаем шарнир на сцену.
 
 
                 scene.add(meshHingeE);
 
                 scene.add(meshHingeE);
 
                  
 
                  
−
                 renderer.render(scene, camera); //Рендинг сцены.
+
                 renderer.render(scene, camera);  
 
             }
 
             }
−
            //Функция добавления динамичных элементов крана на сцену.
 
 
             function drawDynamicCraneElements() {
 
             function drawDynamicCraneElements() {
−
                 var ALPHA = panelControlOptions.alpha / 180 * Math.PI; //Получаем текущие значение угла альфа.
+
                 var ALPHA = panelControlOptions.alpha / 180 * Math.PI;  
−
                 var WEIGHT_P = panelControlOptions.weightP; //Получаем текущий вес груза.
+
                 var WEIGHT_P = panelControlOptions.weightP;  
 
                  
 
                  
−
                //Вычисляем усилия стоек.
 
 
                 panelInfoEffort.Sbd = WEIGHT_P * (Math.cos(ALPHA) - Math.sin(ALPHA));
 
                 panelInfoEffort.Sbd = WEIGHT_P * (Math.cos(ALPHA) - Math.sin(ALPHA));
 
                 panelInfoEffort.Sbe = WEIGHT_P * (Math.cos(ALPHA) + Math.sin(ALPHA));
 
                 panelInfoEffort.Sbe = WEIGHT_P * (Math.cos(ALPHA) + Math.sin(ALPHA));
 
                 panelInfoEffort.Sab = -WEIGHT_P * Math.sqrt(2) * Math.cos(ALPHA);
 
                 panelInfoEffort.Sab = -WEIGHT_P * Math.sqrt(2) * Math.cos(ALPHA);
 
                  
 
                  
−
                //Создаем стойку AC.
+
                 geometryRackAC = new THREE.CylinderGeometry(RADIUS_RACK, RADIUS_RACK, Math.sqrt(2) * LENGTH_AB, 32);  
−
                 geometryRackAC = new THREE.CylinderGeometry(RADIUS_RACK, RADIUS_RACK, Math.sqrt(2) * LENGTH_AB, 32); //Создаем фигуру (цилиндр).
+
                 materialRackAC = new THREE.MeshBasicMaterial(colorRackAC);                                           
−
                 materialRackAC = new THREE.MeshBasicMaterial(colorRackAC);                                          //Создаем материал.
+
                 meshRackAC = new THREE.Mesh(geometryRackAC, materialRackAC);                                         
−
                 meshRackAC = new THREE.Mesh(geometryRackAC, materialRackAC);                                        //Создаем объект сцены.
 
−
                //Задаем положение центра стойки.
 
 
                 meshRackAC.position.x = Math.cos(ALPHA) * (LENGTH_AB / 2);
 
                 meshRackAC.position.x = Math.cos(ALPHA) * (LENGTH_AB / 2);
 
                 meshRackAC.position.y = LENGTH_AB / 2;
 
                 meshRackAC.position.y = LENGTH_AB / 2;
 
                 meshRackAC.position.z = -Math.sin(ALPHA) * (LENGTH_AB / 2);
 
                 meshRackAC.position.z = -Math.sin(ALPHA) * (LENGTH_AB / 2);
−
                //Задаем углы поворота стойки.
 
 
                 meshRackAC.rotation.y = ALPHA;
 
                 meshRackAC.rotation.y = ALPHA;
 
                 meshRackAC.rotation.z = -Math.PI / 4;
 
                 meshRackAC.rotation.z = -Math.PI / 4;
−
                //Помещаем стойку на сцену.
 
 
                 scene.add(meshRackAC);
 
                 scene.add(meshRackAC);
 
                  
 
                  
−
                //Создаем тросс через точку B, C и P.
+
                 geometryCableBCP = new THREE.Geometry();  
−
                 geometryCableBCP = new THREE.Geometry(); //Создаем пустую геом. фигура.
 
−
                //Добавляем в фигуру 3 точки.
 
 
                 geometryCableBCP.vertices.push(
 
                 geometryCableBCP.vertices.push(
−
                     new THREE.Vector3(0, LENGTH_AB + RADIUS_RACK, 0), //Точка B.
+
                     new THREE.Vector3(0, LENGTH_AB + RADIUS_RACK, 0),  
−
                     new THREE.Vector3(Math.cos(ALPHA) * (LENGTH_AB + RADIUS_RACK), LENGTH_AB + RADIUS_RACK, -Math.sin(ALPHA) * (LENGTH_AB + RADIUS_RACK)), //Точка C.
+
                     new THREE.Vector3(Math.cos(ALPHA) * (LENGTH_AB + RADIUS_RACK), LENGTH_AB + RADIUS_RACK, -Math.sin(ALPHA) * (LENGTH_AB + RADIUS_RACK)),
−
                     new THREE.Vector3(Math.cos(ALPHA) * (LENGTH_AB + RADIUS_RACK), LENGTH_AB / 2, -Math.sin(ALPHA) * (LENGTH_AB + RADIUS_RACK)));          //Точка P.
+
                     new THREE.Vector3(Math.cos(ALPHA) * (LENGTH_AB + RADIUS_RACK), LENGTH_AB / 2, -Math.sin(ALPHA) * (LENGTH_AB + RADIUS_RACK)));           
 
                  
 
                  
−
                 materialCableBCP = new THREE.LineBasicMaterial(colorCableBCP);    //Создаем материал.
+
                 materialCableBCP = new THREE.LineBasicMaterial(colorCableBCP);     
−
                 meshCableBCP = new THREE.Line(geometryCableBCP, materialCableBCP); //Создаем объект сцены.
+
                 meshCableBCP = new THREE.Line(geometryCableBCP, materialCableBCP);  
−
                 scene.add(meshCableBCP); //Помещаем кабель на сцену.
+
                 scene.add(meshCableBCP);  
 
              
 
              
−
                //Создаем наконечник стойки AC.
+
                 geometryEndRackAC = new THREE.SphereGeometry(RADIUS_RACK, 32, 32);         
−
                 geometryEndRackAC = new THREE.SphereGeometry(RADIUS_RACK, 32, 32);        //Создаем фигуру (сфера).
+
                 materialEndRackAC = new THREE.MeshBasicMaterial(colorEndRackAC);        
−
                 materialEndRackAC = new THREE.MeshBasicMaterial(colorEndRackAC);         //Создаем материал.
+
                 meshEndRackAC = new THREE.Mesh(geometryEndRackAC, materialEndRackAC);     
−
                 meshEndRackAC = new THREE.Mesh(geometryEndRackAC, materialEndRackAC);    //Создаем объект сцены.
 
−
                //Задаем положение центра наконечника.
 
 
                 meshEndRackAC.position.x = Math.cos(ALPHA) * LENGTH_AB;
 
                 meshEndRackAC.position.x = Math.cos(ALPHA) * LENGTH_AB;
 
                 meshEndRackAC.position.y = LENGTH_AB;
 
                 meshEndRackAC.position.y = LENGTH_AB;
 
                 meshEndRackAC.position.z = -Math.sin(ALPHA) * LENGTH_AB;
 
                 meshEndRackAC.position.z = -Math.sin(ALPHA) * LENGTH_AB;
−
                 scene.add(meshEndRackAC); //Помещаем наконечник на сцену.
+
                 scene.add(meshEndRackAC);  
 
                  
 
                  
−
                //Создаем груз.
+
                 geometryCargoP = new THREE.BoxGeometry(4, 2, 4);  
−
                 geometryCargoP = new THREE.BoxGeometry(4, 2, 4); //Создаем фигуру (параллелипипед.).
+
                 materialCargoP = new THREE.MeshBasicMaterial(colorCargoP);       
−
                 materialCargoP = new THREE.MeshBasicMaterial(colorCargoP);      //Создаем материал.
+
                 meshCargoP = new THREE.Mesh(geometryCargoP, materialCargoP);     
−
                 meshCargoP = new THREE.Mesh(geometryCargoP, materialCargoP);    //Создаем объект сцены.
 
−
                //Задаем положение центра груза.
 
 
                 meshCargoP.position.x = Math.cos(ALPHA) * (LENGTH_AB + RADIUS_RACK);
 
                 meshCargoP.position.x = Math.cos(ALPHA) * (LENGTH_AB + RADIUS_RACK);
 
                 meshCargoP.position.y = LENGTH_AB / 2;
 
                 meshCargoP.position.y = LENGTH_AB / 2;
 
                 meshCargoP.position.z = -Math.sin(ALPHA) * (LENGTH_AB + RADIUS_RACK);
 
                 meshCargoP.position.z = -Math.sin(ALPHA) * (LENGTH_AB + RADIUS_RACK);
 
                  
 
                  
−
                 scene.add(meshCargoP); //Помещаем груз на сцену.
+
                 scene.add(meshCargoP);  
 
                  
 
                  
−
                //Если вектора усилий нужно отображать.
 
 
                 if(panelControlOptions.visibleEffort == true) {
 
                 if(panelControlOptions.visibleEffort == true) {
−
                     var tmp = -WEIGHT_P * Math.sqrt(2) * Math.cos(ALPHA); //Усилие на стойку AB.
+
                     var tmp = -WEIGHT_P * Math.sqrt(2) * Math.cos(ALPHA);
−
                    //Создаем вектор усилия стойки AB.
 
 
                     vectorEffortAB = new THREE.ArrowHelper(
 
                     vectorEffortAB = new THREE.ArrowHelper(
−
                         new THREE.Vector3(0, (tmp < 0) ? -1 : 0, 0),                              //Направление.
+
                         new THREE.Vector3(0, (tmp < 0) ? -1 : 0, 0),                               
−
                         new THREE.Vector3(0, (tmp < 0) ? (-LENGTH_AB / 2) : (LENGTH_AB / 2), 0),  //Координата начала (относительно центра стойки).
+
                         new THREE.Vector3(0, (tmp < 0) ? (-LENGTH_AB / 2) : (LENGTH_AB / 2), 0),   
−
                         Math.abs(tmp),                                                            //Длина.
+
                         Math.abs(tmp),                                                             
−
                         colorEffortAB                                                            //Цвет.
+
                         colorEffortAB                                                             
 
                     );
 
                     );
  
−
                     meshRackAB.add(vectorEffortAB); //Добавляем вектор усилия к стойке AB.
+
                     meshRackAB.add(vectorEffortAB);
−
 
+
                     var tmp = WEIGHT_P * (Math.cos(ALPHA) - Math.sin(ALPHA));
−
                     var tmp = WEIGHT_P * (Math.cos(ALPHA) - Math.sin(ALPHA)); //Усилие на стойку BD.
 
−
                    //Создаем вектор усилия стойки BD.
 
 
                     vectorEffortBD = new THREE.ArrowHelper(
 
                     vectorEffortBD = new THREE.ArrowHelper(
−
                         new THREE.Vector3(0, (tmp < 0) ? -1 : 1, 0),                                                          //Направление.
+
                         new THREE.Vector3(0, (tmp < 0) ? -1 : 1, 0),                                                           
−
                         new THREE.Vector3(0, (tmp < 0) ? -(Math.sqrt(2) * LENGTH_AB / 2) : (Math.sqrt(2) * LENGTH_AB / 2), 0), //Координата начала (относительно центра стойки).
+
                         new THREE.Vector3(0, (tmp < 0) ? -(Math.sqrt(2) * LENGTH_AB / 2) : (Math.sqrt(2) * LENGTH_AB / 2), 0),  
−
                         Math.abs(tmp),                                                                                         //Длина.
+
                         Math.abs(tmp),                                                                                      
−
                         colorEffortBD                                                                                         //Цвет.
+
                         colorEffortBD                                                                                        
 
                     );
 
                     );
  
−
                     meshRackBD.add(vectorEffortBD); //Добавляем вектор усилия к стойке BD.
+
                     meshRackBD.add(vectorEffortBD);  
  
−
                     var tmp = WEIGHT_P * (Math.cos(ALPHA) + Math.sin(ALPHA)); //Усилие на стойку BE.
+
                     var tmp = WEIGHT_P * (Math.cos(ALPHA) + Math.sin(ALPHA));  
−
                    //Создаем вектор усилия стойки BE.
 
 
                     vectorEffortBE = new THREE.ArrowHelper(
 
                     vectorEffortBE = new THREE.ArrowHelper(
−
                         new THREE.Vector3(0, (tmp < 0) ? -1 : 1, 0),                                                          //Направление.
+
                         new THREE.Vector3(0, (tmp < 0) ? -1 : 1, 0),                                                           
−
                         new THREE.Vector3(0, (tmp < 0) ? -(Math.sqrt(2) * LENGTH_AB / 2) : (Math.sqrt(2) * LENGTH_AB / 2), 0), //Координата начала (относительно центра стойки).
+
                         new THREE.Vector3(0, (tmp < 0) ? -(Math.sqrt(2) * LENGTH_AB / 2) : (Math.sqrt(2) * LENGTH_AB / 2), 0),  
−
                         Math.abs(tmp),                                                                                        //Длина.
+
                         Math.abs(tmp),                                                                                         
−
                         colorEffortBE                                                                                          //Цвет.
+
                         colorEffortBE                                                                                           
 
                     );
 
                     );
  
−
                     meshRackBE.add(vectorEffortBE); //Добавляем вектор усилия к стойке BE.
+
                     meshRackBE.add(vectorEffortBE);
 
                 } else {
 
                 } else {
 
                     vectorEffortAB = null;
 
                     vectorEffortAB = null;
Строка 357: Строка 307:
 
                 }
 
                 }
 
                  
 
                  
−
                 renderer.render(scene, camera); //Рендинг сцены.
+
                 renderer.render(scene, camera);  
 
             }
 
             }
 
              
 
              
−
            //Функция перерисовки элементов крана на сцене.
 
 
             function redrawCraneElements() {
 
             function redrawCraneElements() {
−
                //Удаляем динамические элементы со сцены.
+
                 scene.remove(meshRackAC);     
−
                 scene.remove(meshRackAC);    //Удаление стойки AC.
+
                 scene.remove(meshCableBCP);   
−
                 scene.remove(meshCableBCP);  //Удаление троса.
+
                 scene.remove(meshEndRackAC);  
−
                 scene.remove(meshEndRackAC); //Удаление наконечника стойки AC.
+
                 scene.remove(meshCargoP);     
−
                 scene.remove(meshCargoP);    //Удаление груза.
+
                 if (vectorEffortAB != null) meshRackAB.remove(vectorEffortAB);  
−
                 if (vectorEffortAB != null) meshRackAB.remove(vectorEffortAB); //Удалили вектор усилия со стойки AB.
+
                 if (vectorEffortBD != null) meshRackBD.remove(vectorEffortBD);  
−
                 if (vectorEffortBD != null) meshRackBD.remove(vectorEffortBD); //Удалили вектор усилия со стойки BD.
+
                 if (vectorEffortBE != null) meshRackBE.remove(vectorEffortBE);  
−
                 if (vectorEffortBE != null) meshRackBE.remove(vectorEffortBE); //Удалили вектор усилия со стойки BE.
 
 
                  
 
                  
 
                  
 
                  
−
                //Добавляем динамические элементы на сцену.
 
 
                 drawDynamicCraneElements();
 
                 drawDynamicCraneElements();
 
             }
 
             }
 
              
 
              
 
              
 
              
−
             //Функция рендеринга, вызывается браузером через равные интервалы времени, для
+
              
−
            //перерисовки сцены.
 
 
             function render() {
 
             function render() {
 
                 statFPS.update();
 
                 statFPS.update();
 
                  
 
                  
−
                 requestAnimationFrame(render);  //Вызвать эту же функцию для рендинга в следующий момент времени (момент времени зависит от браузера).
+
                 requestAnimationFrame(render);   
−
                 renderer.render(scene, camera); //Рендинг сцены.
+
                 renderer.render(scene, camera);  
 
             }
 
             }
 
              
 
              
−
            //Функция, которая вызывается, когда был изменен размер окна.
 
 
             function changeSizeWindow() {
 
             function changeSizeWindow() {
 
                 camera.aspect=window.innerWidth/window.innerHeight;
 
                 camera.aspect=window.innerWidth/window.innerHeight;
Строка 393: Строка 338:
 
             }
 
             }
 
              
 
              
−
            //Функция, которая создает объект: для отображения FPS.
 
 
             function initStatFPS()
 
             function initStatFPS()
 
             {
 
             {
 
                 var stats=new Stats();  
 
                 var stats=new Stats();  
 
                 stats.setMode(0);  
 
                 stats.setMode(0);  
−
               
 
 
                 stats.domElement.style.position='0px';
 
                 stats.domElement.style.position='0px';
 
                 stats.domElement.style.left='0px';
 
                 stats.domElement.style.left='0px';
 
                 stats.domElement.style.top='0px';
 
                 stats.domElement.style.top='0px';
−
               
 
 
                 document.getElementById("Stats-output").appendChild(stats.domElement);
 
                 document.getElementById("Stats-output").appendChild(stats.domElement);
 
                 return stats;
 
                 return stats;

Текущая версия на 00:25, 2 июня 2017

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

Исполнитель: Лобанов Илья

Группа: 23604/1

Задача[править]

Forprog2.PNG Forprog.PNG

Решение задачи[править]

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

<html> 

   <head>
       <script src = "http://tm.spbstu.ru/htmlets/Lobanov_I_Y/JS_files/three.js"></script>
       <script src = "http://tm.spbstu.ru/htmlets/Lobanov_I_Y/JS_files/OrbitControls.js"></script>
       <script src = "http://tm.spbstu.ru/htmlets/Lobanov_I_Y/JS_files/dat.gui.min.js"></script>
       <script src = "http://tm.spbstu.ru/htmlets/Lobanov_I_Y/JS_files/stats.min.js"></script>
   </head>
   <body>

       <script>
           
           var scene,     
               camera,    
               renderer;  
           
           var LENGTH_AB = 20;  
           var RADIUS_RACK = 1; 
           var statFPS;         
           
           var panelControlOptions; 
           var panelInfoEffort;     
           var gui;                 
           
           //Стойка AB.
           var geometryRackAB,  
               materialRackAB,  
               meshRackAB,      
               colorRackAB = {color: 0x6A5ACD}; 
           
           //Стойка BD.
           var geometryRackBD,  
               materialRackBD,  
               meshRackBD,      
               colorRackBD = {color: 0x6A5ACD}; 
           
           //Стойка BE.
           var geometryRackBE,  
               materialRackBE,  
               meshRackBE,      
               colorRackBE = {color: 0x6A5ACD};             
           //Стойка AC.
           var geometryRackAC, 
               materialRackAC,  
               meshRackAC,      
               colorRackAC = {color: 0x6A5ACD};
           
           //Шарнир в точке B.
           var geometryHingeB,  
               materialHingeB,  
               meshHingeB,      
               colorHingeB = {color: 0x6A5ACD};
           
           //Шарнир в точке A.
           var geometryHingeA,  
               materialHingeA,  
               meshHingeA,      
               colorHingeA = {color: 0x6A5ACD}; 
           
           //Шарнир в точке D.
           var geometryHingeD,  
               materialHingeD,  
               meshHingeD,      
               colorHingeD = {color: 0x6A5ACD}; 
           
           //Шарнир в точке E.
           var geometryHingeE,  
               materialHingeE,  
               meshHingeE,      
               colorHingeE = {color: 0x6A5ACD}; 
           
           //Трос.
           var geometryCableBCP,  
               materialCableBCP,  
               meshCableBCP,      
               colorCableBCP = {color: 0x000000}; 
           
           
           //Наконечник стойки AC.
           var geometryEndRackAC, 
               materialEndRackAC, 
               meshEndRackAC,     
               colorEndRackAC = {color: 0x6A5ACD}; 
           
           //Груз.
           var geometryCargoP, 
               materialCargoP, 
               meshCargoP,    
               colorCargoP = {color: 0xFF4500}; 
           
           
           var vectorEffortAB,           
               colorEffortAB = 0xFF0000;  
           
           
           var vectorEffortBD,            
               colorEffortBD = 0xFF0000; 
           
          
           var vectorEffortBE,            
               colorEffortBE = 0xFF0000;  
           
           //Функции инициализации
           function init() {
               scene = new THREE.Scene();
               camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 100); 
               renderer = new THREE.WebGLRenderer();
               renderer.setSize(window.innerWidth, window.innerHeight);
               renderer.setClearColor(0xEEEEEE); 
               //renderer.shadowMap.enabled=true;

               document.getElementById("WebGL").appendChild(renderer.domElement); 
               
               camera.position.x = 0;
               camera.position.y = 0;
               camera.position.z = 40;
               camera.lookAt(0, 0, 0);
               
               axes = new THREE.AxisHelper(50); 
               scene.add(axes); 

               control = new THREE.OrbitControls(camera,renderer.domElement); 
               
               panelControlOptions = new function() {
                   this.alpha = 0.0;   
                   this.weightP = 10.0; 
                   this.visibleEffort = true; 
               }
               
               panelInfoEffort = new function() {
                   this.Sbd = '0';
                   this.Sbe = '0';
                   this.Sab = '0';
               }
               gui = new dat.GUI(); 
               gui.add(panelControlOptions, 'alpha', -90, 90).onChange(redrawCraneElements); 
               gui.add(panelControlOptions, 'weightP', 1, 100).onChange(redrawCraneElements); 
               gui.add(panelControlOptions, 'visibleEffort').onChange(redrawCraneElements); 
               
               gui.add(panelInfoEffort, 'Sbd').listen();
               gui.add(panelInfoEffort, 'Sbe').listen();
               gui.add(panelInfoEffort, 'Sab').listen();
               
               drawStaticCraneElements();  
               drawDynamicCraneElements(); 
   
               statFPS = initStatFPS();
               render(); 
   
               window.addEventListener('resize',changeSizeWindow,false);
           }
           
           function drawStaticCraneElements() {
               geometryRackAB = new THREE.CylinderGeometry(RADIUS_RACK, RADIUS_RACK, LENGTH_AB, 32); 
               materialRackAB = new THREE.MeshBasicMaterial(colorRackAB);                            
               meshRackAB = new THREE.Mesh(geometryRackAB, materialRackAB);                         
               meshRackAB.position.x = 0;
               meshRackAB.position.y = LENGTH_AB / 2;
               meshRackAB.position.z = 0;
               scene.add(meshRackAB);
               
               geometryRackBD = new THREE.CylinderGeometry(RADIUS_RACK, RADIUS_RACK, Math.sqrt(2) * LENGTH_AB, 32); 
               materialRackBD = new THREE.MeshBasicMaterial(colorRackBD);                                           
               meshRackBD = new THREE.Mesh(geometryRackBD, materialRackBD);                                        
               meshRackBD.position.x = -Math.cos(Math.PI / 4) * (LENGTH_AB / 2);
               meshRackBD.position.y = LENGTH_AB / 2;
               meshRackBD.position.z = Math.sin(Math.PI / 4) * (LENGTH_AB / 2);
               meshRackBD.rotation.y = Math.PI / 4;
               meshRackBD.rotation.z = -Math.PI / 4;
               scene.add(meshRackBD);
               
               geometryRackBE = new THREE.CylinderGeometry(RADIUS_RACK, RADIUS_RACK, Math.sqrt(2) * LENGTH_AB, 32); 
               materialRackBE = new THREE.MeshBasicMaterial(colorRackBE);                                           
               meshRackBE = new THREE.Mesh(geometryRackBE, materialRackBE);                                        
               meshRackBE.position.x = -Math.cos(Math.PI / 4) * (LENGTH_AB / 2);
               meshRackBE.position.y = LENGTH_AB / 2;
               meshRackBE.position.z = -Math.sin(Math.PI / 4) * (LENGTH_AB / 2);
               meshRackBE.rotation.y = -Math.PI / 4;
               meshRackBE.rotation.z = -Math.PI / 4;
               scene.add(meshRackBE);
               
               geometryHingeB = new THREE.SphereGeometry(RADIUS_RACK, 32, 32);  
               materialHingeB = new THREE.MeshBasicMaterial(colorHingeB);       
               meshHingeB = new THREE.Mesh(geometryHingeB, materialHingeB);     
               meshHingeB.position.y = LENGTH_AB;
               scene.add(meshHingeB);
               
               geometryHingeA = new THREE.SphereGeometry(RADIUS_RACK, 32, 32);  
               materialHingeA = new THREE.MeshBasicMaterial(colorHingeA);       
               meshHingeA = new THREE.Mesh(geometryHingeA, materialHingeA);     
               scene.add(meshHingeA);
               
               geometryHingeD = new THREE.SphereGeometry(RADIUS_RACK, 32, 32);  
               materialHingeD = new THREE.MeshBasicMaterial(colorHingeD);       
               meshHingeD = new THREE.Mesh(geometryHingeD, materialHingeD);     
               meshHingeD.position.x = -LENGTH_AB * Math.cos(Math.PI / 4);
               meshHingeD.position.z = LENGTH_AB * Math.sin(Math.PI / 4);
               scene.add(meshHingeD);
               
               geometryHingeE = new THREE.SphereGeometry(RADIUS_RACK, 32, 32);  
               materialHingeE = new THREE.MeshBasicMaterial(colorHingeE);       
               meshHingeE = new THREE.Mesh(geometryHingeE, materialHingeE);     
               meshHingeE.position.x = -LENGTH_AB * Math.cos(Math.PI / 4);
               meshHingeE.position.z = -LENGTH_AB * Math.sin(Math.PI / 4);
               scene.add(meshHingeE);
               
               renderer.render(scene, camera); 
           }
           function drawDynamicCraneElements() {
               var ALPHA = panelControlOptions.alpha / 180 * Math.PI; 
               var WEIGHT_P = panelControlOptions.weightP; 
               
               panelInfoEffort.Sbd = WEIGHT_P * (Math.cos(ALPHA) - Math.sin(ALPHA));
               panelInfoEffort.Sbe = WEIGHT_P * (Math.cos(ALPHA) + Math.sin(ALPHA));
               panelInfoEffort.Sab = -WEIGHT_P * Math.sqrt(2) * Math.cos(ALPHA);
               
               geometryRackAC = new THREE.CylinderGeometry(RADIUS_RACK, RADIUS_RACK, Math.sqrt(2) * LENGTH_AB, 32); 
               materialRackAC = new THREE.MeshBasicMaterial(colorRackAC);                                           
               meshRackAC = new THREE.Mesh(geometryRackAC, materialRackAC);                                         
               meshRackAC.position.x = Math.cos(ALPHA) * (LENGTH_AB / 2);
               meshRackAC.position.y = LENGTH_AB / 2;
               meshRackAC.position.z = -Math.sin(ALPHA) * (LENGTH_AB / 2);
               meshRackAC.rotation.y = ALPHA;
               meshRackAC.rotation.z = -Math.PI / 4;
               scene.add(meshRackAC);
               
               geometryCableBCP = new THREE.Geometry(); 
               geometryCableBCP.vertices.push(
                   new THREE.Vector3(0, LENGTH_AB + RADIUS_RACK, 0), 
                   new THREE.Vector3(Math.cos(ALPHA) * (LENGTH_AB + RADIUS_RACK), LENGTH_AB + RADIUS_RACK, -Math.sin(ALPHA) * (LENGTH_AB + RADIUS_RACK)),
                   new THREE.Vector3(Math.cos(ALPHA) * (LENGTH_AB + RADIUS_RACK), LENGTH_AB / 2, -Math.sin(ALPHA) * (LENGTH_AB + RADIUS_RACK)));          
               
               materialCableBCP = new THREE.LineBasicMaterial(colorCableBCP);     
               meshCableBCP = new THREE.Line(geometryCableBCP, materialCableBCP); 
               scene.add(meshCableBCP); 
           
               geometryEndRackAC = new THREE.SphereGeometry(RADIUS_RACK, 32, 32);        
               materialEndRackAC = new THREE.MeshBasicMaterial(colorEndRackAC);         
               meshEndRackAC = new THREE.Mesh(geometryEndRackAC, materialEndRackAC);     
               meshEndRackAC.position.x = Math.cos(ALPHA) * LENGTH_AB;
               meshEndRackAC.position.y = LENGTH_AB;
               meshEndRackAC.position.z = -Math.sin(ALPHA) * LENGTH_AB;
               scene.add(meshEndRackAC); 
               
               geometryCargoP = new THREE.BoxGeometry(4, 2, 4); 
               materialCargoP = new THREE.MeshBasicMaterial(colorCargoP);       
               meshCargoP = new THREE.Mesh(geometryCargoP, materialCargoP);     
               meshCargoP.position.x = Math.cos(ALPHA) * (LENGTH_AB + RADIUS_RACK);
               meshCargoP.position.y = LENGTH_AB / 2;
               meshCargoP.position.z = -Math.sin(ALPHA) * (LENGTH_AB + RADIUS_RACK);
               
               scene.add(meshCargoP); 
               
               if(panelControlOptions.visibleEffort == true) {
                   var tmp = -WEIGHT_P * Math.sqrt(2) * Math.cos(ALPHA);
                   vectorEffortAB = new THREE.ArrowHelper(
                       new THREE.Vector3(0, (tmp < 0) ? -1 : 0, 0),                              
                       new THREE.Vector3(0, (tmp < 0) ? (-LENGTH_AB / 2) : (LENGTH_AB / 2), 0),  
                       Math.abs(tmp),                                                            
                       colorEffortAB                                                             
                   );

                   meshRackAB.add(vectorEffortAB);
                   var tmp = WEIGHT_P * (Math.cos(ALPHA) - Math.sin(ALPHA));
                   vectorEffortBD = new THREE.ArrowHelper(
                       new THREE.Vector3(0, (tmp < 0) ? -1 : 1, 0),                                                           
                       new THREE.Vector3(0, (tmp < 0) ? -(Math.sqrt(2) * LENGTH_AB / 2) : (Math.sqrt(2) * LENGTH_AB / 2), 0), 
                       Math.abs(tmp),                                                                                        
                       colorEffortBD                                                                                         
                   );

                   meshRackBD.add(vectorEffortBD); 

                   var tmp = WEIGHT_P * (Math.cos(ALPHA) + Math.sin(ALPHA)); 
                   vectorEffortBE = new THREE.ArrowHelper(
                       new THREE.Vector3(0, (tmp < 0) ? -1 : 1, 0),                                                           
                       new THREE.Vector3(0, (tmp < 0) ? -(Math.sqrt(2) * LENGTH_AB / 2) : (Math.sqrt(2) * LENGTH_AB / 2), 0), 
                       Math.abs(tmp),                                                                                         
                       colorEffortBE                                                                                          
                   );

                   meshRackBE.add(vectorEffortBE);
               } else {
                   vectorEffortAB = null;
                   vectorEffortBD = null;
                   vectorEffortBE = null;
               }
               
               renderer.render(scene, camera); 
           }
           
           function redrawCraneElements() {
               scene.remove(meshRackAC);    
               scene.remove(meshCableBCP);  
               scene.remove(meshEndRackAC); 
               scene.remove(meshCargoP);    
               if (vectorEffortAB != null) meshRackAB.remove(vectorEffortAB); 
               if (vectorEffortBD != null) meshRackBD.remove(vectorEffortBD); 
               if (vectorEffortBE != null) meshRackBE.remove(vectorEffortBE); 
               
               
               drawDynamicCraneElements();
           }
           
           
           
           function render() {
               statFPS.update();
               
               requestAnimationFrame(render);  
               renderer.render(scene, camera); 
           }
           
           function changeSizeWindow() {
               camera.aspect=window.innerWidth/window.innerHeight;
               camera.updateProjectionMatrix();
               renderer.setSize(window.innerWidth,window.innerHeight);
           }
           
           function initStatFPS()
           {
               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;
           }
           window.onload = init; 
       </script>
   </body>
</html>
Источник — «http://tm.spbstu.ru/?title=Мещерский_Задача_6.11&oldid=46985»