MBCDN

Vektoraddition und -subtraktion sind grundlegende Operationen, um die Bewegung von Objekten im Raum zu berechnen. Durch die Addition eines Vektors zu einem anderen Vektor kann die Position eines Objekts aktualisiert werden. Die Subtraktion zweier Vektoren ermöglicht die Berechnung der Verschiebung zwischen zwei Positionen.

• Jede Zeile miteinander addieren, das Ergebnis ist ein neuer Vektor.
• Man kann einen Vektor NICHT mit einem Skalar addieren (undefined).

          2
VectorA = 3
          4

          3
VectorB = 4
          5
          
          2   3   5
VectorC = 3 + 4 = 7
          4   5   9

Das Skalarprodukt (auch bekannt als Punktprodukt) wird verwendet, um den Winkel zwischen zwei Vektoren zu berechnen. Es ist auch nützlich, um die Geschwindigkeit eines Objekts in eine bestimmte Richtung zu bestimmen oder um zu überprüfen, ob zwei Objekte aufeinander zubewegt werden.

Das Kreuzprodukt (auch bekannt als Vektorprodukt) wird in der dreidimensionalen Geometrie verwendet, um einen neuen Vektor zu erzeugen, der senkrecht auf den beiden Ausgangsvektoren steht. Es ist nützlich für die Berechnung von Oberflächennormalen, Reflexionen und Rotationen in dreidimensionalen Spielen.

Die Länge eines Vektors kann berechnet werden, indem die Wurzel der Summe der Quadrate seiner Komponenten genommen wird. Dies ist nützlich, um die Geschwindigkeit eines Objekts zu bestimmen oder um zu überprüfen, ob ein Objekt eine bestimmte Reichweite erreicht hat. Die Normalisierung eines Vektors bedeutet, ihn auf eine Länge von 1 zu skalieren, während seine Richtung beibehalten wird. Dies ist hilfreich, um Kollisionsprüfungen durchzuführen oder um Richtungen und Kräfte zu normalisieren.

• Multipliziert man einen Vektor und ein Skalar erhält man einen neuen Vektor - multipliziert man 2 Vektoren erhält man ein Skalarprodukt (normale Zahl).
• Multiplikation ändert nur die Länge, NICHT die Richtung!

          2
VectorA = 3
          4
          
              2   6
VectorB = 3 * 3 = 9
              4   12
              
          2   3
VectorC = 3 * 4 = 2 * 3 + 3 * 4 + 4 * 5 = 38
          4   5

• Multipliziert man 2 Vektoren und erhält 0 als Ergebnis, sind diese orthogonal (stehen im rechten Winkel aufeinander).
• Besonders wichtig in der 3D Programmierung ist das Kreuzprodukt, damit kann man nämlich ermitteln ob die 3. Achse im rechten Winkel zu den 2 ersten Achsen steht!

Das Dot-Produkt (auch Skalarprodukt genannt) ist eine mathematische Operation, die auf zwei Vektoren angewendet wird und einen Skalar (eine Zahl) als Ergebnis liefert. Es wird häufig verwendet, um den Winkel zwischen zwei Vektoren zu berechnen oder um zu überprüfen, wie viel zwei Vektoren in dieselbe Richtung zeigen.

Für zwei Vektoren

A = (a1, a2, a3) B = (b1, b2, b3)

im 3D-Raum lautet die Formel für das Dot-Produkt:

A * B = a1 + b1 + a2 * b2 + a3 * b3

Die Berechnung des Dot-Produkts erfolgt durch die Multiplikation der entsprechenden Komponenten der beiden Vektoren und das anschließende Addieren der Produkte.

Geometrische Bedeutung: Das Dot-Produkt lässt sich auch in Bezug auf den Winkel PHI zwischen den beiden Vektoren ausdrücken:

A⋅B=∣A∣⋅∣B∣⋅cos(θ)

∣A∣ ist die Länge von Vektor A. ∣B∣ ist die Länge von Vektor B. θ ist der Winkel zwischen den beiden Vektoren.

Das Dot-Produkt ist besonders nützlich, um zu bestimmen, ob zwei Vektoren in die gleiche Richtung zeigen:

• Wenn das Dot-Produkt positiv ist, ist der Winkel zwischen den Vektoren weniger als 90°.
• Wenn das Dot-Produkt null ist, sind die Vektoren orthogonal (rechtwinklig zueinander).
• Wenn das Dot-Produkt negativ ist, ist der Winkel zwischen den Vektoren größer als 90°.

