MBCDN

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Zuletzt angesehen:
vektor

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung 		Vorhergehende Überarbeitung
vektor [2024/12/07 16:56]
jango 		vektor [2024/12/07 17:32] (aktuell)
jango [Vektor Visualisierung]
Zeile 174: Zeile 174:
     <meta charset="UTF-8">     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>3D Vektor Operationen</title>+    <title>3D Vektor Plotter mit Operationen</title>
     <style>     <style>
         body { margin: 0; font-family: Arial, sans-serif; }         body { margin: 0; font-family: Arial, sans-serif; }
Zeile 184: Zeile 184:
             z-index: 1;             z-index: 1;
             background: rgba(255, 255, 255, 0.7);             background: rgba(255, 255, 255, 0.7);
-            padding: 10px;+            padding: 15px; 
 +            width: 240px; 
 +            height: 90%; 
 +            overflow-y: auto; 
 +        } 
 +        .section { 
 +            margin-bottom: 15px; 
 +        } 
 +        .section h3 { 
 +            margin-top: 0; 
 +        } 
 +        .section input, .section button { 
 +            width: 100%; 
 +            margin-bottom: 10px;
         }         }
-        .controls input { margin-bottom: 5px; width: 200px; } 
     </style>     </style>
 </head> </head>
 <body> <body>
     <div class="controls">     <div class="controls">
-        <h3>Vektor Eingabe</h3> +        <!-- Vektor Eingabe --> 
-        <label for="v1x">Vektor 1 (x): </label> +        <div class="section"> 
-        <input type="number" id="v1x" value="1"><br> +            <h3>Vektor Eingabe</h3> 
-        <label for="v1y">Vektor 1 (y): </label> +            <label for="v1x">Vektor 1 (x): </label> 
-        <input type="number" id="v1y" value="2"><br> +            <input type="number" id="v1x" value="1"><br> 
-        <label for="v1z">Vektor 1 (z): </label> +            <label for="v1y">Vektor 1 (y): </label> 
-        <input type="number" id="v1z" value="3"><br>+            <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> 
 +        </div>
  
-        <label for="v2x">Vektor 2 (x): </label> +        <!-- Vektor Operationen --> 
-        <input type="number" id="v2x" value="3"><br> +        <div class="section"> 
-        <label for="v2y">Vektor 2 (y): </label> +            <h3>Vektor Operationen</h3> 
-        <input type="number" id="v2y" value="2"><br> +            <button onclick="toggleResultant()">Zeige Resultierende</button><br> 
-        <label for="v2z">Vektor 2 (z): </label> +            <button onclick="toggleDifference()">Zeige Differenz</button><br> 
-        <input type="number" id="v2z" value="1"><br>+            <button onclick="toggleCrossProduct()">Zeige Kreuzprodukt</button><br> 
 +        </div>
  
-        <button onclick="updateVectors()">Vektoren aktualisieren</button><br> +        <!-- Rotation der Szene --> 
-        <button onclick="toggleResultant()">Zeige Resultierende</button><br> +        <div class="section"> 
-        <button onclick="toggleDifference()">Zeige Differenz</button><br> +            <h3>Rotation der Szene</h3> 
-        <button onclick="toggleCrossProduct()">Zeige Kreuzprodukt</button><br> +            <label for="rotateX">Rotation X (rot):</label> 
-         +            <input type="range" id="rotateX" min="-180" max="180" step="0.01" value="0"><br> 
-        <span id="output"></span>+            <input type="number" id="rotateXInput" value="0" step="0.01"><br> 
 + 
 +            <label for="rotateY">Rotation Y (grün):</label> 
 +            <input type="range" id="rotateY" min="-180" max="180" step="0.01" value="0"><br> 
 +            <input type="number" id="rotateYInput" value="0" step="0.01"><br> 
 + 
 +            <label for="rotateZ">Rotation Z (blau):</label> 
 +            <input type="range" id="rotateZ" min="-180" max="180" step="0.01" value="0"><br> 
 +            <input type="number" id="rotateZInput" value="0" step="0.01"><br> 
 +        </div> 
 + 
 +        <!-- Kamera Position und Rotation --> 
 +        <div class="section"> 
 +            <h3>Kamera Position und Rotation</h3> 
 +            <label for="cameraX">Kamera Position X:</label> 
 +            <input type="number" id="cameraX" value="5" step="0.1"><br> 
 + 
 +            <label for="cameraY">Kamera Position Y:</label> 
 +            <input type="number" id="cameraY" value="3" step="0.1"><br> 
 + 
 +            <label for="cameraZ">Kamera Position Z:</label> 
 +            <input type="number" id="cameraZ" value="5" step="0.1"><br> 
 + 
 +            <label for="cameraRotateX">Kamera Rotation X:</label> 
 +            <input type="number" id="cameraRotateX" value="0" step="0.1"><br> 
 + 
 +            <label for="cameraRotateY">Kamera Rotation Y:</label> 
 +            <input type="number" id="cameraRotateY" value="0" step="0.1"><br> 
 + 
 +            <label for="cameraRotateZ">Kamera Rotation Z:</label> 
 +            <input type="number" id="cameraRotateZ" value="0" step="0.1"><br> 
 + 
 +            <button onclick="zoomIn()">Zoom In</button><br> 
 +            <button onclick="zoomOut()">Zoom Out</button><br> 
 +        </div> 
 + 
 +        <!-- Ausgabe --> 
 +        <div class="section"> 
 +            <span id="output"></span> 
 +        </div>
     </div>     </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/three.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/controls/OrbitControls.js"></script>+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/controls/PointerLockControls.js"></script> 
     <script>     <script>
         const scene = new THREE.Scene();         const scene = new THREE.Scene();
