<canvas id='Game'></canvas>

import * as THREE from "https://esm.sh/three";
import { OrbitControls } from "https://esm.sh/three/examples/jsm/controls/OrbitControls.js";
import * as CANNON from "https://esm.sh/cannon-es";
import CannonDebugger from "https://esm.sh/cannon-es-debugger"

const GRAVITY = -9.81;
const scene = new THREE.Scene();
const world = new CANNON.World();
world.gravity.set(0, GRAVITY, 0);


const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight);
camera.position.set(0, -10, 60);
scene.add(camera);

const canvasElement = document.querySelector('#Game') as HTMLCanvasElement;
const renderer = new THREE.WebGLRenderer({ canvas: canvasElement });
renderer.setSize(window.innerWidth, window.innerHeight);

const controls = new OrbitControls(camera, renderer.domElement);

//three.js
const ballGeometry = new THREE.SphereGeometry(5);
const ballMaterial = new THREE.MeshNormalMaterial();
const ballMesh = new THREE.Mesh(ballGeometry, ballMaterial);
ballMesh.position.set(0, 0, 0);
scene.add(ballMesh);

const boxGeometry = new THREE.BoxGeometry(10, 10, 10);
const boxMaterial = new THREE.MeshNormalMaterial();
const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
boxMesh.position.set(0, -20, 0);
scene.add(boxMesh);

//cannon.js
const ballShape = new CANNON.Sphere(5);
const ballBody = new CANNON.Body({ mass: 1, shape: ballShape });
ballBody.position.set(0, 0, 0);
world.addBody(ballBody);

const boxShape = new CANNON.Box(new CANNON.Vec3(10, 10, 10));
const boxBody = new CANNON.Body({ mass: 0, shape: boxShape });
boxBody.position.set(0, -20, 0);
world.addBody(boxBody);

const cannonDebugger = CannonDebugger(scene, world, {
    color: '#ff0000',
});

animate();

function animate() {
    world.step(1 / 60);
    ballMesh.rotation.y += 0.01;
    renderer.render(scene, camera);

    ballMesh.position.copy(ballBody.position);
    ballMesh.quaternion.copy(ballBody.quaternion);

    boxMesh.position.copy(boxBody.position);
    boxMesh.quaternion.copy(boxBody.quaternion);

    cannonDebugger.update();

    requestAnimationFrame(animate);
}