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

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
(→‎Реализация на JavaScript)
 
(не показаны 23 промежуточные версии 2 участников)
Строка 5: Строка 5:
 
Используем уравнение Лагранжа 2-го рода:
 
Используем уравнение Лагранжа 2-го рода:
  
−
<math>\frac{d}{dt}\left(\frac{\partial L}{\partial\dot q_i}\right) - \frac{\partial L}{\partial q_i} = 0 ,  (i = 1,2)</math> , где
+
<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 - П - функция Лагранжа
 
  L = T - П - функция Лагранжа
 
  T - кинетическая энергия системы
 
  T - кинетическая энергия системы
 
  П - потенциальная энергия системы
 
  П - потенциальная энергия системы
 
  q - независимые обобщенные координаты
 
  q - независимые обобщенные координаты
 +
Q - непотенциальная обобщённая сила
 +
В данной задаче в качестве обобщенных координат примем изменяющиеся координату призмы <math>x</math> и координату цилиндра <math>c</math> по оси, направленной вдоль наклонной плоскости <math>\varphi </math>.
 +
Представим:
  
−
В данной задаче в качестве обобщенных координат примем изменяющиеся координату призмы <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>, следовательно:
  
−
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy/4829.html|width=760 |height=560|border=0 }}
+
<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 }}
  
 
== Разработка ==
 
== Разработка ==
Строка 23: Строка 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>
Строка 38: Строка 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);
Строка 75: Строка 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;
Строка 91: Строка 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',89.9999,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»