Zeile 230: Zeile 293:
         scene.add(directionalLight);         scene.add(directionalLight);
  
-        // Vektoren+        function zoomIn() { 
 +            if (camera.position.z > 1) { 
 +                camera.position.z -= 1; 
 +                renderer.render(scene, camera); 
 +            } 
 +        } 
 + 
 +        function zoomOut() { 
 +            camera.position.z += 1; 
 +            renderer.render(scene, camera); 
 +        } 
         let v1 = new THREE.Vector3(1, 2, 3);         let v1 = new THREE.Vector3(1, 2, 3);
         let v2 = new THREE.Vector3(3, 2, 1);         let v2 = new THREE.Vector3(3, 2, 1);
Zeile 236: Zeile 310:
         let arrowV1, arrowV2, arrowResultant, arrowDifference, arrowCrossProduct;         let arrowV1, arrowV2, arrowResultant, arrowDifference, arrowCrossProduct;
  
-        // Funktion zum Erstellen von Pfeilen 
         function createArrow(vector, color) {         function createArrow(vector, color) {
             const arrowHelper = new THREE.ArrowHelper(vector.clone().normalize(), new THREE.Vector3(0, 0, 0), vector.length(), color);             const arrowHelper = new THREE.ArrowHelper(vector.clone().normalize(), new THREE.Vector3(0, 0, 0), vector.length(), color);
Zeile 243: Zeile 316:
         }         }
  
-        // Funktion zum Erstellen der Achsen +        function createAxisAndScale() { 
-        function createAxes() { +            var maxNum = 9999; 
-            const axisLength = 10; + 
-            // X-Achse +            const xAxisGeometry = new THREE.BufferGeometry().setFromPoints([ 
-            const xAxisGeometry = new THREE.BufferGeometry().setFromPoints([+
                 new THREE.Vector3(0, 0, 0),                 new THREE.Vector3(0, 0, 0),
-                new THREE.Vector3(axisLength, 0, 0)+                new THREE.Vector3(maxNum, 0, 0)
             ]);             ]);
             const xAxisMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });             const xAxisMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });
Zeile 255: Zeile 327:
             scene.add(xAxis);             scene.add(xAxis);
  
-            // Y-Achse +            const yAxisGeometry = new THREE.BufferGeometry().setFromPoints([ 
-            const yAxisGeometry = new THREE.BufferGeometry().setFromPoints([+
                 new THREE.Vector3(0, 0, 0),                 new THREE.Vector3(0, 0, 0),
-                new THREE.Vector3(0, axisLength, 0)+                new THREE.Vector3(0, maxNum, 0)
             ]);             ]);
             const yAxisMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00 });             const yAxisMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00 });
Zeile 264: Zeile 335:
             scene.add(yAxis);             scene.add(yAxis);
  
-            // Z-Achse +            const zAxisGeometry = new THREE.BufferGeometry().setFromPoints([ 
-            const zAxisGeometry = new THREE.BufferGeometry().setFromPoints([+
                 new THREE.Vector3(0, 0, 0),                 new THREE.Vector3(0, 0, 0),
-                new THREE.Vector3(0, 0, axisLength)+                new THREE.Vector3(0, 0, maxNum)
             ]);             ]);
             const zAxisMaterial = new THREE.LineBasicMaterial({ color: 0x0000ff });             const zAxisMaterial = new THREE.LineBasicMaterial({ color: 0x0000ff });
             const zAxis = new THREE.Line(zAxisGeometry, zAxisMaterial);             const zAxis = new THREE.Line(zAxisGeometry, zAxisMaterial);
             scene.add(zAxis);             scene.add(zAxis);
 +
 +            for (let i = 1; i <= maxNum; i++) {
 +                const xMarker = new THREE.Mesh(
 +                    new THREE.SphereGeometry(0.1),
 +                    new THREE.MeshBasicMaterial({ color: 0xff0000 })
 +                );
 +                xMarker.position.set(i, 0, 0);
 +                scene.add(xMarker);
 +
 +                const yMarker = new THREE.Mesh(
 +                    new THREE.SphereGeometry(0.1),
 +                    new THREE.MeshBasicMaterial({ color: 0x00ff00 })
 +                );
 +                yMarker.position.set(0, i, 0);
 +                scene.add(yMarker);
 +
 +                const zMarker = new THREE.Mesh(
 +                    new THREE.SphereGeometry(0.1),
 +                    new THREE.MeshBasicMaterial({ color: 0x0000ff })
 +                );
 +                zMarker.position.set(0, 0, i);
 +                scene.add(zMarker);
 +            }
         }         }
  
