Цилиндр и наклонная плоскость (48.29) — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
(→‎Реализация на JavaScript)
 
(не показаны 33 промежуточные версии 2 участников)
Строка 2: Строка 2:
 
==Условие==
 
==Условие==
 
На гладкой горизонтальной плоскости помещена треугольная призма ABC массы m, которая может скользить без трения по этой плоскости; по грани призмы AB катится без скольжения однородный круглый цилиндр массы m1. Определить ускорение призмы.
 
На гладкой горизонтальной плоскости помещена треугольная призма ABC массы m, которая может скользить без трения по этой плоскости; по грани призмы AB катится без скольжения однородный круглый цилиндр массы m1. Определить ускорение призмы.
−
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy/4829.html|width=650 |height=450|border=0 }}
+
==Решение задачи==
 +
Используем уравнение Лагранжа 2-го рода:
 +
 
 +
<math>\frac{d}{dt}\left(\frac{\partial L}{\partial\dot q_i}\right) - \frac{\partial L}{\partial q_i} = Q  ,  (i = 1,2)</math> , где
 +
L = T - П - функция Лагранжа
 +
T - кинетическая энергия системы
 +
П - потенциальная энергия системы
 +
q - независимые обобщенные координаты
 +
Q - непотенциальная обобщённая сила
 +
В данной задаче в качестве обобщенных координат примем изменяющиеся координату призмы <math>x</math> и координату цилиндра <math>c</math> по оси, направленной вдоль наклонной плоскости <math>\varphi </math>.
 +
Представим:
 +
 
 +
<math>T = T_1+T_2</math>, где <math>T_1</math> - кинетическая энергия катка массы <math>m_1</math>, а <math>Т_2</math> - треугольной призмы массы <math>m</math>.
 +
 
 +
Треугольная призма откатывается вдоль оси <math>x</math>, следовательно:
 +
 
 +
<math>T_2 = \frac{1}{2}m\dot x^{2}</math>
 +
 
 +
Движение цилиндра массы <math>m_1</math> плоское.
 +
 
 +
<math>T_1 = \frac{1}{2}m_1V_с^{2}+\frac{1}{4}m_1r^{2} ω^{2}</math>
 +
 
 +
Где <math>V_с</math> - абсолютная скорость центра масс цилиндра массой <math>m_1</math>:
 +
 
 +
<math>V_c=  \dot S_c \cos\alpha - \dot x</math>
 +
 
 +
<math> ω= \frac{1}{r}\dot S_c</math>
 +
 
 +
Здесь <math>\dot S_c </math> - относительная скорость
 +
 
 +
<math>T = T_1+T_2= \frac{1}{2}m\dot x^{2} +\frac{1}{2}m_1(\dot S_c \cos^{2}\alpha - \dot x)^{2}+\frac{1}{4}m_1\dot S_c^{2}</math>
 +
 
 +
Получаем два равенства, соответствующие двум уравнениям Лагранжа:
 +
 
 +
<math>m\ddot x -m_1(\ddot S_c \cos^{2}\alpha - \ddot x)=m_1g\cos\alpha\sin\alpha</math>
 +
 
 +
<math>m_1(\ddot S_c \cos^{2}\alpha - \ddot x)\cos^{2}\alpha+\frac{m_1}{2}\ddot S_c=m_1g\sin\alpha </math>
 +
 
 +
Откуда получаем:
 +
 
 +
<math>\ddot x=a=-g\frac{m_1\sin 2\alpha}{3(m+m_1)-2m_1\cos^{2}\alpha}</math>
 +
 
 +
==Реализация на JavaScript==
 +
 
 +
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy/n4829.html|width=800 |height=600|border=0 }}
 +
 
 
== Разработка ==
 
== Разработка ==
 
<div class="mw-collapsible mw-collapsed">
 
<div class="mw-collapsible mw-collapsed">
Строка 10: Строка 55:
 
<syntaxhighlight lang="javascript" line start="1" enclose="div">
 
<syntaxhighlight lang="javascript" line start="1" enclose="div">
 
