Spielerei im Raum 2

<div id="canvas"></div>
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
  <script>
    // Funktion zur Generierung einer zufälligen ganzen Zahl zwischen min und max (einschließlich)
    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    // Funktion zur Auswahl eines zufälligen Elements aus einem Array
    function getRandomElement(array) {
      return array[Math.floor(Math.random() * array.length)];
    }
    // 3D-Welt-Dimensionen
    var worldDimension = 80;
    // Array für die 500 Wesen
    var wesenArray = [];
    // Mögliche Geometrien
    //var geometries = ["Punkt", "Würfel", "Kugel", "Stern"];
    var geometries = ["Würfel", "Kugel", "Stern"];
    // Schleife zur Erzeugung der Wesen
    for (var i = 0; i < 1000; i++) {
      // Zufällige Position innerhalb der 3D-Welt generieren
      var randomX = getRandomInt(-worldDimension / 2, worldDimension / 2);
      var randomY = getRandomInt(-worldDimension / 2, worldDimension / 2);
      var randomZ = getRandomInt(-worldDimension / 2, worldDimension / 2);
      // Zufällige Farbe generieren
      var randomColor = new THREE.Color(Math.random(), Math.random(), Math.random());
      // Zufällige Geometrie auswählen
      var randomGeometry = getRandomElement(geometries);
      // Geometrie und Material erstellen
      var object3D;
      if (randomGeometry === "Punkt") {
        var geometry = new THREE.BufferGeometry();
        var vertices = new Float32Array(1 * 3); // 1 Punkt mit 3 Koordinaten (x, y, z)
        geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
        var material = new THREE.PointsMaterial({ color: randomColor });
        object3D = new THREE.Points(geometry, material);
      } else if (randomGeometry === "Würfel") {
        var geometry = new THREE.BoxGeometry(1, 1, 1);
        var material = new THREE.MeshLambertMaterial({ color: randomColor });
        object3D = new THREE.Mesh(geometry, material);
      } else if (randomGeometry === "Kugel") {
        var geometry = new THREE.SphereGeometry(0.5, 32, 32);
        var material = new THREE.MeshLambertMaterial({ color: randomColor });
        object3D = new THREE.Mesh(geometry, material);
      } else if (randomGeometry === "Stern") {
        var geometry = new THREE.SphereGeometry(0.5, 4, 2);
        var material = new THREE.MeshLambertMaterial({ color: randomColor });
        object3D = new THREE.Mesh(geometry, material);
      }
      // Setzen der Position des Wesens
      object3D.position.set(randomX, randomY, randomZ);
      // Hinzufügen des Wesens zur Array
      wesenArray.push(object3D);
    }
    // Erstellen der Szene, Kamera und Renderer
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('canvas').appendChild(renderer.domElement);
// Element für den Canvas
var canvasElement = document.getElementById('canvas');
// Funktion zum Anpassen der Canvas-Größe an das umgebende DOM-Element
function adjustCanvasSize() {
  var contentWrap = document.querySelector('.nv-content-wrap.entry-content');
  var width = contentWrap.clientWidth;
  var height = contentWrap.clientHeight;
  renderer.setSize(width * 0.9, width *0.9) ;
  camera.aspect = 1;
  camera.updateProjectionMatrix();
}
// Anfangsgröße anpassen
adjustCanvasSize();
// Event Listener hinzufügen, um die Größe bei Änderungen des umgebenden DOM-Elements anzupassen
window.addEventListener('resize', adjustCanvasSize);
    // Erstellen der Lichtquelle
    var light = new THREE.PointLight(0xffffff, 1, 10000);
    light.position.set(0, 200, 100);
    scene.add(light);
    var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);
    // Hinzufügen der Wesen zur Szene
    wesenArray.forEach(function (wesen) {
      scene.add(wesen);
    });
    function randomizePositions() {
      // Schleife über alle Wesen im Array
      for (var i = 0; i < wesenArray.length; i++) {
        var currentWesen = wesenArray[i];
        // Prüfen, ob das Wesen die Geometrie "Kugel" hat
        if (currentWesen.geometries === "Kugel") {
          // Zufällige Änderung der Position um 1
          currentWesen.position.x += Math.random() * 2 - 1;
          currentWesen.position.y += Math.random() * 2 - 1;
          currentWesen.position.z += Math.random() * 2 - 1;
        }
      }
    }
// Funktion zum Entfernen der Linien aus der Szene
function removeLines() {
  // Schleife über alle Objekte in der Szene
  scene.traverse(function (object) {
    // Prüfen, ob das Objekt eine Linie ist
    if (object instanceof THREE.Line) {
      // Entfernen der Linie aus der Szene
      scene.remove(object);
    }
  });
}
    // Funktion zum Zeichnen von Linien zwischen den Wesen
   // Funktion zum Zeichnen von Linien zwischen den Wesen
function drawLinesBetweenNeighbors() {
  // Schleife über alle Wesen im Array
  for (var i = 0; i < wesenArray.length; i++) {
    var currentWesen = wesenArray[i];
    var currentPos = currentWesen.position;
    // Suche nach dem am weitesten entfernten Nachbarn
    var maxDistance = -Infinity;
    var farthestNeighbor;
    for (var j = 0; j < wesenArray.length; j++) {
      if (i !== j) {
        var neighborWesen = wesenArray[j];
        var neighborPos = neighborWesen.position;
        var distance = currentPos.distanceTo(neighborPos);
        if (distance > maxDistance) {
          maxDistance = distance;
          farthestNeighbor = neighborPos;
        }
      }
    }
        // Zeichnen der Linie zwischen den beiden Positionen
        var lineGeometry = new THREE.BufferGeometry().setFromPoints([currentPos, farthestNeighbor ]);
        var lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
        var line = new THREE.Line(lineGeometry, lineMaterial);
        scene.add(line);
      }
    }
    drawLinesBetweenNeighbors();
    //removeLines();
    // Hinzufügen der Orbit Controls für die bewegliche Kamera
    var controls = new THREE.OrbitControls(camera, renderer.domElement);
    // Setzen der Kamera-Position
    camera.position.set(0, 0, worldDimension);
    // Funktion für die Animationsschleife
    function animate() {
      requestAnimationFrame(animate);
      controls.update();
      renderer.render(scene, camera);
    }
    // Animation starten
    animate();
  </script>