import * as THREE from 'three';
import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';

// Setup stuff 
const scene = new THREE.Scene();
//const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
//camera.position.z = 5;
let camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('#kennel'),
});

renderer.setSize(window.innerWidth, window.innerHeight);

// Cube geometry stuff. 
const geometry = new THREE.BoxGeometry(5, 1, 1);
const material = new THREE.MeshBasicMaterial(
    { color: 0x962FFE }
);
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Light stuff
const light = new THREE.DirectionalLight(0xFFFFFF, 0.5);
light.position.x = 5;
scene.add(light);

// Controller stuff
let clock = new THREE.Clock();
let controls = new FirstPersonControls(camera, renderer.domElement);
controls.movementSpeed = 5;
controls.lookSpeed = 0.8;

function animate() {
    controls.update(clock.getDelta());
    renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);