Beispiel: Nehmen wir die Vektoren A=(1,2,3) und B=(4,−5,6).

Das Dot-Produkt ist: A⋅B=(1⋅4)+(2⋅−5)+(3⋅6)=4−10+18=12

Das Ergebnis ist der Skalar 12. Dies bedeutet, dass die Vektoren in eine ähnliche Richtung zeigen.

Das Kreuzprodukt zweier Vektoren im 3D-Raum ergibt einen Vektor, der senkrecht (orthogonal) auf beiden Eingangsvektoren steht.

Für zwei Vektoren

A = (a1, a2, a3) B = (b1, b2, b3)

im 3D-Raum lautet die Formel für das Cross-Produkt:

        |  i,  j,  k |
A * B = | a1, a2, a3 |
        | b1, b2, b3 | 

​Dabei sind i,j,k die Einheitsvektoren entlang der x-, y- und z-Achse.

Die Berechnung erfolgt durch die Determinante der Matrix, die die Komponenten der beiden Vektoren enthält.

A * B = ((a2 * b3 - a3 * b2), (a3 * b1 - a1 * b3), (a1 * b2 - a2 * b1))

Das Cross-Produkt ergibt einen Vektor, der senkrecht auf der Ebene steht, die durch die beiden Vektoren A und B aufgespannt wird. Die Länge des resultierenden Vektors entspricht der Fläche des Parallelogramms, das durch die beiden Vektoren aufgespannt wird. Diese Fläche wird durch ∣A∣⋅∣B∣⋅sin(θ) gegeben, wobei θ der Winkel zwischen den beiden Vektoren ist.

(Stützvektor) Welche Koordinaten schneidet eine Gerade?

https://www.youtube.com/watch?v=JmzLX4M0QqE

Berechnen ob sie

• Parallel
• gleich
• sich schneidend
• windschief

sind.

https://www.youtube.com/watch?v=u0QoYlEE094

https://www.youtube.com/watch?v=ynpg5S_5-PY

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Vektor Operationen</title>
    <style>
        body { margin: 0; font-family: Arial, sans-serif; }
        canvas { display: block; }
        .controls {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 1;
            background: rgba(255, 255, 255, 0.7);
            padding: 10px;
        }
        .controls input { margin-bottom: 5px; width: 200px; }
    </style>
