import { OrbitControls } from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/examples/jsm/controls/OrbitControls.js';

// シーンを追加
let scene, camera, renderer, pointLight, controls;
let rot = 0;


  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(
    50,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.set(0, 0, 500);
  //レンダラーを追加
  renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  document.body.appendChild(renderer.domElement);

  //テクスチャーを追加
  const textures = new THREE.TextureLoader().load("https://dl.dropboxusercontent.com/s/wehwgeed1gcmwsh/sphere-test.png?dl=0");

  //ジオメトリを作成
  let ballGeometry = new THREE.SphereGeometry(100, 64, 32);

  //マテリアルを作成
  let ballMaterial = new THREE.MeshPhysicalMaterial({ map: textures });

  //メッシュ
  let ballMesh = new THREE.Mesh(ballGeometry, ballMaterial);
  scene.add(ballMesh);

  //平行光源を追加
  let derectionalLight = new THREE.DirectionalLight(0xffffff, 2); //0xは16進数を表す color,強さ
  derectionalLight.position.set(1, 1, 1);
  scene.add(derectionalLight);

  //ポイント光源を追加
  pointLight = new THREE.PointLight(0xffffff, 1);
  pointLight.position.set(-200, -200, -200);
  scene.add(pointLight);

  //ポイント光源がどこにあるか
  // let pointLightHelper = new THREE.PointLightHelper(pointLight, 30);
  // scene.add(pointLightHelper);

  //マウス操作ができるようにしよう
  controls = new OrbitControls(camera, renderer.domElement);
  window.addEventListener("resize", onWindowResize);
  animate();

//ブラウザのリサイズに対応させよう
function onWindowResize() {
  //レンダラーのサイズを随時更新する
  renderer.setSize(window.innerWidth, window.innerHeight);
  //カメラのアスペクト比をただす
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
}

//ポイント光源を球の周りを巡回させよう
function animate() {
  pointLight.position.set(
    200 * Math.sin(Date.now() / 500),
    200 * Math.sin(Date.now() / 1000),
    200 * Math.cos(Date.now() / 500)
  );

  //カメラを回転させてみよう
  //フレームごとに角度をプラスさせる
  rot += 0.5;
  //ラジアン関数に変換
  let radian = rot * (Math.PI / 180);
  //sin関数に変換
  camera.position.x = Math.sin(radian) * 500;
  //cos関数に変換
  camera.position.z = Math.cos(radian) * 500;
  //カメラに地球を向かせる
  camera.lookAt(ballMesh.position);

  //レンダリングしてみよう
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}