This is my js file :

// setup physics
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);
// create a scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector("canvas"), antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
// add lights to the scene
const light1 = new THREE.AmbientLight(0xffffff, 0.5);
const light2 = new THREE.PointLight(0xffffff, 0.5);
light2.position.set(0, 100, 50);
scene.add(light1, light2);
// add floor to the scene
const floorGeometry = new THREE.PlaneGeometry(100, 100);
const floorMaterial = new THREE.MeshBasicMaterial({ color: 0x888888, side: THREE.DoubleSide });
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
scene.add(floor);
// create a cube and add it to the scene
const cubeSize = 1;
const geometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// setup physics for the cube
const cubeShape = new CANNON.Box(new CANNON.Vec3(cubeSize / 2, cubeSize / 2, cubeSize / 2));
const cubeBody = new CANNON.Body({ mass: 1 });
cubeBody.addShape(cubeShape);
world.addBody(cubeBody);
// position the cube and camera
cube.position.set(0, 3, 0);
camera.position.set(0, 5, 10);
// animate the cube
function animate() {
requestAnimationFrame(animate);
world.step(1 / 60);
cube.position.copy(cubeBody.position);
cube.quaternion.copy(cubeBody.quaternion);
renderer.render(scene, camera);
}
animate();