window.addEventListener('DOMContentLoaded', init);

function init() {
    // レンダラーを作成
  
    const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('#canvas'),
        alpha: true,
    });
    // ウィンドウサイズ設定
    width = document.getElementById('main_canvas').getBoundingClientRect().width;
    height = document.getElementById('main_canvas').getBoundingClientRect().height;
    renderer.setPixelRatio(1);
    renderer.setSize(width, height);
    console.log(window.devicePixelRatio);
    console.log(width + ", " + height);
    
    
    // シーンを作成
    const scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x87B8C0 ); // 背景色

// 座標軸を表示
const axes = new THREE.AxesHelper(400);
scene.add(axes)

    // カメラ設定
const camera = new THREE.PerspectiveCamera(60, width / height);
const controls = new THREE.PointerLockControls(camera,renderer.domElement);
controls.getObject().position.y = 10
// canvasクリックでポインタロック
scene.add(controls.getObject());
document.getElementById('main_canvas').addEventListener('click', function() {
  controls.lock(); 
});

let move = (function() {

  const SPEED = 60.0;

  let moveForward  = false;
  let moveBackward = false;
  let moveLeft     = false;
  let moveRight    = false;
  let prevTime     = performance.now();

  // キーダウンイベント設定
  document.addEventListener( 'keydown', function(e) {
    switch ( e.keyCode ) {
      case 87: // w
        moveForward = true;
        break;
      case 65: // a
        moveLeft = true;
        break;
      case 83: // s
        moveBackward = true;
        break;
      case 68: // d
        moveRight = true;
        break;
    }
  }, false );

  // キーアップイベント設定
  document.addEventListener( 'keyup', function(e) {
    switch ( e.keyCode ) {
      case 87: // w
        moveForward = false;
        break;
      case 65: // a
        moveLeft = false;
        break;
      case 83: // s
        moveBackward = false;
        break;
      case 68: // d
        moveRight = false;
        break;
    }
  }, false );

  return {
    getVelocity() {
      let time = performance.now();
      let delta = ( time - prevTime ) / 1000;
      let directionX = Number( moveLeft ) - Number( moveRight );
      let directionZ = Number( moveForward ) - Number( moveBackward );
      let velocity = new THREE.Vector3();
      velocity.x -= directionX * SPEED * delta;
      velocity.z -= directionZ * SPEED * delta;
      prevTime = time;
      return velocity;
    }
  }

})();

    // Load GLTF or GLB
    
    // フィールド作成
const geometry = new THREE.BoxGeometry(512, 8, 512, 10, 10, 1);
const material = new THREE.MeshPhongMaterial({color: 0xe29676});
const field = new THREE.Mesh(geometry, material);
field.position.y = -5;
scene.add(field);
// オブジェクト作成
scene.add(createBox(16, 16, 16, {x: -128, z: -128, y: 8}, 0x6c9bd2));
scene.add(createBox(16, 16, 16, {x: 128, z: -128, y: 8}, 0x9cbb1c));
scene.add(createBox(16, 16, 16, {x: -128, z: 128, y: 8}, 0x9cbb1c));
scene.add(createBox(16, 16, 16, {x: 128, z: 128, y: 8}, 0x6c9bd2));

// ボックスオブジェクトの生成関数
function createBox(x, y, z, position, color) {
  const geometry = new THREE.BoxGeometry(x, y, z);
  const material = new THREE.MeshPhongMaterial({color: color});
  const box = new THREE.Mesh(geometry, material);
  box.position.x = position.x;
  box.position.z = position.z;
  box.position.y = position.y;
  return box;
}
    renderer.outputEncoding = true;
    renderer.gammaFactor = 2.2;


    // 平行光源
    const light = new THREE.DirectionalLight(0xFFFFFF);
    light.intensity = 1; // 光の強さ
    light.position.set(3, 10, 1);
    // シーンに追加
    scene.add(light);


    //環境光源(アンビエントライト)：すべてを均等に照らす、影のない、全体を明るくするライト
    const ambient = new THREE.AmbientLight(0xf8f8ff, 0.7);
    scene.add(ambient); //シーンにアンビエントライトを追加

    // 初回実行
   function tick() {
  let v = move.getVelocity();
  controls.getObject().translateX(v.x);
  controls.getObject().translateZ(v.z);
  renderer.render(scene, camera); // レンダリング

  requestAnimationFrame(tick);
}
}