Редактирование: Цилиндр и наклонная плоскость (48.29)

*"Задача - Мещерский (48.29)"
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy/4829.html|width=650 |height=450|border=0 }}



== Разработка ==
<div class="mw-collapsible mw-collapsed">
'''Текст программы на языке JavaScript (разработчик [[Вараев Владислав]]):'''
<div class="mw-collapsible-content"> 
Файл '''"4829.html"'''
<syntaxhighlight lang="javascript" line start="1" enclose="div">
<!DOCTYPE html>

<html>

<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\OBJLoader.js"></script>
    <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\MTLLoader.js"></script>
    <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OBJMTLLoader.js"></script>
    <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\jquery-1.9.0.js"></script>
    <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\stats.js"></script>
    <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\dat.gui.js"></script>
    <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\chroma.js"></script>
    <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\TrackballControls.js"></script>
	<script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OrbitControls.js"></script>
       
    </style>
</head>
<body>

<div id="Stats-output">
</div>

<div id="WebGL-output">
</div>


<script type="text/javascript">

    $(function () {
	var a = 0;
	var g = 9.8;
	var m = 20;
	var m1 = 15;
	var stats = initStats();

        var scene = new THREE.Scene();

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;
		var spotLight = new THREE.SpotLight( 0xffffff );
		spotLight.position.set( -100, 0, -10 ); //-40, 60, -10
		scene.add(spotLight );
				var ugol= 135;
				var alpha0 = Math.cos(ugol*Math.PI/180);
				var step = 0;
					var plane = createMesh0(new THREE.PlaneGeometry(1000, 2000, 50, 50));
				scene.add(plane);
					var cube = createMesh(new THREE.CubeGeometry(2, 200, 800));
						cube.position.x=0;
						cube.position.y=0;
						cube.position.z=0;
				scene.add(cube);
					var cylinder1 = createMesh1(new THREE.CylinderGeometry(25, 25, 60, 15, 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.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);
						var c = cylinder1.position.x;
						var d = cylinder1.position.z;
				scene.add(cylinder1);
					var group1 = new THREE.Object3D();
					group1.add(cube);
					group1.add(cylinder1);
					group1.position.x = 0;
					group1.position.y = 0;
					group1.position.z=0;
				scene.add(group1);
				
		function createMesh0(geom) {
            var meshMaterial = new THREE.MeshNormalMaterial();
            meshMaterial.side = THREE.DoubleSide;
            var wireFrameMat = new THREE.MeshBasicMaterial();
            wireFrameMat.wireframe = true;
            var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
            return plane;
        }
        function createMesh(geom) {
            var meshMaterial = new THREE.MeshNormalMaterial();
            meshMaterial.side = THREE.DoubleSide;
            var wireFrameMat = new THREE.MeshBasicMaterial();
            wireFrameMat.wireframe = true;
            var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
            return mesh;
        }
		function createMesh1(geom) {
            var mat = new THREE.MeshNormalMaterial();
			var mesh = new THREE.Mesh(geom,mat);
			return mesh;
        }

        camera.position.x = 0;
        camera.position.y = -1300;
        camera.position.z = 1500;
        camera.lookAt(scene.position);

		$("#WebGL-output").append(renderer.domElement);
		renderer.render(scene, camera);
			var stats = initStats();
		cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
		cameraControls.maxDistance = 800;
		cameraControls.minDistance = 0.5;
		cameraControls.update();
			var controls = new function() {
				this.Speed = 0.1;
				this.ugol = 135;
				this.m = 20;
				this.m1 = 15;
				this.a='0'
        }
			var obj = { start_again:function(){ 
				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;
		}};
			var gui = new dat.GUI();
				gui.add(controls, 'Speed',0,0.2);
				gui.add(controls, 'ugol',90,180);
				gui.add(controls, 'm',0.1,50);
				gui.add(controls, 'm1',0.1,50);	
				gui.add(controls,'a').listen();
				gui.add(obj,'start_again');
			var step = 0;
		function render() {
			cameraControls.update();
			requestAnimationFrame(render);
			renderer.render(scene, camera);
			step += controls.Speed
			ugol = controls.ugol
			controls.a=a;
			m = controls.m
			m1=controls.m1
				if(ugol<=135) {
					group1.rotation.y=Math.cos(ugol*Math.PI/180);
				}
				else {
					group1.rotation.y=Math.cos(ugol*Math.PI/180)+Math.cos((ugol-55)*Math.PI/180);
				}
					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)))); 
				var v =0.6*a;
					if (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;
						group1.position.x =group1.position.x+v;			   
					} 
					else { 
					group1.position.x = (a*step*step)/2;
					cylinder1.position.x=26;  
					cylinder1.position.z=d-g*Math.sin((180-ugol)*Math.PI/180)*step*step/2;										
					} 
		} 
        render();
		function initStats() {
            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';
            $("#Stats-output").append(stats.domElement);
            return stats;
        }
    });
</script>
</body>
</html>
</div>
</div>