import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.131.0/build/three.module.js';
// r131以上じゃないと動かなかった

/**
 * 基本設定
 */
const canvasEl = document.getElementById('canvas');
const canvasSize = {
  w: canvasEl.clientWidth,
  h: canvasEl.clientHeight,
};

const renderer = new THREE.WebGLRenderer({
  canvas: canvasEl,
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(canvasSize.w, canvasSize.h);
renderer.setClearColor(0xf9e4ee);

const scene = new THREE.Scene();
scene.add(new THREE.AmbientLight(0xffffff, 0.6));

const calcCameraDist = (fov) => {
  const fovRad = (fov / 2) * (Math.PI / 180);
  const dist = canvasSize.h / 2 / Math.tan(fovRad);

  return dist;
};

const fov = 45;
const camera = new THREE.PerspectiveCamera(
  fov,
  canvasSize.w / canvasSize.h,
  0.1,
  10000
);
camera.position.z = calcCameraDist(fov);

const light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.set(-10, 10, 10);
scene.add(light);

/**
 * メッシュの作成
 */
const createGeometry = () => {
  const size = 150;
  const segments = 32;

  const geometry = new THREE.BoxBufferGeometry(
    size,
    size,
    size,
    segments,
    segments,
    segments
  );

  // 変形後の頂点座標を入れておく空の配列
  geometry.morphAttributes.position = [];

  // オリジナルのジオメトリ（Box）の頂点座標の配列
  const positionAttribute = geometry.attributes.position;

  // 変形後のジオメトリ（Sphere）の頂点座標の配列
  const spherePositions = [];

  // 頂点の数だけループを回す
  for (let i = 0; i < positionAttribute.count; i++) {
    // 立方体の頂点座標を取得
    const x = positionAttribute.getX(i);
    const y = positionAttribute.getY(i);
    const z = positionAttribute.getZ(i);

    // 頂点ベクトルを正規化（長さを同じに）して、球形の頂点にする
    const vertex = new THREE.Vector3(x, y, z);
    const spheredVertex = vertex.normalize().multiplyScalar(size);

    spherePositions.push(spheredVertex.x, spheredVertex.y, spheredVertex.z);
  }

  // ジオメトリの変形先として、計算した座標を登録
  geometry.morphAttributes.position[0] = new THREE.Float32BufferAttribute(
    spherePositions,
    3
  );

  return geometry;
};

const geometry = createGeometry();
const material = new THREE.MeshPhongMaterial({
  color: 0x6b81bd,
  flatShading: true,
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const animationParam = {
  value: 0,
};

const loop = () => {
  mesh.morphTargetInfluences[0] = animationParam.value;

  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.01;

  renderer.render(scene, camera);
  requestAnimationFrame(loop);
};

loop();

const buttonBox = document.querySelector('.js-button-box');
buttonBox.addEventListener('click', () => {
  gsap.to(animationParam, {
    value: 0,
    duration: 0.4,
    ease: 'Power2.out',
  });
});

const buttonSphere = document.querySelector('.js-button-sphere');
buttonSphere.addEventListener('click', () => {
  gsap.to(animationParam, {
    value: 1,
    duration: 0.4,
    ease: 'Power2.out',
  });
});

const resize = () => {
  const width = window.innerWidth;
  const height = window.innerHeight;

  canvasSize.w = width;
  canvasSize.h = height;

  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(width, height);

  camera.aspect = width / height;
  camera.updateProjectionMatrix();

  // カメラの距離を計算し直す
  const fov = 45;
  camera.position.z = calcCameraDist(fov);
};

window.addEventListener('resize', resize);