Текущая версия |
Ваш текст |
Строка 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>
| |