-        // Update der Vektoren 
         function updateVectors() {         function updateVectors() {
-            // Werte aus den Eingabefeldern holen 
             v1.set(             v1.set(
                 parseFloat(document.getElementById('v1x').value),                 parseFloat(document.getElementById('v1x').value),
Zeile 289: Zeile 380:
             );             );
  
-            // Szene leeren 
             scene.clear();             scene.clear();
  
-            // Achsen erstellen +            createAxisAndScale();
-            createAxes();+
  
-            // Vektorpfeile erstellen +            arrowV1 = createArrow(v1, 0x0000ff);  
-            arrowV1 = createArrow(v1, 0x0000ff); // Blau für v1 +            arrowV2 = createArrow(v2, 0xff0000); 
-            arrowV2 = createArrow(v2, 0xff0000); // Rot für v2+
  
-            // Reset der resultierenden Vektorpfeile 
             if (arrowResultant) scene.remove(arrowResultant);             if (arrowResultant) scene.remove(arrowResultant);
             if (arrowDifference) scene.remove(arrowDifference);             if (arrowDifference) scene.remove(arrowDifference);
             if (arrowCrossProduct) scene.remove(arrowCrossProduct);             if (arrowCrossProduct) scene.remove(arrowCrossProduct);
  
-            // Zeige Vektor-Komponenten im Output 
             displayVectorComponents(v1, 'Vektor 1');             displayVectorComponents(v1, 'Vektor 1');
             displayVectorComponents(v2, 'Vektor 2');             displayVectorComponents(v2, 'Vektor 2');
Zeile 311: Zeile 397:
         }         }
  
