Hier der Code zum interaktiven animierten Möbiusband.

Eingabedatum: 07.04.2025

Hier der Code zum interaktiven animierten Möbiusband.

Möbiusband

Hier noch der Code zum interaktiven animierten Möbiusband, unter https://60tools.com/de/ kann man den Code testen und verändern.

JS Elemente unten einfügen:
"three": "https://cdn.jsdelivr.net/npm/three@0.163.0/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.163.0/examples/jsm/"

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Möbius-Schleife Animation</title>
<style>
/* Grundlegendes CSS, um Ränder zu entfernen und Canvas/Renderer den Vollbildmodus zu ermöglichen */
body { margin: 0; overflow: hidden; background-color: #111; }
canvas { display: block; }
</style>
</head>
<body>
<script type="importmap">
{
"imports": {

Hier bitte js einfügen!!!!

}
}
</script>

<script type="module">
// Importieren der notwendigen Three.js Komponenten
import * as THREE from 'three';
// Importieren der OrbitControls für die Kamerasteuerung
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// Importieren der ParametricGeometry für die Erstellung der Möbius-Schleife
import { ParametricGeometry } from 'three/addons/geometries/ParametricGeometry.js';

// === Globale Variablen ===
let scene, camera, renderer;
let mobiusStrip; // Das Mesh-Objekt für unsere Schleife
let controls; // Für die Kamerasteuerung

// === Initialisierungsfunktion ===
function init() {
// 1. Szene erstellen
scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a1a); // Dunkelgrauer Hintergrund

// 2. Kamera erstellen
// PerspectiveCamera( Sichtfeldwinkel, Seitenverhältnis, Nahe Clipping-Ebene, Ferne Clipping-Ebene )
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5; // Kamera etwas zurücksetzen

// 3. Renderer erstellen
renderer = new THREE.WebGLRenderer({ antialias: true }); // Antialiasing für glattere Kanten
renderer.setSize(window.innerWidth, window.innerHeight); // Renderer auf Fenstergröße setzen
renderer.setPixelRatio(window.devicePixelRatio); // Für schärfere Darstellung auf HiDPI-Displays
document.body.appendChild(renderer.domElement); // Renderer-Canvas zum HTML-Body hinzufügen

// 4. Lichter hinzufügen
const ambientLight = new THREE.AmbientLight(0xcccccc, 0.5); // Umgebungslicht für Grundhelligkeit
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); // Gerichtetes Licht für Schatten und Highlights
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

// 5. Möbius-Schleife erstellen
// Parametrische Funktion für die Möbius-Schleife
// u: läuft entlang der Länge der Schleife (0 bis 2*PI)
// v: läuft über die Breite der Schleife (-0.5 bis 0.5 für Breite 1)
// target: das Vektorobjekt, in das die Koordinaten geschrieben werden
const mobiusFunction = function (u, v, target) {
const R = 1.5; // Radius des Hauptrings
const W = 1; // Breite der Schleife (v läuft von -W/2 bis W/2)
u = u * 2 * Math.PI; // u von 0..1 auf 0..2*PI skalieren
v = v * W - W / 2; // v von 0..1 auf -W/2..W/2 skalieren

const x = (R + v * Math.cos(u / 2)) * Math.cos(u);
const y = (R + v * Math.cos(u / 2)) * Math.sin(u);
const z = v * Math.sin(u / 2);

target.set(x, y, z); // Koordinaten im Zielvektor setzen
};

// Erstellen der Geometrie mit der Funktion
// ParametricGeometry( funktion, anzahlSegmenteU, anzahlSegmenteV )
const geometry = new ParametricGeometry(mobiusFunction, 100, 20); // Mehr Segmente für glattere Kurven

// Erstellen des Materials
const material = new THREE.MeshStandardMaterial({
color: 0x049ef4, // Helle blaue Farbe
side: THREE.DoubleSide, // Wichtig: Beide Seiten rendern, da Möbius nur eine hat
metalness: 0.3, // Etwas metallisch
roughness: 0.6 // Etwas rau
});

// Erstellen des Mesh (Geometrie + Material)
mobiusStrip = new THREE.Mesh(geometry, material);
scene.add(mobiusStrip); // Schleife zur Szene hinzufügen

// 6. OrbitControls hinzufügen (Maussteuerung)
controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // Fügt eine sanfte Verzögerung hinzu
controls.dampingFactor = 0.05;
controls.screenSpacePanning = false; // Verhindert seltsames Panning
controls.minDistance = 2; // Minimaler Zoom-Abstand
controls.maxDistance = 15; // Maximaler Zoom-Abstand

// 7. Event Listener für Fenstergrößenänderung
window.addEventListener('resize', onWindowResize, false);

// 8. Animationsloop starten
animate();
}

// === Animationsloop ===
function animate() {
// Nächsten Frame anfordern
requestAnimationFrame(animate);

// Schleife langsam drehen
if (mobiusStrip) {
mobiusStrip.rotation.x += 0.003;
mobiusStrip.rotation.y += 0.005;
}

// OrbitControls aktualisieren (für Damping notwendig)
controls.update();

// Szene rendern
renderer.render(scene, camera);
}

// === Funktion für Fenstergrößenänderung ===
function onWindowResize() {
// Kamera-Seitenverhältnis aktualisieren
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix(); // Wichtig nach Änderung der Kamera-Parameter

// Renderer-Größe aktualisieren
renderer.setSize(window.innerWidth, window.innerHeight);
}

// === Start ===
init();

</script>
</body>
</html>

ct