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 material2 = new THREE.MeshBasicMaterial({ color: 0x00FF00 });
const cube = new THREE.Mesh(geometry, material);
const cube2 = new THREE.Mesh(geometry, material2);
cube2.position.x = 4;
cube2.position.z = 7;
cube2.rotateX = 35;
scene.add(cube);
scene.add(cube2);

// 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.1;
controls.lookVertical = false;

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