Задача Д.24, вариант 20 из Задачника Яблонского — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
Строка 17: Строка 17:
 
<syntaxhighlight lang="javascript" line start="1" enclose="div">
 
<syntaxhighlight lang="javascript" line start="1" enclose="div">
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
 
<html>
 
<html>
 
 
<head>
 
<head>
     <title> D24_13</title>
+
     <title> D24_20</title>
   
 
   
 
 
     <script type="text/javascript" src="three.js"></script>
 
     <script type="text/javascript" src="three.js"></script>
 
     <script type="text/javascript" src="stats.min.js"></script>
 
     <script type="text/javascript" src="stats.min.js"></script>
Строка 33: Строка 29:
 
             /* set margin to 0 and overflow to hidden, to go fullscreen */
 
             /* set margin to 0 and overflow to hidden, to go fullscreen */
 
             margin: 0;
 
             margin: 0;
/*             overflow: hidden; */
+
            /* overflow: hidden; */
 
         }
 
         }
 
     </style>
 
     </style>
Строка 52: Строка 48:
 
         var stats = initStats();
 
         var stats = initStats();
  
        // create a scene, that will hold all our elements such as objects, cameras and lights.
 
 
         var scene = new THREE.Scene();
 
         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);
 
         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  
        // create a render and set the size
 
 
         var renderer = new THREE.WebGLRenderer();
 
         var renderer = new THREE.WebGLRenderer();
  
Строка 64: Строка 57:
 
         renderer.setSize(window.innerWidth, window.innerHeight);
 
         renderer.setSize(window.innerWidth, window.innerHeight);
 
 
var orbitControls = new THREE.OrbitControls(camera);
+
var orbitControls = new THREE.OrbitControls(camera);
 
         orbitControls.autoRotate = true;
 
         orbitControls.autoRotate = true;
 
          
 
          
var planeGeometry = new THREE.PlaneGeometry(10,20,1,1);
+
var planeGeometry = new THREE.PlaneGeometry(10,20,1,1);
 
         var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
 
         var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
 
         var plane1 = new THREE.Mesh(planeGeometry,planeMaterial);
 
         var plane1 = new THREE.Mesh(planeGeometry,planeMaterial);
 
var plane2 = new THREE.Mesh(planeGeometry,planeMaterial);
 
var plane2 = new THREE.Mesh(planeGeometry,planeMaterial);
 
 
plane1.rotation.y = -0.5*Math.PI;
+
plane1.rotation.y = -0.5*Math.PI;
 
         plane1.position.x = -10;
 
         plane1.position.x = -10;
scene.add(plane1);
+
scene.add(plane1);
plane1.receiveShadow = true;
+
plane1.receiveShadow = true;
 
 
 
         plane2.rotation.y = -0.5*Math.PI;
 
         plane2.rotation.y = -0.5*Math.PI;
plane2.position.x = 10;
+
plane2.position.x = 10;
scene.add(plane2);
+
scene.add(plane2);
plane2.receiveShadow = true;
+
plane2.receiveShadow = true;
 
 
var cubeGeometry1 = new THREE.CubeGeometry(18,7,5);
+
var cubeGeometry1 = new THREE.CubeGeometry(18,7,5);
 
         var cubeMaterial1 = new THREE.MeshLambertMaterial({color: 0xffff00});
 
         var cubeMaterial1 = new THREE.MeshLambertMaterial({color: 0xffff00});
 
         var cube1 = new THREE.Mesh(cubeGeometry1, cubeMaterial1);
 
         var cube1 = new THREE.Mesh(cubeGeometry1, cubeMaterial1);
 
         cube1.castShadow = true;
 
         cube1.castShadow = true;
  
var cubeGeometry2 = new THREE.CubeGeometry(17.5,1,2);
+
var cubeGeometry2 = new THREE.CubeGeometry(17.5,1,2);
 
         var cubeMaterial2 = new THREE.MeshLambertMaterial({color: 0x00ffff});
 
         var cubeMaterial2 = new THREE.MeshLambertMaterial({color: 0x00ffff});
var cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);
+
var cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);
 
         cube2.castShadow = true;
 
         cube2.castShadow = true;