<!DOCTYPE html>
 
<!DOCTYPE html>
−
    <html>
+
 
−
    <head>
+
<html>
−
<title>4829</title>
+
 
 +
<head>
 +
    <title>4829</title>
 
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\three.js"></script>
 
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\three.js"></script>
 
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OBJLoader.js"></script>
 
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OBJLoader.js"></script>
Строка 25: Строка 72:
 
        
 
        
 
     </style>
 
     </style>
−
    </head>
+
</head>
−
    <body>
+
<body>
  
−
    <div id="Stats-output">
+
<div id="Stats-output">
−
    </div>
+
</div>
  
−
    <div id="WebGL-output">
+
<div id="WebGL-output">
−
    </div>
+
</div>
  
  
−
    <script type="text/javascript">
+
<script type="text/javascript">
  
 
     $(function () {
 
     $(function () {
−
var a = 0;
+
var a = 0;
−
var g = 9.8;
+
var g = 9.8;
−
var m = 20;
+
var m = 20;
−
var m1 = 15;
+
var m1 = 15;
−
var stats = initStats();
+
var stats = initStats();
−
        var scene = new THREE.Scene();
+
 
−
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
+
        var scene = new THREE.Scene();
−
        var renderer = new THREE.WebGLRenderer();
+
 
−
        renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
+
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
−
        renderer.setSize(window.innerWidth, window.innerHeight);
+
 
−
        renderer.shadowMapEnabled = true;
+
        var renderer = new THREE.WebGLRenderer();
−
var spotLight = new THREE.SpotLight( 0xffffff );
+
 
−
spotLight.position.set( -100, 0, -10 ); //-40, 60, -10
+
        renderer.setClearColor(new THREE.Color(0x7722ff, 1.0));
−
scene.add(spotLight );
+
        renderer.setSize(window.innerWidth, window.innerHeight);
 +
        renderer.shadowMapEnabled = true;
 +
<!-- var spotLight = new THREE.SpotLight( 0x00ff00 ); -->
 +
<!-- spotLight.position.set( -1000, 0, -10 ); -->
 +
<!-- scene.add(spotLight ); -->
 
var ugol= 135;
 
var ugol= 135;
 
var alpha0 = Math.cos(ugol*Math.PI/180);
 
var alpha0 = Math.cos(ugol*Math.PI/180);
Строка 62: Строка 113:
 
cube.position.z=0;
 
cube.position.z=0;
 
scene.add(cube);
 
scene.add(cube);
−
var cylinder1 = createMesh1(new THREE.CylinderGeometry(25, 25, 60, 15, 1));
+
var cylinder1 = createMesh1(new THREE.CylinderGeometry(25, 25, 80, 25, 1));
 
cylinder1.position.x=cube.position.x-400*Math.cos((180-ugol)*Math.PI/180)+25*Math.sin((180-ugol)*Math.PI/180);
 
cylinder1.position.x=cube.position.x-400*Math.cos((180-ugol)*Math.PI/180)+25*Math.sin((180-ugol)*Math.PI/180);
 
cylinder1.position.y=cube.position.y;
 
cylinder1.position.y=cube.position.y;
Строка 78: Строка 129:
 
 
 
function createMesh0(geom) {
 
function createMesh0(geom) {
−
                  var meshMaterial = new THREE.MeshNormalMaterial();
+
            var meshMaterial = new THREE.MeshNormalMaterial( { color: 0x550000 } );
−
                  meshMaterial.side = THREE.DoubleSide;
+
            meshMaterial.side = THREE.DoubleSide;
−
                  var wireFrameMat = new THREE.MeshBasicMaterial();
+
            var wireFrameMat = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
−
                  wireFrameMat.wireframe = true;
+
            wireFrameMat.wireframe = true;
−
                  var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
+
            var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
−
                  return plane;
+
            return plane;
−
          }
+
        }
−
            function createMesh(geom) {
+
        function createMesh(geom) {
−
            var meshMaterial = new THREE.MeshNormalMaterial();
+
            var meshMaterial = new THREE.MeshNormalMaterial( { color: 0xffffff } );
−
            meshMaterial.side = THREE.DoubleSide;
+
            meshMaterial.side = THREE.DoubleSide;
−
            var wireFrameMat = new THREE.MeshBasicMaterial();
+
            var wireFrameMat = new THREE.MeshBasicMaterial( { color: 0x9999ff } );
−
            wireFrameMat.wireframe = true;
+
            wireFrameMat.wireframe = true;
−
            var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
+
            var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
−
            return mesh;
+
            return mesh;
−
            }
+
        }
−
function createMesh1(geom) {
+
function createMesh1(geom) {
−
                        var mat = new THREE.MeshNormalMaterial();
+
            var mat = new THREE.MeshNormalMaterial( { color: 0xffff00 } );
−
var mesh = new THREE.Mesh(geom,mat);
+
var mesh = new THREE.Mesh(geom,mat);
−
return mesh;
+
return mesh;
−
          }
+
        }
  
−
        camera.position.x = 0;
+
        camera.position.x = 0;
−
        camera.position.y = -1300;
+
        camera.position.y = -1300;
−
        camera.position.z = 1500;
+
        camera.position.z = 1500;
−
        camera.lookAt(scene.position);
+
        camera.lookAt(scene.position);
  
−
$("#WebGL-output").append(renderer.domElement);
+
$("#WebGL-output").append(renderer.domElement);
−
renderer.render(scene, camera);
+
renderer.render(scene, camera);
−
var stats = initStats();
+
var stats = initStats();
−
cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
+
cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
−
cameraControls.maxDistance = 800;
+
cameraControls.maxDistance = 900;
−
cameraControls.minDistance = 0.5;
+
cameraControls.minDistance = 0.5;
−
cameraControls.update();
+
cameraControls.update();
−
var controls = new function() {
+
var controls = new function() {
−
this.Speed = 0.1;
+
this.Speed = 0.1;
−
this.ugol = 135;
+
this.ugol = 135;
−
this.m = 20;
+
this.m = 20;
−
this.m1 = 15;
+
this.m1 = 15;
−
this.a='0'
+
this.a='0'
−
            }
+
        }
−
var obj = { start_again:function(){  
+
var obj = { start_again:function(){  
−
step=0;
+
step=0;
−
cube.position.x=0;
+
cube.position.x=0;
−
cube.position.y=0;
+
cube.position.y=0;
−
cube.position.z=0;
+
cube.position.z=0;
−
cylinder1.position.x=cube.position.x-400*Math.cos((180-ugol)*Math.PI/180)+25*Math.sin((180-ugol)*Math.PI/180);
+
cylinder1.position.x=cube.position.x-400*Math.cos((180-ugol)*Math.PI/180)+25*Math.sin((180-ugol)*Math.PI/180);
−
cylinder1.position.y=cube.position.y;
+
cylinder1.position.y=cube.position.y;
−
cylinder1.position.z=cube.position.z+400*Math.sin((180-ugol)*Math.PI/180)+25*Math.cos((180-ugol)*Math.PI/180);
+
cylinder1.position.z=cube.position.z+400*Math.sin((180-ugol)*Math.PI/180)+25*Math.cos((180-ugol)*Math.PI/180);
−
group1.position.x = 0;
+
group1.position.x = 0;
−
group1.position.y = 0;
+
group1.position.y = 0;
−
group1.position.z=0;
+
group1.position.z=0;
−
}};
+
}};
−
var gui = new dat.GUI();
+
var gui = new dat.GUI();
−
gui.add(controls, 'Speed',0,0.2);
+
gui.add(controls, 'Speed',0.1,0.3);
−
gui.add(controls, 'ugol',90,180);
+
gui.add(controls, 'ugol',89.9999,180);
−
gui.add(controls, 'm',0.1,50);
+
gui.add(controls, 'm',0.1,50);
−
gui.add(controls, 'm1',0.1,50);
+
gui.add(controls, 'm1',0.1,50);
−
gui.add(controls,'a').listen();
+
gui.add(controls,'a').listen();
−
gui.add(obj,'start_again');
+
gui.add(obj,'start_again');
−
var step = 0;
+
var step = 0;
−
function render() {
+
function render() {
−
cameraControls.update();
+
cameraControls.update();
−
requestAnimationFrame(render);
+
requestAnimationFrame(render);
−
renderer.render(scene, camera);
+
renderer.render(scene, camera);
−
step += controls.Speed
+
step += controls.Speed
−
        ugol = controls.ugol
+
ugol = controls.ugol
−
controls.a=a;
+
controls.a=a;
−
m = controls.m
+
m = controls.m
−
m1=controls.m1
+
m1=controls.m1
−
if(ugol<=135) {
+
if(ugol<=135) {
 
group1.rotation.y=Math.cos(ugol*Math.PI/180);
 
group1.rotation.y=Math.cos(ugol*Math.PI/180);
−
}
+
}
−
else {
+
else {
−
group1.rotation.y=Math.cos(ugol*Math.PI/180)+Math.cos((ugol-55)*Math.PI/180);
+
group1.rotation.y=Math.cos(ugol*Math.PI/180)+Math.cos((ugol-55)*Math.PI/180);
−
}
+
}
−
cylinder1.rotation.y = step*step;
+
cylinder1.rotation.y = step*step;
−
  a = -(g*m1*Math.sin(2*(180-ugol)*Math.PI/180))/(3*(m1+m)-2*m1*((Math.cos((180-ugol)*Math.PI/180))*(Math.cos((180-ugol)*Math.PI/180))));
+
a = -(g*m1*Math.sin(2*(180-ugol)*Math.PI/180))/(3*(m1+m)-2*m1*((Math.cos((180-ugol)*Math.PI/180))*(Math.cos((180-ugol)*Math.PI/180))));  
−
var v =0.6*a;
+
var v =0.65*a;
−
if (cylinder1.position.z<=25*Math.sin((180-ugol)*Math.PI/180)) {
+
 
−
cylinder1.position.x = 25;  
+
if (cylinder1.position.z<=25*Math.sin((180-ugol)*Math.PI/180)) {
−
cylinder1.position.z = 25*Math.sin((180-ugol)*Math.PI/180);
+
cylinder1.position.x = 25;  
 +
cylinder1.position.z = 25*Math.sin((180-ugol)*Math.PI/180);
 
cylinder1.rotation.y = 0;
 
cylinder1.rotation.y = 0;
−
group1.position.x =group1.position.x+v;  
+
group1.position.x =group1.position.x+v;
 +
if (group1.position.x<=-500) {
 +
step=0;
 +
cube.position.x=0;
 +
cube.position.y=0;
 +
cube.position.z=0;
 +
cylinder1.position.x=cube.position.x-400*Math.cos((180-ugol)*Math.PI/180)+25*Math.sin((180-ugol)*Math.PI/180);
 +
cylinder1.position.y=cube.position.y;
 +
cylinder1.position.z=cube.position.z+400*Math.sin((180-ugol)*Math.PI/180)+25*Math.cos((180-ugol)*Math.PI/180);
 +
group1.position.x = 0;
 +
group1.position.y = 0;
 +
group1.position.z=0;
 +
}
 
}  
 
}  
 
else {  
 
else {  
−
  group1.position.x = (a*step*step)/2;
+
group1.position.x = (a*step*step)/2;
 
cylinder1.position.x=26;   
 
cylinder1.position.x=26;   
−
cylinder1.position.z=d-g*Math.sin((180-ugol)*Math.PI/180)*step*step/2;
+
cylinder1.position.z=d-g*Math.sin((180-ugol)*Math.PI/180)*step*step/2;
−
}  
+
}  
−
}  
+
}  
−
        render();
+
        render();
−
function initStats() {
+
function initStats() {
−
            var stats = new Stats();
+
            var stats = new Stats();
−
            stats.setMode(0); // 0: fps, 1: ms
+
            stats.setMode(0); // 0: fps, 1: ms
−
            stats.domElement.style.position = 'absolute';
+
            stats.domElement.style.position = 'absolute';
−
            stats.domElement.style.left = '0px';
+
            stats.domElement.style.left = '0px';
−
            stats.domElement.style.top = '0px';
+
            stats.domElement.style.top = '0px';
−
            $("#Stats-output").append(stats.domElement);
+
            $("#Stats-output").append(stats.domElement);
−
            return stats;
+
            return stats;
−
          }
+
        }
−
    });
+
    });
 
