// -----------------------------------------------
// dat-guiの設定
// -----------------------------------------------
// set param
var sampleTarget = function() {
  this.color = "#ffffff";
  this.scale = 1;
};

//param で名前空間作っとく
var param = function() {
  this.box;
}
// gui設置
window.onload = function() {
  param.box = new sampleTarget();
  setValue();
  var gui = new dat.GUI();
  gui.addColor(param.box, 'color').onChange(setValue);
  gui.add(param.box, 'scale', 0, 50).onChange(setValue);
};

// datGuiで使うsetValue
function setValue() {
  cube.material.color.set(param.box.color);
  cube.scale.set(param.box.scale,param.box.scale,param.box.scale);
}


// ------------------------------------------------
// 基本の設定
// ------------------------------------------------

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

// カメラを作成（カメラはperspectiveCamera）
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 4;

// rendererを作成（アンチエイリアスも指定）
var renderer = new THREE.WebGLRenderer({antialias:true});

// レンダラーの色、サイズを指定
renderer.setClearColor("#888");
renderer.setSize( window.innerWidth, window.innerHeight );

// DOMにrenderを追加する。
document.body.appendChild( renderer.domElement );

// ------------------------------------------------
// meshとかを作っていく
// ------------------------------------------------

// phongMaterialで立方体を作っていく
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );

var cube = new THREE.Mesh( geometry, material );

// cubeをシーンに追加
scene.add( cube );
// 周りで動くcubeの群れを作る
var cubes = new THREE.Group();
for ( var i = 0; i < 500; i ++ ) {
    var cube2 = new THREE.Mesh( geometry, material );
    cube2.position.x = ( Math.random() - 0.5 ) * 100;
    cube2.position.y = ( Math.random() - 0.5 ) * 100;
    cube2.position.z = ( Math.random() - 0.5 ) * 100;
    cube2.updateMatrix();
    cube2.matrixAutoUpdate = false;
    cubes.add(cube2);
}
// cubesをシーンに追加
scene.add( cubes );


// lightを設置 ３点光にしてあげる（3点光と言いつつ、一つは環境光だった...）
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
scene.add( light );

var light = new THREE.DirectionalLight( 0x002288 );
light.position.set( -1, -1, -1 );
scene.add( light );

var light = new THREE.AmbientLight( 0x444444 );
scene.add( light );

// アニメーションしよう
var render = function () {
  requestAnimationFrame( render );

  cube.rotation.x += 0.006;
  cube.rotation.y += 0.01;

  cubes.rotation.x -= 0.001;
  cubes.rotation.y += 0.002;

  renderer.render(scene, camera);
};

// -----------------------------------------------
// orbitControlsの設定
// -----------------------------------------------
var controls;
controls = new THREE.OrbitControls(camera);
controls.autoRotate = true;

render();