// cannonjsのhelloWorld (https://github.com/schteppe/cannon.js)

// stateはこのstateObjectに突っ込む（今回はboxしか突っ込まないけど...）
const state = {}

let lastTime
const fixedTimeStep = 1.0 / 60.0 // seconds
const maxSubSteps = 10

// 定数はPROPSで管理する。 PROPS().valueName で取得
const PROPS = () => ({
  initPoint: {x: 0,y: 0,z: 0},
  initWeight: 50,
  initMass: 50,
  positionY : 200,
  margin: 20,
  rotate: {
    x: 0,
    y: 0,
    z: 0,
  },
  axis_rotate: 0,
  limit: 2,
  width: 100,
  height: 100,
  color1: "#23372f",
})

window.onload = function() {
  init()
  render()
  animate(0)
}

function init() {
  // init World
  world = new CANNON.World()
  world.gravity.set(0, -9.82, 0) // m/s²

  // set
  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000)
  camera.position.set(200, 100, 200)
  // generate object
  generate()
  // light
  const ambient = new THREE.AmbientLight(0xffffff, 1.0)
  scene.add(ambient)
  const direction = new THREE.DirectionalLight(0xffffff, 1)
  scene.add(direction)
  // controls ------------------------------
  controls = new THREE.OrbitControls(camera)
  controls.maxDistance = 5000.0
  // renderer
  renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  // add renderer to DOM
  document.body.appendChild(renderer.domElement)
  // add helper
  const gridHelper = new THREE.GridHelper(1000, 20) // size, step
  scene.add(gridHelper)
  const axisHelper = new THREE.AxisHelper(1000, 50)
  scene.add(axisHelper)
  // X軸が赤色、Y軸が緑色、Z軸が青色
}

function Ground(size = 1000) {
  // cannon body ----------
  const body = new CANNON.Body({
    mass: 0 // mass == 0 makes the body static
  })
  body.addShape(new CANNON.Plane())
  // cannonではz軸を上向きの軸としてるので、床を設置するとxy面に床が生成される
  // three.jsだとy軸を上向き軸としがちなので、変な感じにならないようにx軸に90度回転させてあげる。
  body.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2)
  // three mesh ----------
  const geometry = new THREE.PlaneGeometry(size, size)
  const material = new THREE.MeshBasicMaterial({
    color: PROPS().color1,
    side: THREE.DoubleSide
  })
  const mesh = new THREE.Mesh(geometry, material)
  mesh.rotation.x = -Math.PI / 2
  mesh.position.y = 0

  return { body, mesh }
}

/**
 * 箱作る
 * @return {body, mesh} ThreejsのmeshとCannon.jsのbodyを返す
 */
function Box(props) {
  const {point, weight, mass} = props
  // cannon body ----------
  var body = new CANNON.Body({
    mass: mass, // kg
    position: new CANNON.Vec3(point.x, point.y, point.z), // m
    shape: new CANNON.Box(new CANNON.Vec3(weight / 2, weight / 2, weight / 2))
  })
  // 回転追加してみる
  body.angularVelocity.set(Math.random(), Math.random(), 0)
  // three mesh ----------
  var geometry = new THREE.BoxGeometry(weight, weight, weight)
  var material = new THREE.MeshStandardMaterial({
    color: 0xaa0000,
    roughness: 0.0
  })
  var mesh = new THREE.Mesh(geometry, material)
  mesh.position.set(point.x, point.y, point.z)
  return { body, mesh }
}

function generate() {
  // 床
  const ground = new Ground(1000)
  scene.add(ground.mesh);
  world.addBody(ground.body);
  const boxPosition = {x: 0, y: PROPS().positionY, z: 0}
  const box = state.box = new Box({
    point: boxPosition,
    weight: PROPS().initWeight,
    mass: PROPS().initMass,
  })
  scene.add(box.mesh)
  world.addBody(box.body)
}

function animate(time) {
  requestAnimationFrame(animate)
  const { box } = state
  if (lastTime !== undefined) {
    var dt = (time - lastTime) / 1000;
    world.step(fixedTimeStep, dt, maxSubSteps);
  }
  const { mesh, body } = box
  // Cannno.js の Three.js へのつなぎこみは
  // copy で body の position, quaternion を mesh に反映させるだけ！
  mesh.position.copy(body.position)
  mesh.quaternion.copy(body.quaternion)
  lastTime = time
  render()
}

function render() {
  renderer.render(scene, camera)
}