</script>
 
</script>
 
</body>
 
</body>

Текущая версия на 14:58, 22 декабря 2017

  • "Задача - Мещерский (48.29)"

Условие[править]

На гладкой горизонтальной плоскости помещена треугольная призма ABC массы m, которая может скользить без трения по этой плоскости; по грани призмы AB катится без скольжения однородный круглый цилиндр массы m1. Определить ускорение призмы.

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

Используем уравнение Лагранжа 2-го рода:

[math]\frac{d}{dt}\left(\frac{\partial L}{\partial\dot q_i}\right) - \frac{\partial L}{\partial q_i} = Q , (i = 1,2)[/math] , где 

L = T - П - функция Лагранжа
T - кинетическая энергия системы
П - потенциальная энергия системы
q - независимые обобщенные координаты
Q - непотенциальная обобщённая сила

В данной задаче в качестве обобщенных координат примем изменяющиеся координату призмы [math]x[/math] и координату цилиндра [math]c[/math] по оси, направленной вдоль наклонной плоскости [math]\varphi [/math]. Представим:

[math]T = T_1+T_2[/math], где [math]T_1[/math] - кинетическая энергия катка массы [math]m_1[/math], а [math]Т_2[/math] - треугольной призмы массы [math]m[/math].

Треугольная призма откатывается вдоль оси [math]x[/math], следовательно:

