$(window).on("load",function(){
  init();
});

var scene = new THREE.Scene();

//最初のドン
function init(){

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

  //axes 便利な座標を出してくれますよ
  var axes = new THREE.AxisHelper(20);
  scene.add(axes);

  //レンダラー追加
  $("#stage").append(renderer.domElement);


  //ステータス表示したかったらどうぞ
  var stats = new Stats();
  stats.setMode(0);
  $("#stats").append(stats.domElement);

  
  /*  メインの場所 ----------------------------------------------- */
  //THREE.Pointsに入れる ジオメトリ + マテリアルを準備
  //1.球ジオメトリ作成
  var geometry = new THREE.SphereGeometry(10,10,10);
  //2.球マテリアル、通称タマテリ
   var tamaterial = new THREE.PointsMaterial({
        color: 0xffffee,
        size: 3,
        transparent: true,
        blending: THREE.AdditiveBlending,
        map: get_canvasTexture(),//キャンバス作ってテクスチャに突っ込んだ子が帰ってくる
        depthWrite: false
   });
  var pointObject = new THREE.Points(geometry, tamaterial);
  pointObject.sortParticles = true;
  scene.add(pointObject);

  //レンダーは最後に入れないと表示されなのだよ困ったもんだ。。。
  renderer.render(scene, camera);
}

//作ったcanvasを返す
function get_canvasTexture(){
  
    var canvas = document.createElement('canvas');
    canvas.width = 16;
    canvas.height = 16;
    var context = canvas.getContext('2d');
    context.fillStyle = "rgb(200, 0, 0)";
    context.fillRect(0, 0, canvas.width, canvas.height);
  
    $(".hoge")[0].appendChild(canvas);
    var texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;
    return texture;
}