</head>
<body>
    <div class="controls">
        <h3>Vektor Eingabe</h3>
        <label for="v1x">Vektor 1 (x): </label>
        <input type="number" id="v1x" value="1"><br>
        <label for="v1y">Vektor 1 (y): </label>
        <input type="number" id="v1y" value="2"><br>
        <label for="v1z">Vektor 1 (z): </label>
        <input type="number" id="v1z" value="3"><br>

        <label for="v2x">Vektor 2 (x): </label>
        <input type="number" id="v2x" value="3"><br>
        <label for="v2y">Vektor 2 (y): </label>
        <input type="number" id="v2y" value="2"><br>
        <label for="v2z">Vektor 2 (z): </label>
        <input type="number" id="v2z" value="1"><br>

        <button onclick="updateVectors()">Vektoren aktualisieren</button><br>
        <button onclick="toggleResultant()">Zeige Resultierende</button><br>
        <button onclick="toggleDifference()">Zeige Differenz</button><br>
        <button onclick="toggleCrossProduct()">Zeige Kreuzprodukt</button><br>
        
        <span id="output"></span>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/controls/OrbitControls.js"></script>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        const light = new THREE.AmbientLight(0x404040, 2);
        scene.add(light);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(5, 5, 5).normalize();
        scene.add(directionalLight);

        // Vektoren
        let v1 = new THREE.Vector3(1, 2, 3);
        let v2 = new THREE.Vector3(3, 2, 1);

        let arrowV1, arrowV2, arrowResultant, arrowDifference, arrowCrossProduct;

        // Funktion zum Erstellen von Pfeilen
        function createArrow(vector, color) {
            const arrowHelper = new THREE.ArrowHelper(vector.clone().normalize(), new THREE.Vector3(0, 0, 0), vector.length(), color);
            scene.add(arrowHelper);
            return arrowHelper;
        }

        // Funktion zum Erstellen der Achsen
        function createAxes() {
            const axisLength = 10;
            // X-Achse
            const xAxisGeometry = new THREE.BufferGeometry().setFromPoints([
                new THREE.Vector3(0, 0, 0),
                new THREE.Vector3(axisLength, 0, 0)
            ]);
            const xAxisMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });
            const xAxis = new THREE.Line(xAxisGeometry, xAxisMaterial);
            scene.add(xAxis);

            // Y-Achse
            const yAxisGeometry = new THREE.BufferGeometry().setFromPoints([
                new THREE.Vector3(0, 0, 0),
                new THREE.Vector3(0, axisLength, 0)
            ]);
            const yAxisMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00 });
            const yAxis = new THREE.Line(yAxisGeometry, yAxisMaterial);
            scene.add(yAxis);

            // Z-Achse
            const zAxisGeometry = new THREE.BufferGeometry().setFromPoints([
                new THREE.Vector3(0, 0, 0),
                new THREE.Vector3(0, 0, axisLength)
            ]);
            const zAxisMaterial = new THREE.LineBasicMaterial({ color: 0x0000ff });
            const zAxis = new THREE.Line(zAxisGeometry, zAxisMaterial);
            scene.add(zAxis);
        }

        // Update der Vektoren
        function updateVectors() {
            // Werte aus den Eingabefeldern holen
            v1.set(
                parseFloat(document.getElementById('v1x').value),
                parseFloat(document.getElementById('v1y').value),
                parseFloat(document.getElementById('v1z').value)
            );

            v2.set(
                parseFloat(document.getElementById('v2x').value),
                parseFloat(document.getElementById('v2y').value),
                parseFloat(document.getElementById('v2z').value)
            );

            // Szene leeren
            scene.clear();

            // Achsen erstellen
            createAxes();

            // Vektorpfeile erstellen
            arrowV1 = createArrow(v1, 0x0000ff); // Blau für v1
            arrowV2 = createArrow(v2, 0xff0000); // Rot für v2

            // Reset der resultierenden Vektorpfeile
            if (arrowResultant) scene.remove(arrowResultant);
            if (arrowDifference) scene.remove(arrowDifference);
            if (arrowCrossProduct) scene.remove(arrowCrossProduct);

            // Zeige Vektor-Komponenten im Output
            displayVectorComponents(v1, 'Vektor 1');
            displayVectorComponents(v2, 'Vektor 2');

            renderer.render(scene, camera);
        }

        // Resultierender Vektor (Addition)
        function toggleResultant() {
            if (arrowResultant) {
                scene.remove(arrowResultant);
                arrowResultant = null;
            } else {
                arrowResultant = createArrow(v1.clone().add(v2), 0x800080); // Lila für Resultierende
                displayVectorComponents(v1.clone().add(v2), 'Resultierende');
                renderer.render(scene, camera);
            }
        }

        // Differenzvektor
        function toggleDifference() {
            if (arrowDifference) {
                scene.remove(arrowDifference);
                arrowDifference = null;
            } else {
                arrowDifference = createArrow(v1.clone().sub(v2), 0x40E0D0); // Türkis für Differenz
                displayVectorComponents(v1.clone().sub(v2), 'Differenz');
                renderer.render(scene, camera);
            }
        }

        // Kreuzproduktvektor
        function toggleCrossProduct() {
            if (arrowCrossProduct) {
                scene.remove(arrowCrossProduct);
                arrowCrossProduct = null;
            } else {
                arrowCrossProduct = createArrow(v1.clone().cross(v2), 0x00ff00); // Grün für Kreuzprodukt
                displayVectorComponents(v1.clone().cross(v2), 'Kreuzprodukt');
                renderer.render(scene, camera);
            }
        }

        // Vektor-Komponenten im Output anzeigen
        function displayVectorComponents(vector, label) {
            const output = document.getElementById('output');
            const outputText = `${label} - x: ${vector.x.toFixed(2)}, y: ${vector.y.toFixed(2)}, z: ${vector.z.toFixed(2)}`;
            output.textContent = outputText;
            console.log(outputText);
        }

        // Kamera positionieren
        camera.position.z = 15;

        // OrbitControls für interaktive Steuerung (zoom und rotation)
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;  // Sanfte Bewegung
        controls.dampingFactor = 0.25;
        controls.screenSpacePanning = false;

        // Animationsschleife
        function animate() {
            requestAnimationFrame(animate);

            // Update der Kontrolle
            controls.update();

            renderer.render(scene, camera);
        }

        // Initialisieren
        updateVectors();
        animate();
    </script>
</body>
</html>

Ganze Youtube Playlist https://www.youtube.com/playlist?list=PLjaA00udJtOpn73fqft-kcdST4ac2HW4U

Matritzen: http://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/

Vektorrechnen https://www.youtube.com/watch?v=fjOdtSu4Lm4