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