[math]T_2 = \frac{1}{2}m\dot x^{2}[/math]

Движение цилиндра массы [math]m_1[/math] плоское.

[math]T_1 = \frac{1}{2}m_1V_с^{2}+\frac{1}{4}m_1r^{2} ω^{2}[/math]

Где [math]V_с[/math] - абсолютная скорость центра масс цилиндра массой [math]m_1[/math]:

[math]V_c= \dot S_c \cos\alpha - \dot x[/math]

[math] ω= \frac{1}{r}\dot S_c[/math]

Здесь [math]\dot S_c [/math] - относительная скорость

[math]T = T_1+T_2= \frac{1}{2}m\dot x^{2} +\frac{1}{2}m_1(\dot S_c \cos^{2}\alpha - \dot x)^{2}+\frac{1}{4}m_1\dot S_c^{2}[/math]

Получаем два равенства, соответствующие двум уравнениям Лагранжа:

[math]m\ddot x -m_1(\ddot S_c \cos^{2}\alpha - \ddot x)=m_1g\cos\alpha\sin\alpha[/math]

[math]m_1(\ddot S_c \cos^{2}\alpha - \ddot x)\cos^{2}\alpha+\frac{m_1}{2}\ddot S_c=m_1g\sin\alpha [/math]

Откуда получаем:

