Was:
Jedes Element hat eine Linie gleicher Farbe zum nächsten Element. Die Elemente bewegen sich.
Wie:
Hier habe ich mich mit dem Chatbot darum gekümmert, dass diese kleinen Wesen sich in der Box wild herumtreiben, so dass die Linien zwischen ihnen immer passen. Es hat viel Spaß gemacht, und am Ende hatten wir nicht nur etwas, das funktioniert, sondern auch ziemlich cool aussieht. Das war ein wenig wie das Spiel "Stille Post", aber im digitalen Raum.
Geholfen hat mir bei dem Projekt: https://chat.deepseek.com/coder
Warum:
Es war zu sehen, wie meine Ideen Schritt für Schritt in die Realität umgesetzt wurden und wie das Endergebnis nicht nur funktionell war, sondern auch eine nette optische Show bot. Das hat mir gezeigt, dass gute Zusammenarbeit nicht nur dazu führt, dass die Arbeit schneller und effizienter erledigt wird, sondern auch dass sie das Endergebnis auf eine Weise bereichert, die man vielleicht gar nicht von Anfang an erwartet hatte.
- zum code ausklappen hier klicken -
<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);
// Zufällige Geschwindigkeit für das Wesen
object3D.velocity = new THREE.Vector3(
2 * Math.random() * 0.1 - 0.05,
2 * Math.random() * 0.1 - 0.05,
2 * Math.random() * 0.1 - 0.05
);
// 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);
});
// Array für die Linien
var linesArray = [];
// 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 nächsten Nachbarn
var minSquaredDistance = Infinity;
var nearestNeighbor;
for (var j = 0; j < wesenArray.length; j++) {
if (i !== j) {
var neighborWesen = wesenArray[j];
var neighborPos = neighborWesen.position;
var squaredDist = squaredDistance(currentPos, neighborPos);
if (squaredDist < minSquaredDistance) {
minSquaredDistance = squaredDist;
nearestNeighbor = neighborPos;
}
}
}
// Überprüfen, ob eine Linie für dieses Wesen bereits existiert
if (!linesArray[i]) {
// Wenn nicht, erstellen wir eine neue Linie
var lineGeometry = new THREE.BufferGeometry().setFromPoints([currentPos, nearestNeighbor]);
var lineMaterial = new THREE.LineBasicMaterial({ color: currentWesen.material.color });
var line = new THREE.Line(lineGeometry, lineMaterial);
linesArray[i] = line;
scene.add(line);
} else {
// Wenn ja, aktualisieren wir die Positionen der Linie
linesArray[i].geometry.setFromPoints([currentPos, nearestNeighbor]);
linesArray[i].material.color = currentWesen.material.color;
}
}
}
// 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);
function animate() {
requestAnimationFrame(animate);
randomizePositions();
drawLinesBetweenNeighbors();
controls.update();
renderer.render(scene, camera);
}
// Animation starten
animate();
function randomizePositions() {
// Schleife über alle Wesen im Array
for (var i = 0; i < wesenArray.length; i++) {
var currentWesen = wesenArray[i];
// Bewegung basierend auf der Geschwindigkeit
currentWesen.position.x += currentWesen.velocity.x;
currentWesen.position.y += currentWesen.velocity.y;
currentWesen.position.z += currentWesen.velocity.z;
// Prüfen auf Kollision mit den Wänden und Umkehr der Geschwindigkeit bei Kollision
if (currentWesen.position.x > worldDimension / 2 || currentWesen.position.x < -worldDimension / 2) {
currentWesen.velocity.x = -currentWesen.velocity.x;
}
if (currentWesen.position.y > worldDimension / 2 || currentWesen.position.y < -worldDimension / 2) {
currentWesen.velocity.y = -currentWesen.velocity.y;
}
if (currentWesen.position.z > worldDimension / 2 || currentWesen.position.z < -worldDimension / 2) {
currentWesen.velocity.z = -currentWesen.velocity.z;
}
// Sicherstellen, dass die Wesen innerhalb der Box bleiben
currentWesen.position.x = Math.max(-worldDimension / 2, Math.min(worldDimension / 2, currentWesen.position.x));
currentWesen.position.y = Math.max(-worldDimension / 2, Math.min(worldDimension / 2, currentWesen.position.y));
currentWesen.position.z = Math.max(-worldDimension / 2, Math.min(worldDimension / 2, currentWesen.position.z));
}
}
function squaredDistance(vector1, vector2) {
var dx = vector1.x - vector2.x;
var dy = vector1.y - vector2.y;
var dz = vector1.z - vector2.z;
return dx * dx + dy * dy + dz * dz;
}
</script>