cube2.position.x = 3.75;
+
cube2.position.x = 3.75;
cube2.position.y = 20;
+
cube2.position.y = 20;
cube2.geometry.translate(-3.75,0,0);
+
cube2.geometry.translate(-3.75,0,0);
 
         scene.add(cube2);
 
         scene.add(cube2);
  
 
         var cylinderGeometry = new THREE.CylinderGeometry(0.5, 0.5, 3, 30, 30);
 
         var cylinderGeometry = new THREE.CylinderGeometry(0.5, 0.5, 3, 30, 30);
 
         var cylinderMaterial = new THREE.MeshLambertMaterial({color: 0xffff00});
 
         var cylinderMaterial = new THREE.MeshLambertMaterial({color: 0xffff00});
var cylinder1 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
+
var cylinder1 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
cylinder1.rotation.x = -0.5*Math.PI;
+
cylinder1.rotation.x = -0.5*Math.PI;
cylinder1.position.x = -9.5;
+
cylinder1.position.x = -9.5;
cylinder1.position.y = -2.5;
+
cylinder1.position.y = -2.5;
cylinder1.castShadow = true;
+
cylinder1.castShadow = true;
 
 
var cylinder2 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
+
var cylinder2 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
cylinder2.rotation.x = -0.5*Math.PI;
+
cylinder2.rotation.x = -0.5*Math.PI;
cylinder2.position.x = -9.5;
+
cylinder2.position.x = -9.5;
cylinder2.position.y = 2.5;
+
cylinder2.position.y = 2.5;
cylinder2.castShadow = true;
+
cylinder2.castShadow = true;
 
 
var cylinder3 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
+
var cylinder3 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
cylinder3.rotation.x = -0.5*Math.PI;
+
cylinder3.rotation.x = -0.5*Math.PI;
cylinder3.position.x = 9.5;
+
cylinder3.position.x = 9.5;
cylinder3.position.y = -2.5;
+
cylinder3.position.y = -2.5;
cylinder3.castShadow = true;
+
cylinder3.castShadow = true;
//scene.add(cylinder3);
 
 
 
var cylinder4 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
+
var cylinder4 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
cylinder4.rotation.x = -0.5*Math.PI;
+
cylinder4.rotation.x = -0.5*Math.PI;
cylinder4.position.x = 9.5;
+
cylinder4.position.x = 9.5;
cylinder4.position.y = 2.5;
+
cylinder4.position.y = 2.5;
cylinder4.castShadow = true;
+
cylinder4.castShadow = true;
//scene.add(cylinder4);
+
 
          
+
         var cylinderGeometry1 = new THREE.CylinderGeometry(0.5, 1.5, 2, 4, 4);
var cylinderGeometry1 = new THREE.CylinderGeometry(0.5, 1.5, 2, 4, 4);
+
var cylinder5 = new THREE.Mesh(cylinderGeometry1, cylinderMaterial);
var cylinder5 = new THREE.Mesh(cylinderGeometry1, cylinderMaterial);
+
cylinder5.rotation.y = -1.25*Math.PI;
cylinder5.rotation.y = -1.25*Math.PI;
+
cylinder5.position.x = 3.75;
cylinder5.position.x = 3.75;
+
cylinder5.position.y = 18.5;
cylinder5.position.y = 18.5;
+
cylinder5.castShadow = true;
cylinder5.castShadow = true;
+
scene.add(cylinder5);
scene.add(cylinder5);
 
 
          
 
          
var material = new THREE.MeshLambertMaterial( { color: 0xff00ff } );
+
var material = new THREE.MeshLambertMaterial( { color: 0xff00ff } );
    var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0xf00000, opacity: 0.3, wireframe: true, transparent: true } );
+
var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0xf00000, opacity: 0.3, wireframe: true, transparent: true } );
 
         var HelixCurve = new THREE.Curves.HelixCurve(10);
 
         var HelixCurve = new THREE.Curves.HelixCurve(10);
 
         var springMaterial = new THREE.MeshBasicMaterial( { color: 0xff00ff } );
 
         var springMaterial = new THREE.MeshBasicMaterial( { color: 0xff00ff } );
