$(window).on("load", function() {
  init();//とりあえず最初のドン 
});

//シーンを作る
var scene = new THREE.Scene();

function init() {

  ideyo_kyokusen();
  //カメラ作る
  var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
  camera.position.x = 20;
  camera.position.y = 10;
  camera.position.z = 20;
  camera.lookAt(scene.position);
  
  //レンダラー作る
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  //axes 便利な座標を出してくれますよ
  var axes = new THREE.AxisHelper(20);
  scene.add(axes);
  
  //グリッドヘルパーがでる
  var gridHelper = new THREE.GridHelper( 10, 5 );
  scene.add( gridHelper );
 
  
  //レンダラー追加
  $("#stage").append(renderer.domElement);
  renderer.render(scene, camera);

  }

function ideyo_kyokusen(){
  
  var point01 = new THREE.Vector3( 0, 1, 10 );
  var point02 = new THREE.Vector3( 20, 15 ,0 );
  var point03 = new THREE.Vector3( 10, 1 ,0 );
  
  var curve = new THREE.QuadraticBezierCurve3(
	  point01,
    point02,
    point03
  );
  
  var geometry = new THREE.Geometry();
  geometry.vertices = curve.getPoints( 30 );
  //ポイント分だけシェイプ作ってみる
  var curvePoints = curve.getPoints( 30 );
  var s_mate = new THREE.MeshBasicMaterial( {color: 0xffff55} );
  var s_geo = new THREE.SphereGeometry( 0.1, 10, 10 );
  for( var i = 0 ; i < curvePoints.length ; i++ ){
    var sphere = new THREE.Mesh( s_geo, s_mate );
    sphere.position.x = curvePoints[i].x;
    sphere.position.y = curvePoints[i].y;
    sphere.position.z = curvePoints[i].z;
    scene.add(sphere);
  }

  var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );

  // Create the final object to add to the scene
  var curveObject = new THREE.Line( geometry, material );       
  scene.add(curveObject);
  
}