import * as THREE from 'https://cdn.skypack.dev/three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  25, // FOV (field of view) in Grad
  window.innerWidth / window.innerHeight, // Verhältnis des render context
  0.1, // near - Objekte mit einer kleineren Distanz als dieser Wert werden nicht angezeigt
  1000 // far - Objekte mit einer größeren Distanz als dieser Wert werden nicht angezeigt
);

const renderer = new THREE.WebGLRenderer(); // ein von THREE.js erzeugtes <canvas> Element
renderer.setSize(window.innerWidth, window.innerHeight); // Größe des Canvas
document.body.appendChild(renderer.domElement);
scene.background = new THREE.Color( 0x20252f ); //Setting the canvas background-color

const geometry = new THREE.TorusKnotGeometry(6, 2, 250, 32);
const material = new THREE.MeshBasicMaterial({ color: 0x66D9EF });
const torus = new THREE.Mesh(geometry, material);
scene.add(torus); // Der Torus wird zur Szene hinzugefügt

// Damit das noch etwas besser aussieht wird ein wireframe auf den Torus gelegt
const wireframe = new THREE.WireframeGeometry(geometry);
const line = new THREE.LineSegments(wireframe);
line.material.depthTest = true;
line.material.opacity = 0.25;
line.material.color = new THREE.Color("#000");
line.material.transparent = true;

scene.add(line);
camera.position.z = 70; // Die Position der Kamera muss angepasst werden, damit die Objekte zu sehen sind

const meshes = [torus, line];
function draw() {
  requestAnimationFrame(draw);
  meshes.forEach((element) => {
    element.rotation.x += 0.001;
    element.rotation.y += 0.011;
  });
  renderer.render(scene, camera);
}
draw();