Строка 140: Строка 131:
 
         var spring2 = THREE.SceneUtils.createMultiMaterialObject( tubeGeometry, [ material, wireframeMaterial] );
 
         var spring2 = THREE.SceneUtils.createMultiMaterialObject( tubeGeometry, [ material, wireframeMaterial] );
  
spring1.scale.x = 0.02;
+
spring1.scale.x = 0.02;
spring1.scale.y = 0.02;
+
spring1.scale.y = 0.02;
spring1.scale.z = 0.1;
+
spring1.scale.z = 0.1;
 
         spring1.rotation.x = -0.5 * Math.PI;
 
         spring1.rotation.x = -0.5 * Math.PI;
 
         spring1.position.x = 8;
 
         spring1.position.x = 8;
        //spring1.position.y = 20;
 
 
         spring1.castShadow = true;
 
         spring1.castShadow = true;
        //scene.add( spring1 );
 
 
 
spring2.scale.x = 0.02;
+
spring2.scale.x = 0.02;
spring2.scale.y = 0.02;
+
spring2.scale.y = 0.02;
spring2.scale.z = 0.1;
+
spring2.scale.z = 0.1;
 
         spring2.rotation.x = -0.5 * Math.PI;
 
         spring2.rotation.x = -0.5 * Math.PI;
 
         spring2.position.x = -7.5;
 
         spring2.position.x = -7.5;
        //spring2.position.y = 20;
 
 
         spring2.castShadow = true;
 
         spring2.castShadow = true;
        //scene.add( spring2 );
 
 
 
var group1 = new THREE.Object3D();
+
var group1 = new THREE.Object3D();
group1.add(cube1);
+
group1.add(cube1);
group1.add(cylinder1);
+
group1.add(cylinder1);
group1.add(cylinder2);
+
group1.add(cylinder2);
group1.add(cylinder3);
+
group1.add(cylinder3);
group1.add(cylinder4);
+
group1.add(cylinder4);
group1.add(spring1);
+
group1.add(spring1);
group1.add(spring2);
+
group1.add(spring2);
//group1.position.y = 22;
+
scene.add(group1);
scene.add(group1);
 
 
 
camera.position.x = -20;
+
camera.position.x = -20;
camera.position.y = 10;
+
camera.position.y = 10;
 
         camera.position.z = 80;
 
         camera.position.z = 80;
 
         camera.lookAt(new THREE.Vector3(10, 5, 1));
 
         camera.lookAt(new THREE.Vector3(10, 5, 1));
 
  
 
         var ambientLight = new THREE.AmbientLight(0x0c0c0c);
 
         var ambientLight = new THREE.AmbientLight(0x0c0c0c);
Строка 180: Строка 165:
 
         var spotLight = new THREE.SpotLight(0xffffff);
 
         var spotLight = new THREE.SpotLight(0xffffff);
 
         spotLight.position.set(-20,10,80);
 
         spotLight.position.set(-20,10,80);
 
 
         scene.add(spotLight);
 
         scene.add(spotLight);
  
 
         document.getElementById("WebGL-output").appendChild(renderer.domElement);
 
         document.getElementById("WebGL-output").appendChild(renderer.domElement);
 
          
 
          
var step = 0;
+
var step = 0;
 
         var scalingStep = 0;
 
         var scalingStep = 0;
 
            
 
            

Версия 21:51, 31 мая 2018

Условие задачи

Определить частоты малых свободных колебаний и формы главных колебаний системы с двумя степенями свободы, пренебрегая силами сопротивления, массами пружин и моментами инерции скручиваемых валов.

[math]m_1=8 кг;[/math] [math]m_2=10 кг;[/math] [math]c_1=40 Н⁄см;[/math] [math]c_2=60 Н⁄см;[/math] [math]l=0,5 м[/math]

Программа

Код программы

