選項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 = 1, k = 5, c = 0.3, g=9.8;
var l=20;
var rkx = [];
var dt;
var line,line1;
var fv = [];
var vertArray = [];
var lineGeometry;
var ball;
var pend;

function force(dt){
  var a;
  fv[0] = mouse.x*50-rkx[0];
  fv[1] = mouse.y*50;
  console.log(fv);
  a = 10*Math.sqrt(fv[0]*fv[0]+fv[1]*fv[1]);
  if(fv[0]<0){
  	a=a*-1;
  }
  //console.log(rkx[1]);
	rkx[1] = rkx[1]+a*dt;
  //console.log(rkx[1]);
}

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

function deriv (x) {
	var ff = [];
    ff.push (x[1]);                  // x_dot = v;
    ff.push (-g*Math.sin((x[0]*3.14/180)/l));  // v_dot = 1/m *(-cx_dot -kx)
    return ff;
}


function rk4 (dt){
	var rx = [];
  var k1,k2,k3,k4;
  rx[0] = rkx[0];
  rx[1] = rkx[1];
  //console.log(rkx[0]);
  k1=deriv(rx);
  rx[0] = rkx[0]+k1[0]*dt/2;
  rx[1] = rkx[1]+k1[1]*dt/2;
  //console.log(rkx[0]);
  k2=deriv(rx);
  rx[0] = rkx[0]+k2[0]*dt/2;
  rx[1] = rkx[1]+k2[1]*dt/2;
  //console.log(rkx[0]);
  k3=deriv(rx);
  rx[0] = rkx[0]+k3[0]*dt;
  rx[1] = rkx[1]+k3[1]*dt;
  //console.log(rkx[0]);
  k4=deriv(rx);
  rkx[0] = rkx[0] + dt*(k1[0]+2*k2[0]+2*k3[0]+k4[0])/6;
  rkx[1] = rkx[1] + dt*(k1[1]+2*k2[1]+2*k3[1]+k4[1])/6;
}

init();
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(...