| Текущая версия |
Ваш текст |
| Строка 74: |
Строка 74: |
| | ==Реализация на языке JavaScript== | | ==Реализация на языке JavaScript== |
| | {{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Barsukov/4840.html|width=750 |height=550|border=0 }} | | {{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Barsukov/4840.html|width=750 |height=550|border=0 }} |
| − |
| |
| − | <div class="mw-collapsible mw-collapsed">
| |
| − | '''Текст программы на языке JavaScript:'''
| |
| − | <div class="mw-collapsible-content">
| |
| − | Файл '''"4840.html"'''
| |
| − | <syntaxhighlight lang="javascript" line start="1" enclose="div">
| |
| − |
| |
| − | <!DOCTYPE html>
| |
| − |
| |
| − | <html>
| |
| − |
| |
| − | <head>
| |
| − | <title>4840</title>
| |
| − | <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/Barsukov\three.js"></script>
| |
| − | <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/Barsukov\jquery-1.9.0.js"></script>
| |
| − | <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/Barsukov\stats.js"></script>
| |
| − | <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/Barsukov\dat.gui.js"></script>
| |
| − | <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/Barsukov\OrbitControls.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 id="WebGL-output"></div>
| |
| − |
| |
| − | <script type="text/javascript">
| |
| − |
| |
| − | $(function () {
| |
| − | 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 axes = new THREE.AxisHelper( 20 );
| |
| − | axes.position.x = -40;
| |
| − | axes.position.z = 20;
| |
| − | scene.add(axes);
| |
| − |
| |
| − | var spotLight = new THREE.SpotLight( 0xffffff );
| |
| − | spotLight.position.set( -100, 0, -10 );
| |
| − | scene.add(spotLight );
| |
| − |
| |
| − | var cylinder = createMesh(new THREE.CylinderGeometry(20, 20, 20,30,1,true));
| |
| − | scene.add(cylinder);
| |
| − |
| |
| − | var cylinder1 = createMesh1(new THREE.CylinderGeometry(5, 5, 20, 30, 1));
| |
| − | cylinder1.position.x=0;
| |
| − | cylinder1.position.y=0;
| |
| − | cylinder1.position.z=-15;
| |
| − | scene.add(cylinder1);
| |
| − |
| |
| − | var group1 = new THREE.Object3D();
| |
| − | group1.add(cylinder);
| |
| − | group1.add(cylinder1);
| |
| − | group1.position.x = 0;
| |
| − | group1.position.y = -10;
| |
| − | scene.add(group1);
| |
| − |
| |
| − | 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 texture = THREE.ImageUtils.loadTexture("http://tm.spbstu.ru/htmlets/Barsukov\bathroom.jpg")
| |
| − | var mat = new THREE.MeshPhongMaterial();
| |
| − | mat.map = texture;
| |
| − | var mesh = new THREE.Mesh(geom, mat);
| |
| − | return mesh;
| |
| − | }
| |
| − |
| |
| − | camera.position.x = 0;
| |
| − | camera.position.y = -150;
| |
| − | camera.position.z = 100;
| |
| − | 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 = 100;
| |
| − | cameraControls.minDistance = 0.5;
| |
| − | cameraControls.update();
| |
| − |
| |
| − | var controls = new function() {
| |
| − | this.Speed = 0.05;
| |
| − | this.Rotation = 0.01;
| |
| − | this.M1 = 0.2;
| |
| − | this.M2 = 0.05;
| |
| − | this.phi = '0';
| |
| − | }
| |
| − |
| |
| − | var gui = new dat.GUI();
| |
| − | gui.add(controls, 'Speed',0,0.1);
| |
| − | gui.add(controls, 'Rotation',0,0.1);
| |
| − | gui.add(controls, 'M1',0.2,0.5);
| |
| − | gui.add(controls, 'M2',0.01,0.05);
| |
| − | gui.add(controls,'phi').listen()
| |
| − | render();
| |
| − |
| |
| − | var step = 0;
| |
| − | var psi2 = 0;
| |
| − | var phi = Math.PI/2;
| |
| − | var psi = 0;
| |
| − | var phi2 = 0;
| |
| − | var phi1 = 0;
| |
| − | var psi1 = 0;
| |
| − | function render() {
| |
| − | stats.update();
| |
| − | cameraControls.update();
| |
| − | requestAnimationFrame(render);
| |
| − | renderer.render(scene, camera);
| |
| − | step += controls.Speed;
| |
| − | psi2 = (0.375*controls.M2*controls.M2)/(controls.M1*(controls.M1+controls.M2));
| |
| − | phi2 = 0.44*psi2 - 0.44*Math.sin(phi);
| |
| − | psi1 = psi1+psi2*controls.Speed;
| |
| − | phi1 = phi1+phi2*controls.Speed;
| |
| − | phi = phi+phi1*controls.Speed;
| |
| − | psi = psi+psi1*controls.Speed;
| |
| − | w = 3*phi1-4*psi1;
| |
| − | controls.phi=phi;
| |
| − | cylinder1.rotation.y = 4*w;
| |
| − | cylinder.rotation.y = w+Math.PI/2;
| |
| − | cylinder1.position.x=15*Math.sin(phi);
| |
| − | cylinder1.position.z=-15*Math.abs((Math.cos(phi)));
| |
| − | group1.rotation.z += controls.Rotation;
| |
| − | }
| |
| − |
| |
| − | 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>
| |
| − |
| |
| − | </syntaxhighlight>
| |
| − | </div>
| |
| − | </div>
| |
