Текущая версия |
Ваш текст |
Строка 1: |
Строка 1: |
− | '''Задача 48.41 из сборника задач Мещерского (Калинин.И.Н)''' | + | '''Задача 48.41 из сборника задач Мещерского''' |
| '''''Задача:'''''Смоделировать движение системы из диска и маятника, прикрепленного к нему(см рис.) на языке программирования JS . | | '''''Задача:'''''Смоделировать движение системы из диска и маятника, прикрепленного к нему(см рис.) на языке программирования JS . |
| [[File:mesherski.png|300px|thumb|Маятник на Диске]] | | [[File:mesherski.png|300px|thumb|Маятник на Диске]] |
Строка 26: |
Строка 26: |
| == Реализация при помощи JS == | | == Реализация при помощи JS == |
| {{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Kalinin/Meshersky/4841.html|width=940 |height=400 |border=0 }} | | {{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Kalinin/Meshersky/4841.html|width=940 |height=400 |border=0 }} |
− |
| |
− |
| |
− |
| |
− | <div class="mw-collapsible mw-collapsed">
| |
− | '''Код программы на языке JavaScript:'''
| |
− | <div class="mw-collapsible-content">
| |
− | Файл '''"4841.html"'''
| |
− | <syntaxhighlight lang="javascript" line start="1" enclose="div">
| |
− |
| |
− | <!DOCTYPE html>
| |
− |
| |
− | <html>
| |
− |
| |
− | <head>
| |
− | <title>4841</title>
| |
− | <script type="text/javascript" src="three.js"></script>
| |
− | <script type="text/javascript" src="jquery-1.9.0.js"></script>
| |
− | <script type="text/javascript" src="libs/stats.js"></script>
| |
− | <script type="text/javascript" src="dat.gui.js"></script>
| |
− | <style>
| |
− | body {
| |
− | /* set margin to 0 and overflow to hidden, to go fullscreen */
| |
− | margin: 0;
| |
− | overflow: hidden;
| |
− | }
| |
− | </style>
| |
− | </head>
| |
− | <body>
| |
− |
| |
− | <div id="Stats-output">
| |
− | </div>
| |
− | <!-- Div which will hold the Output -->
| |
− | <div id="WebGL-output">
| |
− | </div>
| |
− |
| |
− | <!-- Javascript code that runs our Three.js examples -->
| |
− | <script type="text/javascript">
| |
− |
| |
− | // once everything is loaded, we run our Three.js stuff.
| |
− | $(function () {
| |
− |
| |
− | var stats = initStats();
| |
− |
| |
− | // create a scene, that will hold all our elements such as objects, cameras and lights.
| |
− | var scene = new THREE.Scene();
| |
− |
| |
− | // create a camera, which defines where we're looking at.
| |
− | var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
| |
− |
| |
− | // create a render and set the size
| |
− | var webGLRenderer = new THREE.WebGLRenderer();
| |
− | webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
| |
− | webGLRenderer.setSize(window.innerWidth, window.innerHeight);
| |
− | webGLRenderer.shadowMapEnabled = true;
| |
− | var R=10,l=20;
| |
− | var cylinder1 = createMesh(new THREE.CylinderGeometry(R, R, 4));
| |
− | var cylinder2 = createMesh(new THREE.CylinderGeometry(0.5, 0.5, l));
| |
− | var sphere = createMesh(new THREE.SphereGeometry(2, 0, 0));
| |
− | // add the sphere to the scene
| |
− | scene.add(sphere);
| |
− |
| |
− | // add the sphere to the scene
| |
− | scene.add(cylinder1);
| |
− | scene.add(cylinder2);
| |
− |
| |
− | // position and point the camera to the center of the scene
| |
− | camera.position.x = 0;
| |
− | camera.position.y = 40;
| |
− | camera.position.z = 50;
| |
− | camera.lookAt(new THREE.Vector3(0, 0, 0));
| |
− |
| |
− | // add the output of the renderer to the html element
| |
− | $("#WebGL-output").append(webGLRenderer.domElement);
| |
− |
| |
− | // call the render function
| |
− | var step = 0;
| |
− |
| |
− |
| |
− | // setup the control gui
| |
− | var controls = new function () {
| |
− | // we need the first child, since it's a multimaterial
| |
− |
| |
− | this.radiusTop = 20;
| |
− | this.radiusBottom = 20;
| |
− | this.height = 20;
| |
− |
| |
− | this.segmentsX = 8;
| |
− | this.segmentsY = 1;
| |
− | this.phi='0';
| |
− | this.ksi='0';
| |
− | this.openEnded = false;
| |
− |
| |
− | this.redraw = function () {
| |
− | // remove the old plane
| |
− | scene.remove(cylinder1);
| |
− | scene.remove(cylinder2);
| |
− | // create a new one
| |
− |
| |
− | cylinder1 = createMesh(new THREE.CylinderGeometry(R, R, 4, controls.segmentsX, controls.segmentsY, controls.openEnded));
| |
− | cylinder2 = createMesh(new THREE.CylinderGeometry(0.5, 0.5, l, 8, 1, controls.openEnded));
| |
− | // add it to the scene.
| |
− | scene.remove(sphere);
| |
− | // create a new one
| |
− | sphere = createMesh(new THREE.SphereGeometry(2, 10, 10, 0, 2*Math.PI, 0, 2*Math.PI));
| |
− | // add it to the scene.
| |
− | scene.add(sphere);
| |
− | scene.add(cylinder1);
| |
− | scene.add(cylinder2);
| |
− | };
| |
− | }
| |
− |
| |
− | var gui = new dat.GUI();
| |
− | //gui.add(controls, 'radiusTop', -40, 40).onChange(controls.redraw);
| |
− | //gui.add(controls, 'radiusBottom', -40, 40).onChange(controls.redraw);
| |
− | //gui.add(controls, 'height', 0, 40).onChange(controls.redraw);
| |
− | gui.add(controls, 'segmentsX', 1, 100).step(1).onChange(controls.redraw);
| |
− | gui.add(controls, 'segmentsY', 1, 20).step(1).onChange(controls.redraw);
| |
− | gui.add(controls, 'openEnded').onChange(controls.redraw);
| |
− | gui.add(controls, 'phi').listen();
| |
− | gui.add(controls, 'ksi').listen();
| |
− |
| |
− | render();
| |
− |
| |
− | function createMesh(geom) {
| |
− |
| |
− | // assign two materials
| |
− | var meshMaterial = new THREE.MeshNormalMaterial();
| |
− | meshMaterial.side = THREE.DoubleSide;
| |
− | var wireFrameMat = new THREE.MeshBasicMaterial();
| |
− | wireFrameMat.wireframe = true;
| |
− |
| |
− | // create a multimaterial
| |
− | var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
| |
− |
| |
− | return mesh;
| |
− | }
| |
− |
| |
− | function render() {
| |
− | stats.update();
| |
− |
| |
− | cylinder1.rotation.x = Math.PI/2;
| |
− | cylinder1.rotation.y =Math.sin(step)*Math.PI/2;
| |
− | cylinder2.rotation.z=Math.sin(10*step);
| |
− | cylinder2.position.x=R*Math.sin(cylinder1.rotation.y)+l/2*Math.sin(cylinder2.rotation.z);
| |
− | cylinder2.position.y=-R*Math.cos(cylinder1.rotation.y)-l/2*Math.cos(cylinder2.rotation.z);
| |
− | sphere.position.x=R*Math.sin(cylinder1.rotation.y)+l*Math.sin(cylinder2.rotation.z);
| |
− | sphere.position.y=-R*Math.cos(cylinder1.rotation.y)-l*Math.cos(cylinder2.rotation.z);
| |
− | step += 0.01;
| |
− | controls.phi=cylinder1.rotation.y;
| |
− | controls.ksi=cylinder2.rotation.z;
| |
− | <!-- camera.position.x = 100*Math.sin(step); -->
| |
− | <!-- camera.position.y = 100*Math.cos(step); -->
| |
− | <!-- camera.position.z = 50; -->
| |
− | <!-- camera.lookAt(new THREE.Vector3(0,0,0)); -->
| |
− | // render using requestAnimationFrame
| |
− | requestAnimationFrame(render);
| |
− | webGLRenderer.render(scene, camera);
| |
− | }
| |
− |
| |
− | function initStats() {
| |
− |
| |
− | var stats = new Stats();
| |
− | stats.setMode(0); // 0: fps, 1: ms
| |
− |
| |
− | // Align top-left
| |
− | 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>
| |
− |
| |
− | </syntaxhighlight>
| |
− | </div>
| |
− | </div>
| |