[math]\ddot x=a=-g\frac{m_1\sin 2\alpha}{3(m+m_1)-2m_1\cos^{2}\alpha}[/math]

Реализация на JavaScript[править]

Разработка[править]

Текст программы на языке JavaScript (разработчик Вараев Владислав):

Файл "4829.html" 

  1 <!DOCTYPE html>
  2 
  3 <html>
  4 
  5 <head>
  6     <title>4829</title>
  7     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\three.js"></script>
  8     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OBJLoader.js"></script>
  9     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\MTLLoader.js"></script>
 10     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OBJMTLLoader.js"></script>
 11     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\jquery-1.9.0.js"></script>
 12     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\stats.js"></script>
 13     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\dat.gui.js"></script>
 14     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\chroma.js"></script>
 15     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\TrackballControls.js"></script>
 16 	<script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OrbitControls.js"></script>
 17        
 18     </style>
 19 </head>
 20 <body>
 21 
 22 <div id="Stats-output">
 23 </div>
 24 
 25 <div id="WebGL-output">
 26 </div>
 27 
 28 
 29 <script type="text/javascript">
 30 
 31     $(function () {
 32 	var a = 0;
 33 	var g = 9.8;
 34 	var m = 20;
 35 	var m1 = 15;
 36 	var stats = initStats();
 37 
 38         var scene = new THREE.Scene();
 39 
 40         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 41 
 42         var renderer = new THREE.WebGLRenderer();
 43 
 44         renderer.setClearColor(new THREE.Color(0x7722ff, 1.0));
 45         renderer.setSize(window.innerWidth, window.innerHeight);
 46         renderer.shadowMapEnabled = true;
 47 		<!-- var spotLight = new THREE.SpotLight( 0x00ff00 ); -->
 48 		<!-- spotLight.position.set( -1000, 0, -10 );  -->
 49 		<!-- scene.add(spotLight ); -->
 50 				var ugol= 135;
 51 				var alpha0 = Math.cos(ugol*Math.PI/180);
 52 				var step = 0;
 53 					var plane = createMesh0(new THREE.PlaneGeometry(1000, 2000, 50, 50));
 54 				scene.add(plane);
 55 					var cube = createMesh(new THREE.CubeGeometry(2, 200, 800));
 56 						cube.position.x=0;
 57 						cube.position.y=0;
 58 						cube.position.z=0;
 59 				scene.add(cube);
 60 					var cylinder1 = createMesh1(new THREE.CylinderGeometry(25, 25, 80, 25, 1));
 61 						cylinder1.position.x=cube.position.x-400*Math.cos((180-ugol)*Math.PI/180)+25*Math.sin((180-ugol)*Math.PI/180);	
 62 						cylinder1.position.y=cube.position.y;
 63 						cylinder1.position.z=cube.position.z+400*Math.sin((180-ugol)*Math.PI/180)+25*Math.cos((180-ugol)*Math.PI/180);
 64 						var c = cylinder1.position.x;
 65 						var d = cylinder1.position.z;
 66 				scene.add(cylinder1);
 67 					var group1 = new THREE.Object3D();
 68 					group1.add(cube);
 69 					group1.add(cylinder1);
 70 					group1.position.x = 0;
 71 					group1.position.y = 0;
 72 					group1.position.z=0;
 73 				scene.add(group1);
 74 				
 75 		function createMesh0(geom) {
 76             var meshMaterial = new THREE.MeshNormalMaterial( { color: 0x550000 } );
 77             meshMaterial.side = THREE.DoubleSide;
 78             var wireFrameMat = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
 79             wireFrameMat.wireframe = true;
 80             var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
 81             return plane;
 82         }
 83         function createMesh(geom) {
 84             var meshMaterial = new THREE.MeshNormalMaterial( { color: 0xffffff } );
 85             meshMaterial.side = THREE.DoubleSide;
 86             var wireFrameMat = new THREE.MeshBasicMaterial( { color: 0x9999ff } );
 87             wireFrameMat.wireframe = true;
 88             var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
 89             return mesh;
 90         }
 91 		function createMesh1(geom) {
 92             var mat = new THREE.MeshNormalMaterial( { color: 0xffff00 } );
 93 			var mesh = new THREE.Mesh(geom,mat);
 94 			return mesh;
 95         }
 96 
 97         camera.position.x = 0;
 98         camera.position.y = -1300;
 99         camera.position.z = 1500;
100         camera.lookAt(scene.position);
101 
102 		$("#WebGL-output").append(renderer.domElement);
103 		renderer.render(scene, camera);
104 			var stats = initStats();
105 		cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
106 		cameraControls.maxDistance = 900;
107 		cameraControls.minDistance = 0.5;
108 		cameraControls.update();
109 			var controls = new function() {
110 				this.Speed = 0.1;
111 				this.ugol = 135;
112 				this.m = 20;
113 				this.m1 = 15;
114 				this.a='0'
115         }
116 			var obj = { start_again:function(){ 
117 				step=0;
118 				cube.position.x=0;
119 				cube.position.y=0;
120 				cube.position.z=0;
121 				cylinder1.position.x=cube.position.x-400*Math.cos((180-ugol)*Math.PI/180)+25*Math.sin((180-ugol)*Math.PI/180);	
122 				cylinder1.position.y=cube.position.y;
123 				cylinder1.position.z=cube.position.z+400*Math.sin((180-ugol)*Math.PI/180)+25*Math.cos((180-ugol)*Math.PI/180);
124 				group1.position.x = 0;
125 				group1.position.y = 0;
126 				group1.position.z=0;
127 		}};
128 			var gui = new dat.GUI();
129 				gui.add(controls, 'Speed',0.1,0.3);
130 				gui.add(controls, 'ugol',89.9999,180);
131 				gui.add(controls, 'm',0.1,50);
132 				gui.add(controls, 'm1',0.1,50);	
133 				gui.add(controls,'a').listen();
134 				gui.add(obj,'start_again');
135 			var step = 0;
136 		function render() {
137 			cameraControls.update();
138 			requestAnimationFrame(render);
139 			renderer.render(scene, camera);
140 			step += controls.Speed
141 			ugol = controls.ugol
142 			controls.a=a;
143 			m = controls.m
144 			m1=controls.m1
145 				if(ugol<=135) {
146 					group1.rotation.y=Math.cos(ugol*Math.PI/180);
147 				}
148 				else {
149 					group1.rotation.y=Math.cos(ugol*Math.PI/180)+Math.cos((ugol-55)*Math.PI/180);
150 				}
151 					cylinder1.rotation.y = step*step;
152 			 a = -(g*m1*Math.sin(2*(180-ugol)*Math.PI/180))/(3*(m1+m)-2*m1*((Math.cos((180-ugol)*Math.PI/180))*(Math.cos((180-ugol)*Math.PI/180)))); 
153 				var v =0.65*a;
154 
155 					if (cylinder1.position.z<=25*Math.sin((180-ugol)*Math.PI/180)) {
156 						cylinder1.position.x = 25; 
157  						cylinder1.position.z = 25*Math.sin((180-ugol)*Math.PI/180);
158 						cylinder1.rotation.y = 0;
159 						group1.position.x =group1.position.x+v;
160 if (group1.position.x<=-500)	{
161 step=0;
162 				cube.position.x=0;
163 				cube.position.y=0;
164 				cube.position.z=0;
165 				cylinder1.position.x=cube.position.x-400*Math.cos((180-ugol)*Math.PI/180)+25*Math.sin((180-ugol)*Math.PI/180);	
166 				cylinder1.position.y=cube.position.y;
167 				cylinder1.position.z=cube.position.z+400*Math.sin((180-ugol)*Math.PI/180)+25*Math.cos((180-ugol)*Math.PI/180);
168 				group1.position.x = 0;
169 				group1.position.y = 0;
170 				group1.position.z=0;
171 }					
172 					} 
173 					else { 
174 					group1.position.x = (a*step*step)/2;
175 					cylinder1.position.x=26;  
176 					cylinder1.position.z=d-g*Math.sin((180-ugol)*Math.PI/180)*step*step/2;										
177 					} 
178 		} 
179         render();
180 		function initStats() {
181             var stats = new Stats();
182             stats.setMode(0); // 0: fps, 1: ms
183             stats.domElement.style.position = 'absolute';
184             stats.domElement.style.left = '0px';
185             stats.domElement.style.top = '0px';
186             $("#Stats-output").append(stats.domElement);
187             return stats;
188         }
189     });
190 </script>
191 </body>
192 </html>
Источник — «http://tm.spbstu.ru/?title=Цилиндр_и_наклонная_плоскость_(48.29)&oldid=49439»