//ページの読み込みを待つ
window.addEventListener('load', init);
function init() {


  //--------------- 1. canvas　---------------//
  //canvasに3Dオブジェクトを表示
  const canvas = document.querySelector("#myCanvas");
  //canvasのサイズを指定
  const width = 350;
  const height = 250;


  //--------------- 2. scene ---------------//
  //3Dを表現する空間
  const scene = new THREE.Scene();


  //--------------- 3. light ---------------//
  //点光源1を作成(色, 光の強さ, 距離, 光の減衰率)
  const point1 = new THREE.PointLight(0xffffff, 4, 50, 0);
  point1.position.set(100, 200, 100);
  scene.add(point1);

  //点光源2を作成(色, 光の強さ, 距離, 光の減衰率)
  const point2 = new THREE.PointLight(0xffffff, 4, 50, 0);
  point2.position.set(-200, -200, -100);
  scene.add(point2);


  //--------------- 4. mesh ---------------//
  //光沢感のあるマテリアル({ color: 0xから始まる16進数カラー})
  const Material = new THREE.MeshStandardMaterial({color: 0xffffff, roughness:0.1})

  //直方体その1
  const box1 = new THREE.Mesh(
    //直方体のジオメトリー(幅,高さ,奥行き)
    new THREE.BoxGeometry(30, 400, 70),
    Material
  );
  //位置(x,y,z)
  box1.position.set(0, 0, -15);
  //回転角(x,y,z)
  box1.rotation.set(15,0,0);

  //直方体その2
  const box2 = new THREE.Mesh(
    //直方体のジオメトリー(幅,高さ,奥行き)
    new THREE.BoxGeometry(30, 400, 70),
    Material
  );
  //位置(x,y,z)
  box2.position.set(0, 0, 15);
  //回転角(x,y,z)
  box2.rotation.set(-15,0,0);

  //円柱その1
  const cylinder1 = new THREE.Mesh(
    //円柱のジオメトリー(上面半径,下面半径,高さ,円周分割数)
    new THREE.CylinderGeometry(35, 35, 30, 30),
    Material
  );
  //位置(x,y,z)
  cylinder1.position.set(0, -10, -125);
  //回転角(x,y,z)
  cylinder1.rotation.set(0,0,1.6);

  //円柱その2
  const cylinder2 = new THREE.Mesh(
    //円柱のジオメトリー(上面半径,下面半径,高さ,円周分割数)
    new THREE.CylinderGeometry(35, 35, 30, 30),
    Material
  );
  //位置(x,y,z)
  cylinder2.position.set(0, -10, 125);
  //回転角(x,y,z)
  cylinder2.rotation.set(0,0,1.6);

  //メッシュをグループ化
  const mesh = new THREE.Group();
  mesh.add(box1,box2,cylinder1,cylinder2);
  //3D空間にmeshを配置
  scene.add(mesh);


  //--------------- 5. camera ---------------//
  //遠近感のあるカメラ(視野角, アスペクト比, near, far)
  const camera = new THREE.PerspectiveCamera(30, width/height, 1, 2000);
  //カメラの位置(x,y,z)
  camera.position.set(0, 0, +1000);
  //カメラの視点（注視点）
  camera.lookAt(scene.position);
  //カメラを360度移動
  const controls = new THREE.OrbitControls(camera); 


  //--------------- 6. renderer ---------------//
  //物体の輪郭が滑らかに表示
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
  //高解像度対応
  renderer.setPixelRatio(window.devicePixelRatio);
  //幅と高さを設定
  renderer.setSize(width, height);
  //空間の背景色
  renderer.setClearColor(0x000000);


  //--------------- 7. animate ---------------//
  //再度render関数を実行
  function render() {
    requestAnimationFrame(render);
    //反時計周りにロゴを回転
    mesh.rotation.y += 0.01;
    //シーン, カメラをもとに描画
    renderer.render(scene, camera);
  }

  render();
}