Текст программы:
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title> D24_20</title>
  5     <script type="text/javascript" src="three.js"></script>
  6     <script type="text/javascript" src="stats.min.js"></script>
  7     <script type="text/javascript" src="dat.gui.js"></script>
  8 	<script type="text/javascript" src="CurveExtras1.js"></script>
  9 	<script type="text/javascript" src="OrbitControls.js"></script>
 10     <style>
 11         body {
 12             /* set margin to 0 and overflow to hidden, to go fullscreen */
 13             margin: 0;
 14             /* overflow: hidden; */
 15         }
 16     </style>
 17 </head>
 18 <body>
 19 <canvas id="canvas_example" width = 100 height = 200></canvas>
 20 <canvas id="canvas_example2" width = 1000 height = 200></canvas><br>
 21 <div id="Stats-output">
 22 </div>
 23 <!-- Div which will hold the Output -->
 24 <div id="WebGL-output">
 25 </div>
 26 
 27 <script type="text/javascript">
 28 
 29     function init() {
 30 
 31         var stats = initStats();
 32 
 33         var scene = new THREE.Scene();
 34 
 35         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 36 
 37         var renderer = new THREE.WebGLRenderer();
 38 
 39         renderer.setClearColor(new THREE.Color(0xEEEEEE));
 40         renderer.setSize(window.innerWidth, window.innerHeight);
 41 		
 42 	var orbitControls = new THREE.OrbitControls(camera);
 43         orbitControls.autoRotate = true;
 44         
 45 	var planeGeometry = new THREE.PlaneGeometry(10,20,1,1);
 46         var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
 47         var plane1 = new THREE.Mesh(planeGeometry,planeMaterial);
 48 		var plane2 = new THREE.Mesh(planeGeometry,planeMaterial);
 49 		
 50 	plane1.rotation.y = -0.5*Math.PI;
 51         plane1.position.x = -10;
 52 	scene.add(plane1);
 53 	plane1.receiveShadow = true;
 54 		
 55         plane2.rotation.y = -0.5*Math.PI;
 56 	plane2.position.x = 10;
 57 	scene.add(plane2);
 58 	plane2.receiveShadow = true;
 59 		
 60 	var cubeGeometry1 = new THREE.CubeGeometry(18,7,5);
 61         var cubeMaterial1 = new THREE.MeshLambertMaterial({color: 0xffff00});
 62         var cube1 = new THREE.Mesh(cubeGeometry1, cubeMaterial1);
 63         cube1.castShadow = true;
 64 
 65 	var cubeGeometry2 = new THREE.CubeGeometry(17.5,1,2);
 66         var cubeMaterial2 = new THREE.MeshLambertMaterial({color: 0x00ffff});		
 67 	var cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);
 68         cube2.castShadow = true;
 69 	cube2.position.x = 3.75;
 70 	cube2.position.y = 20;
 71 	cube2.geometry.translate(-3.75,0,0);
 72         scene.add(cube2);
 73 
 74         var cylinderGeometry = new THREE.CylinderGeometry(0.5, 0.5, 3, 30, 30);
 75         var cylinderMaterial = new THREE.MeshLambertMaterial({color: 0xffff00});		
 76 	var cylinder1 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
 77 	cylinder1.rotation.x = -0.5*Math.PI;
 78 	cylinder1.position.x = -9.5;
 79 	cylinder1.position.y = -2.5;
 80 	cylinder1.castShadow = true;
 81 		
 82 	var cylinder2 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
 83 	cylinder2.rotation.x = -0.5*Math.PI;
 84 	cylinder2.position.x = -9.5;
 85 	cylinder2.position.y = 2.5;
 86 	cylinder2.castShadow = true;
 87 		
 88 	var cylinder3 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
 89 	cylinder3.rotation.x = -0.5*Math.PI;
 90 	cylinder3.position.x = 9.5;
 91 	cylinder3.position.y = -2.5;
 92 	cylinder3.castShadow = true;
 93 		
 94 	var cylinder4 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
 95 	cylinder4.rotation.x = -0.5*Math.PI;
 96 	cylinder4.position.x = 9.5;
 97 	cylinder4.position.y = 2.5;
 98 	cylinder4.castShadow = true;
 99 
