const geo = new THREE.IcosahedronGeometry(1, 2);

const mat = new THREE.MeshBasicMaterial({ color: 0xccff })

const mat = new THREE.MeshStandardMaterial({ 
	color: 0xffffff,
	flatShading: true // true: geen gladde overgangen tussen vlakken, false: gladde schaduw
}) 

const wireMaterial = new THREE.MeshBasicMaterial({
	color: 0xffffff,
	wireframe: true
});

mesh.rotation.y = t * 0.0001;

mesh.scale.setScalar(Math.cos(t * 0.001) + 1.0);

// Import the Three.js library
import * as THREE from 'three'; 
import { OrbitControls } from "jsm/controls/OrbitControls.js";

// Maak het HTML object aan waarnaar we zullen renderen
const w = window.innerWidth;
const h = window.innerHeight;
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);

// Maak een camera
const fov = 75;
const aspect = w / h;
const near = 0.1;
const far = 10;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 2;

// Maak een scene
const scene = new THREE.Scene();

// Voeg controls toe zodat we kunnen rondkijken met de muis
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // Voegt een beetje traagheid toe aan de controls
controls.dampingFactor = 0.05; // Hoeveel traagheid

// Maak een 3D vorm
const geo = new THREE.IcosahedronGeometry(1, 2);

// Material: standaard (licht en schaduw, maar geen reflecties)
const mat = new THREE.MeshStandardMaterial({ 
	color: 0xffffff,
	flatShading: true // true: geen gladde overgangen tussen vlakken, false: gladde schaduw
}) 

// Maak een mesh aan door de 3D vorm en het materiaal te combineren
const mesh = new THREE.Mesh(geo, mat);
scene.add(mesh);

// Materiaal: wireframe (alleen lijnen, geen vlakken)
const wireMaterial = new THREE.MeshBasicMaterial({
	color: 0xffffff,
	wireframe: true
});

// Voeg het wireframe materiaal toe aan dezelfde mesh
const wireframe = new THREE.Mesh(geo, wireMaterial);
wireframe.scale.setScalar(1.001); // Maak het wireframe iets groter zodat het niet precies op de vlakken ligt
mesh.add(wireframe);

// Licht
const hemiLight = new THREE.HemisphereLight(0x0099ff, 0xaa5500, 1);
scene.add(hemiLight);

// Maak een animatielus
function animate(t = 0) {
	console.log(t);

	// Vraag de browser om de volgende frame te renderen
	requestAnimationFrame(animate);

	// Pas de scale van het object aan volgens de cosinus van de tijd
	//mesh.scale.setScalar(Math.cos(t * 0.001) + 1.0);
	controls.update(); // Update de controls (voor de damping)
}
animate();

	// Rotatie animatie
	mesh.rotation.y = t * 0.0001;

	// Render de scene met de camera
	renderer.render(scene, camera);