選項3

by yi hom

HTML

<div id="info">hw4-3-2 <br/>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>

CSS

#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #ffff00
}
body {
    overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var mesh,mesh1, border;
var clock = new THREE.Clock();
var mouse = new THREE.Vector2();
var raycaster;
var m = 0.5, k = 5, c = 0.3, g=9.8, M=100;
var l=20;
var mx = [];
var dt;
var line1;
var ball,box;
var pend;

init();
var a;
var inva;

function invert (a) {
    var ainv = [];
    
    var det = a[0][0] * a[1][1] - a[0][1]*a[1][0];
    ainv.push ([a[1][1]/det, -a[0][1]/det]);
    ainv.push ([-a[1][0]/det, a[0][0]/det]);
    return ainv;
}

function reset() {
  rkx[0] = 0, rkx[1] = 0;
}

function deriv (x) {
	var ff = [];
  
    a = [[m+M, m*l*Math.cos(x[2]*3.14/180)],[Math.cos(x[2]*3.14/180)/l,1]];
    
    inva = invert(a);
    
    ff.push (x[1]);              // x_dot = v;
    ff.push (inva[0][0]*m*l*x[3]*x[3]*Math.sin(x[2]*3.14/180)+inva[0][1]*(-g/l*Math.sin(x[2]*3.14/180)));  // v_dot = 1/m *(-cx_dot -kx)
    
    
    ff.push (x[3]);                // x_dot = v;
    ff.push (inva[1][0]*m*l*x[3]*x[3]*Math.sin(x[2]*3.14/180)+inva[1][1]*((-g/l)*Math.sin(x[2]*3.14/180)));  // v_dot = 1/m *(-cx_dot -kx)    
    
    return ff;
}

function midpoint(dt){
	var xmid = [];
  var f = deriv (mx);
  var n = mx.length;
  for(var i = 0; i < n; i++){
  	xmid[i] = mx[i] + f[i] * (dt/2);
  }
  var fmid = deriv(xmid);
  for(i = 0; i <n; i++){
  	mx[i] = mx[i] + fmid[i] * dt
  }
}

animate();

function init() {
    scene = new THREE.Scene();

    camera = new THREE.OrthographicCamera(-50, 50, 50, -50, -10, 10);
    camera.position.z = 10;
    scene.add(camera);
		
    mesh1 = new THREE.Mesh(new THREE.CircleGeometry(1, 10), new THREE.MeshBasicMaterial());
    mesh1.position.y=-20;
    
    var lineGeometry = new THREE.Geometry();
    var vertArray = lineGeometry.vertices;
    vertArray.push( new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, -19, 0) );
    lineGeometry.computeLineDistances();
    // use LineBasicMaterial if no dashes are desired
    var lineMaterial = new THREE.LineBasicMaterial( { color: 0xcc0000 } );
    line1 = new THREE.Line(...