100         var cylinderGeometry1 = new THREE.CylinderGeometry(0.5, 1.5, 2, 4, 4);		
101 	var cylinder5 = new THREE.Mesh(cylinderGeometry1, cylinderMaterial);
102 	cylinder5.rotation.y = -1.25*Math.PI;
103 	cylinder5.position.x = 3.75;
104 	cylinder5.position.y = 18.5;
105 	cylinder5.castShadow = true;
106 	scene.add(cylinder5);
107         
108 	var material = new THREE.MeshLambertMaterial( { color: 0xff00ff } );
109 	var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0xf00000, opacity: 0.3, wireframe: true, transparent: true } );
110         var HelixCurve = new THREE.Curves.HelixCurve(10);
111         var springMaterial = new THREE.MeshBasicMaterial( { color: 0xff00ff } );
112         var tubeGeometry = new THREE.TubeBufferGeometry(HelixCurve, 100, 0.5, 3, false);
113         var spring1 = THREE.SceneUtils.createMultiMaterialObject( tubeGeometry, [ material, wireframeMaterial] );
114         var spring2 = THREE.SceneUtils.createMultiMaterialObject( tubeGeometry, [ material, wireframeMaterial] );
115 
116 	spring1.scale.x = 0.02;
117 	spring1.scale.y = 0.02;
118 	spring1.scale.z = 0.1;
119         spring1.rotation.x = -0.5 * Math.PI;
120         spring1.position.x = 8;
121         spring1.castShadow = true;
122 		
123 	spring2.scale.x = 0.02;
124 	spring2.scale.y = 0.02;
125 	spring2.scale.z = 0.1;
126         spring2.rotation.x = -0.5 * Math.PI;
127         spring2.position.x = -7.5;
128         spring2.castShadow = true;
129 		
130 	var group1 = new THREE.Object3D();
131 	group1.add(cube1);
132 	group1.add(cylinder1);
133 	group1.add(cylinder2);
134 	group1.add(cylinder3);
135 	group1.add(cylinder4);
136 	group1.add(spring1);
137 	group1.add(spring2);
138 	scene.add(group1);
139 		
140 	camera.position.x = -20;
141 	camera.position.y = 10;
142         camera.position.z = 80;
143         camera.lookAt(new THREE.Vector3(10, 5, 1));
144 
145         var ambientLight = new THREE.AmbientLight(0x0c0c0c);
146         scene.add(ambientLight);
147 
148         var spotLight = new THREE.SpotLight(0xffffff);
149         spotLight.position.set(-20,10,80);
150         scene.add(spotLight);
151 
152         document.getElementById("WebGL-output").appendChild(renderer.domElement);
153         
154  	var step = 0;
155         var scalingStep = 0;
156           
157         var controls = new function () {
158         	this.t = 1;
159         	
160         	this.c1 = 40*100;
161         	this.c2 = 60*100;
162         	this.l = 0.5;
163 
164             this.m1 = 8;
165             this.m2 = 10;
166             
167             
168             this.a11 = this.m2;
169             this.a22 = 19/12 * this.m1 * this.l * this.l;
170             this.c11 = this.c1 + this.c2;
171             this.c22 = 6.25 * this.c1 * this.l * this.l + this.c2* this.l * this.l;
172             this.c12 = (2 * this.c2 * this.l - 5 * this.c1 * this.l)/2;
173 			this.D = Math.sqrt((this.a11 * this.c22 + this.a22 * this.c11)*(this.a11 * this.c22 + this.a22 * this.c11) -4*this.a11 * this.a22*(this.c11 * this.c22 - this.c12 * this.c12));
174             this.k1 = '' + Math.sqrt((this.a11 * this.c22 + this.a22 * this.c11 + this.D)/(2*this.a11*this.a22));
175             this.k2 = '' + Math.sqrt((this.a11 * this.c22 + this.a22 * this.c11 - this.D)/(2*this.a11*this.a22));
176                         
177                         
178             this.redraw = function() {
179 				step = 0;    
180 			};
181         }; 
182             
183         
184         var gui = new dat.GUI();
185   
186         gui.add(controls, 'm1',5,20).onChange(controls.redraw)  ;
187         gui.add(controls, 'm2',5,20).onChange(controls.redraw) ; 
188         gui.add(controls, 'c1',0*100,100*100).onChange(controls.redraw) ; 
189         gui.add(controls, 'c2',0*100,100*100).onChange(controls.redraw) ; 
190 
191         gui.add(controls, 'k1').listen() ; 
192         gui.add(controls, 'k2').listen() ;
193 		gui.add(controls, 'redraw');
194 		controls.redraw();
195         
196         render();
197         
198  		function render() {
199             stats.update();
200             
201 			controls.a11 = controls.m2;
202             controls.a22 = 19/12 * controls.m1 * controls.l * controls.l;
203             controls.c11 = controls.c1 + controls.c2;
204             controls.c22 = 6.25 * controls.c1 * controls.l * controls.l + controls.c2* controls.l * controls.l;
205             controls.c12 = (2 * controls.c2 * controls.l - 5 * controls.c1 * controls.l)/2;
206 			controls.D = Math.sqrt((controls.a11 * controls.c22 + controls.a22 * controls.c11)*(controls.a11 * controls.c22 + controls.a22 * controls.c11)
207 						-4*controls.a11 * controls.a22*(controls.c11 * controls.c22 - controls.c12 * controls.c12));
208             controls.k1 = '' + Math.sqrt((controls.a11 * controls.c22 + controls.a22 * controls.c11 + controls.D)/(2*controls.a11*controls.a22));
209             controls.k2 = '' + Math.sqrt((controls.a11 * controls.c22 + controls.a22 * controls.c11 - controls.D)/(2*controls.a11*controls.a22));
210 			
211 
212 			var cty = canvas_example2.getContext("2d");
213 			var w = canvas_example2.width;
214 			var h = canvas_example2.height;
215 			
216 			cty.lineWidth = "0.04";
217 			cty.moveTo(0, h/2);
218 			cty.lineTo(w, h/2);
219 			cty.moveTo(0, 0);
220 			cty.lineTo(0,h);
221 			cty.stroke();
222 			//cty.strokeRect(0,0,w,h);
223 	
224 			if (step == 0) {
225 				cty.clearRect(0, 0, w, h);
226 			} 
227 			
228 			var x = 100-5*(3.5 * Math.sin(controls.k1*step*0.0003) -3.74 * Math.sin(controls.k2*step*0.0003));
229 			cty.lineWidth="2";
230 			cty.beginPath();
231 			if (step == 0) {
232 				cty.moveTo(0, h/2); }
233 			else {
234 				cty.moveTo((step -1)/4, x);
235 			}
236 			cty.lineTo(step/4, x);
237 			cty.stroke();
238 		
239 			step += controls.t;
240 
241 			cube2.rotation.z = 0.2*Math.sin(controls.k1*step*0.0003) - 0.2*Math.sin(controls.k2*step*0.0003);
242             group1.position.y = 0.75*(3.5 * Math.sin(controls.k1*step*0.0003) -3.74 * Math.sin(controls.k2*step*0.0003));
243             spring1.scale.z = 0.1 - 0.008*( 0.75*controls.l*(3.5 * Math.sin(controls.k1*step*0.0003) - 3.74 * Math.sin(controls.k2*step*0.0003)));
244             spring2.scale.z = 0.1 - 0.02*( 0.75*controls.l*(3.5 * Math.sin(controls.k1*step*0.0003) - 3.74 * Math.sin(controls.k2*step*0.0003)));
245 
246             requestAnimationFrame(render);
247             renderer.render(scene, camera);
248         }
249         
250          function initStats() {
251             var stats = new Stats();
252             stats.setMode(0); // 0: fps, 1: ms
253             stats.domElement.style.position = 'absolute';
254             stats.domElement.style.left = '0px';
255             stats.domElement.style.top = '0px';
256 
257             document.getElementById("Stats-output").appendChild(stats.domElement);
258             return stats;
259         }
260     }
261 window.onload = init
262 </script>
263 </body>
264 </html>

Используемые библиотеки

  • three.js
  • jquery-1.9.0.js
  • stats.js
  • dat.gui.js
  • OrbitControls.js