-        // Resultierender Vektor (Addition) 
         function toggleResultant() {         function toggleResultant() {
             if (arrowResultant) {             if (arrowResultant) {
Zeile 317: Zeile 402:
                 arrowResultant = null;                 arrowResultant = null;
             } else {             } else {
-                arrowResultant = createArrow(v1.clone().add(v2), 0x800080); // Lila für Resultierende+                arrowResultant = createArrow(v1.clone().add(v2), 0x800080); 
                 displayVectorComponents(v1.clone().add(v2), 'Resultierende');                 displayVectorComponents(v1.clone().add(v2), 'Resultierende');
                 renderer.render(scene, camera);                 renderer.render(scene, camera);
Zeile 323: Zeile 408:
         }         }
  
-        // Differenzvektor 
         function toggleDifference() {         function toggleDifference() {
             if (arrowDifference) {             if (arrowDifference) {
Zeile 329: Zeile 413:
                 arrowDifference = null;                 arrowDifference = null;
             } else {             } else {
-                arrowDifference = createArrow(v1.clone().sub(v2), 0x40E0D0); // Türkis für Differenz+                arrowDifference = createArrow(v1.clone().sub(v2), 0x40E0D0); 
                 displayVectorComponents(v1.clone().sub(v2), 'Differenz');                 displayVectorComponents(v1.clone().sub(v2), 'Differenz');
                 renderer.render(scene, camera);                 renderer.render(scene, camera);
Zeile 335: Zeile 419:
         }         }
  
-        // Kreuzproduktvektor 
         function toggleCrossProduct() {         function toggleCrossProduct() {
             if (arrowCrossProduct) {             if (arrowCrossProduct) {
Zeile 341: Zeile 424:
                 arrowCrossProduct = null;                 arrowCrossProduct = null;
             } else {             } else {
-                arrowCrossProduct = createArrow(v1.clone().cross(v2), 0x00ff00); // Grün für Kreuzprodukt+                arrowCrossProduct = createArrow(v1.clone().cross(v2), 0x00ff00); 
                 displayVectorComponents(v1.clone().cross(v2), 'Kreuzprodukt');                 displayVectorComponents(v1.clone().cross(v2), 'Kreuzprodukt');
                 renderer.render(scene, camera);                 renderer.render(scene, camera);
Zeile 347: Zeile 430:
         }         }
  
-        // Vektor-Komponenten im Output anzeigen 
         function displayVectorComponents(vector, label) {         function displayVectorComponents(vector, label) {
             const output = document.getElementById('output');             const output = document.getElementById('output');
Zeile 355: Zeile 437:
         }         }
  
-        // Kamera positionieren + /* 
-        camera.position.z = 15; +        camera.position.x = document.getElementById("cameraX").value; 
- +        camera.position.y = document.getElementById("cameraY").value; 
-        // OrbitControls für interaktive Steuerung (zoom und rotation) + camera.position.z = document.getElementById("cameraZ").value; 
-        const controls = new THREE.OrbitControls(camera, renderer.domElement); + */ 
-        controls.enableDamping = true;  // Sanfte Bewegung +
-        controls.dampingFactor = 0.25; +
-        controls.screenSpacePanning = false; +
- +
-        // Animationsschleife+
         function animate() {         function animate() {
             requestAnimationFrame(animate);             requestAnimationFrame(animate);
  
-            // Update der Kontrolle +            scene.rotation.x = document.getElementById('rotateX').value * Math.PI / 180; 
-            controls.update();+            scene.rotation.y = document.getElementById('rotateY').value * Math.PI / 180; 
 +            scene.rotation.z = document.getElementById('rotateZ').value * Math.PI / 180;
  
             renderer.render(scene, camera);             renderer.render(scene, camera);
         }         }
  
-        // Initialisieren +        function updateCamera() { 
-        updateVectors();+            camera.position.set( 
 +                parseFloat(document.getElementById('cameraX').value), 
 +                parseFloat(document.getElementById('cameraY').value), 
 +                parseFloat(document.getElementById('cameraZ').value) 
 +            ); 
 + 
 +            camera.rotation.set( 
 +                parseFloat(document.getElementById('cameraRotateX').value) * Math.PI / 180, 
 +                parseFloat(document.getElementById('cameraRotateY').value) * Math.PI / 180, 
 +                parseFloat(document.getElementById('cameraRotateZ').value) * Math.PI / 180 
 +            ); 
 + 
 +            renderer.render(scene, camera); 
 +        } 
 + 
 +        window.addEventListener('resize', () => { 
 +            renderer.setSize(window.innerWidth, window.innerHeight); 
 +            camera.aspect = window.innerWidth / window.innerHeight; 
 +            camera.updateProjectionMatrix(); 
 +        }); 
 + 
 +        document.getElementById('rotateX').addEventListener('input', function() { 
 +            scene.rotation.x = this.value * Math.PI / 180; 
 +            document.getElementById('rotateXInput').value = this.value; 
 +        }); 
 + 
 +        document.getElementById('rotateY').addEventListener('input', function() { 
 +            scene.rotation.y = this.value * Math.PI / 180; 
 +            document.getElementById('rotateYInput').value = this.value; 
 +        }); 
 + 
 +        document.getElementById('rotateZ').addEventListener('input', function() { 
 +            scene.rotation.z = this.value * Math.PI / 180; 
 +            document.getElementById('rotateZInput').value = this.value; 
 +        }); 
 + 
 +        document.getElementById('rotateXInput').addEventListener('input', function() { 
 +            const value = parseFloat(this.value); 
 +            scene.rotation.x = value * Math.PI / 180; 
 +            document.getElementById('rotateX').value = value; 
 +        }); 
 + 
 +        document.getElementById('rotateYInput').addEventListener('input', function() { 
 +            const value = parseFloat(this.value); 
 +            scene.rotation.y = value * Math.PI / 180; 
 +            document.getElementById('rotateY').value = value; 
 +        }); 
 + 
 +        document.getElementById('rotateZInput').addEventListener('input', function() { 
 +            const value = parseFloat(this.value); 
 +            scene.rotation.z = value * Math.PI / 180; 
 +            document.getElementById('rotateZ').value = value; 
 +        }); 
 + 
 +        document.getElementById('cameraX').addEventListener('input', updateCamera); 
 +        document.getElementById('cameraY').addEventListener('input', updateCamera); 
 +        document.getElementById('cameraZ').addEventListener('input', updateCamera); 
 +        document.getElementById('cameraRotateX').addEventListener('input', updateCamera); 
 +        document.getElementById('cameraRotateY').addEventListener('input', updateCamera); 
 +        document.getElementById('cameraRotateZ').addEventListener('input', updateCamera); 
         animate();         animate();
 +        updateVectors();
 + updateCamera();
 +
 + //for(var i = 0; i<5; i++) zoomOut();
     </script>     </script>
 </body> </body>
vektor.1733586991.txt.gz · Zuletzt geändert: 2024/12/07 16:56 von jango

Seiten-Werkzeuge

Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-NoDerivatives 4.0 International
CC Attribution-NoDerivatives 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki