MBCDN

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Zuletzt angesehen: • pgp • sql • adcs • ticketsystem • traefik • pyramide • scsi • ntfssecurity • opensearch • todo
vektor

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
vektor [2024/12/07 17:13]
jango [Vektor Visualisierung] 		vektor [2024/12/07 17:32] (aktuell)
jango [Vektor Visualisierung]
Zeile 178: Zeile 178:
         body { margin: 0; font-family: Arial, sans-serif; }         body { margin: 0; font-family: Arial, sans-serif; }
         canvas { display: block; }         canvas { display: block; }
-        .controls { position: absolute; top: 10px; left: 10px; z-index: 1; background: rgba(255, 255, 255, 0.7); padding: 10px; } +        .controls { 
-        .controls input { margin-bottom: 5px; width: 200px; }+            position: absolute; 
 +            top: 10px; 
 +            left: 10px; 
 +            z-index: 1; 
 +            background: rgba(255, 255, 255, 0.7); 
 +            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; 
 +        }
     </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> 
 +            <input type="number" id="rotateXInput" value="0" step="0.01"><br>
  
- <h3>Rotation der Szene</h3> +            <label for="rotateY">Rotation Y (grün):</label> 
- <label for="rotateX">Rotation X (rot):</label> +            <input type="range" id="rotateY" min="-180" max="180" step="0.01" value="0"><br> 
- <input type="range" id="rotateX" min="-180" max="180" step="0.01" value="0"><br> +            <input type="number" id="rotateYInput" value="0" step="0.01"><br>
- <input type="number" id="rotateXInput" value="0" step="0.01"><br>+
  
- <label for="rotateY">Rotation Y (grün):</label> +            <label for="rotateZ">Rotation Z (blau):</label> 
- <input type="range" id="rotateY" min="-180" max="180" step="0.01" value="0"><br> +            <input type="range" id="rotateZ" min="-180" max="180" step="0.01" value="0"><br> 
- <input type="number" id="rotateYInput" value="0" step="0.01"><br> +            <input type="number" id="rotateZInput" value="0" step="0.01"><br> 
- +        </div>
- <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><br> +
-  +
- <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> +        <!-- Kamera Position und Rotation --> 
- <input type="number" id="cameraY" value="3" step="0.1"><br>+        <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="cameraZ">Kamera Position Z:</label> +            <label for="cameraY">Kamera Position Y:</label> 
- <input type="number" id="cameraZ" value="15" step="0.1"><br>+            <input type="number" id="cameraY" value="3" step="0.1"><br>
  
- <label for="cameraRotateX">Kamera Rotation X:</label> +            <label for="cameraZ">Kamera Position Z:</label> 
- <input type="number" id="cameraRotateX" value="0" step="0.1"><br>+            <input type="number" id="cameraZ" value="5" step="0.1"><br>
  
- <label for="cameraRotateY">Kamera Rotation Y:</label> +            <label for="cameraRotateX">Kamera Rotation X:</label> 
- <input type="number" id="cameraRotateY" value="0" step="0.1"><br>+            <input type="number" id="cameraRotateX" value="0" step="0.1"><br>
  
- <label for="cameraRotateZ">Kamera Rotation Z:</label> +            <label for="cameraRotateY">Kamera Rotation Y:</label> 
- <input type="number" id="cameraRotateZ" value="0" step="0.1"><br><br>+            <input type="number" id="cameraRotateY" value="0" step="0.1"><br>
  
- <button onclick="zoomIn()">Zoom In</button><br> +            <label for="cameraRotateZ">Kamera Rotation Z:</label> 
- <button onclick="zoomOut()">Zoom Out</button><br><br>+            <input type="number" id="cameraRotateZ" value="0" step="0.1"><br>
  
- <span id="output"></span> +            <button onclick="zoomIn()">Zoom In</button><br> 
- </div>+            <button onclick="zoomOut()">Zoom Out</button><br> 
 +        </div>
  
 +        <!-- Ausgabe -->
 +        <div class="section">
 +            <span id="output"></span>
 +        </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/PointerLockControls.js"></script>+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/controls/PointerLockControls.js"></script>
  
     <script>     <script>
Zeile 259: Zeile 292:
         directionalLight.position.set(5, 5, 5).normalize();         directionalLight.position.set(5, 5, 5).normalize();
         scene.add(directionalLight);         scene.add(directionalLight);
-  
- // Funktion zum Vergrößern der Szene (Zoom In) 
- function zoomIn() { 
- if (camera.position.z > 1) { 
- camera.position.z -= 1; // Kamera näher an die Szene heranholen 
- renderer.render(scene, camera); 
- } 
- } 
  
- // Funktion zum Verkleinern der Szene (Zoom Out) +        function zoomIn() { 
- function zoomOut() { +            if (camera.position.z > 1) { 
- camera.position.z += 1; // Kamera weiter von der Szene entfernen +                camera.position.z -= 1; 
- renderer.render(scene, camera); +                renderer.render(scene, camera); 
- }+            } 
 +        } 
 + 
 +        function zoomOut() { 
 +            camera.position.z += 1; 
 +            renderer.render(scene, camera); 
 +        }
  
-        // Vektoren 
         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 280: Zeile 310:
         let arrowV1, arrowV2, arrowResultant, arrowDifference, arrowCrossProduct;         let arrowV1, arrowV2, arrowResultant, arrowDifference, arrowCrossProduct;
  
-        // Erstelle Vektorpfeile 
         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 287: Zeile 316:
         }         }
  
-        // Funktion zum Erstellen von Achsen und Skalenmarkierungen 
         function createAxisAndScale() {         function createAxisAndScale() {
-             +            var maxNum = 9999; 
- var maxNum = 9999; +
-  +
- // 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),
Zeile 301: 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),
Zeile 310: 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),
Zeile 319: Zeile 343:
             scene.add(zAxis);             scene.add(zAxis);
  
-            // Skalenmarkierungen entlang der Achsen 
             for (let i = 1; i <= maxNum; i++) {             for (let i = 1; i <= maxNum; i++) {
-                // X-Markierungen 
                 const xMarker = new THREE.Mesh(                 const xMarker = new THREE.Mesh(
                     new THREE.SphereGeometry(0.1),                     new THREE.SphereGeometry(0.1),
Zeile 329: Zeile 351:
                 scene.add(xMarker);                 scene.add(xMarker);
  
-                // Y-Markierungen 
                 const yMarker = new THREE.Mesh(                 const yMarker = new THREE.Mesh(
                     new THREE.SphereGeometry(0.1),                     new THREE.SphereGeometry(0.1),
Zeile 337: Zeile 358:
                 scene.add(yMarker);                 scene.add(yMarker);
  
-                // Z-Markierungen 
                 const zMarker = new THREE.Mesh(                 const zMarker = new THREE.Mesh(
                     new THREE.SphereGeometry(0.1),                     new THREE.SphereGeometry(0.1),
Zeile 347: Zeile 367:
         }         }
  
-        // Update Vektoren und Pfeile 
         function updateVectors() {         function updateVectors() {
-            // Neue Werte aus den Eingabefeldern holen 
             v1.set(             v1.set(
                 parseFloat(document.getElementById('v1x').value),                 parseFloat(document.getElementById('v1x').value),
Zeile 362: Zeile 380:
             );             );
  
-            // Szene leeren 
             scene.clear();             scene.clear();
  
-            // Achsen und Skalenmarkierungen erstellen 
             createAxisAndScale();             createAxisAndScale();
  
-            // 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 und Konsole 
             displayVectorComponents(v1, 'Vektor 1');             displayVectorComponents(v1, 'Vektor 1');
             displayVectorComponents(v2, 'Vektor 2');             displayVectorComponents(v2, 'Vektor 2');
Zeile 384: Zeile 397:
         }         }
  
-        // Ergebnisvektor (Resultant) 
         function toggleResultant() {         function toggleResultant() {
             if (arrowResultant) {             if (arrowResultant) {
Zeile 390: 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); 
-                // Zeige Resultierenden Vektor+
                 displayVectorComponents(v1.clone().add(v2), 'Resultierende');                 displayVectorComponents(v1.clone().add(v2), 'Resultierende');
                 renderer.render(scene, camera);                 renderer.render(scene, camera);
Zeile 397: Zeile 408:
         }         }
  
-        // Differenzvektor 
         function toggleDifference() {         function toggleDifference() {
             if (arrowDifference) {             if (arrowDifference) {
Zeile 403: 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); 
-                // Zeige Differenz Vektor+
                 displayVectorComponents(v1.clone().sub(v2), 'Differenz');                 displayVectorComponents(v1.clone().sub(v2), 'Differenz');
                 renderer.render(scene, camera);                 renderer.render(scene, camera);
Zeile 410: Zeile 419:
         }         }
  
-        // Kreuzproduktvektor 
         function toggleCrossProduct() {         function toggleCrossProduct() {
             if (arrowCrossProduct) {             if (arrowCrossProduct) {
Zeile 416: 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); 
-                // Zeige Kreuzprodukt Vektor+
                 displayVectorComponents(v1.clone().cross(v2), 'Kreuzprodukt');                 displayVectorComponents(v1.clone().cross(v2), 'Kreuzprodukt');
                 renderer.render(scene, camera);                 renderer.render(scene, camera);
Zeile 423: Zeile 430:
         }         }
  
-        // Zeige Vektor-Komponenten im Output und Konsole 
         function displayVectorComponents(vector, label) {         function displayVectorComponents(vector, label) {
             const output = document.getElementById('output');             const output = document.getElementById('output');
-            const outputText = label + " - x:" + vector.x.toFixed(2) + ", y:" + vector.y.toFixed(2) + ", z:" + vector.x.toFixed(2); /// ${label} - x: ${vector.x.toFixed(2)}, y: ${vector.y.toFixed(2)}, z: ${vector.z.toFixed(2)};+            const outputText = `${label} - x: ${vector.x.toFixed(2)}, y: ${vector.y.toFixed(2)}, z: ${vector.z.toFixed(2)}`;
             output.textContent = outputText;             output.textContent = outputText;
             console.log(outputText);             console.log(outputText);
         }         }
  
-        // Kamera positionieren + /* 
- camera.position.x = 5; +        camera.position.x = document.getElementById("cameraX").value; 
- camera.position.y = 3; +        camera.position.y = document.getElementById("cameraY").value; 
-        camera.position.z = 15; + camera.position.z = document.getElementById("cameraZ").value; 
- + */ 
-        // Animationsschleife+
         function animate() {         function animate() {
             requestAnimationFrame(animate);             requestAnimationFrame(animate);
  
-            // Rotation der Szene basierend auf den Slider-Werten 
             scene.rotation.x = document.getElementById('rotateX').value * Math.PI / 180;             scene.rotation.x = document.getElementById('rotateX').value * Math.PI / 180;
             scene.rotation.y = document.getElementById('rotateY').value * Math.PI / 180;             scene.rotation.y = document.getElementById('rotateY').value * Math.PI / 180;
Zeile 447: Zeile 452:
             renderer.render(scene, camera);             renderer.render(scene, camera);
         }         }
-  +
- // Kamera-Position und -Rotation aktualisieren+
         function updateCamera() {         function updateCamera() {
-            // Position der Kamera aktualisieren 
             camera.position.set(             camera.position.set(
                 parseFloat(document.getElementById('cameraX').value),                 parseFloat(document.getElementById('cameraX').value),
Zeile 457: Zeile 460:
             );             );
  
-            // Rotation der Kamera aktualisieren 
             camera.rotation.set(             camera.rotation.set(
                 parseFloat(document.getElementById('cameraRotateX').value) * Math.PI / 180,                 parseFloat(document.getElementById('cameraRotateX').value) * Math.PI / 180,
Zeile 467: Zeile 469:
         }         }
  
-        // Anpassung bei Fenstergrößenänderung 
         window.addEventListener('resize', () => {         window.addEventListener('resize', () => {
             renderer.setSize(window.innerWidth, window.innerHeight);             renderer.setSize(window.innerWidth, window.innerHeight);
Zeile 473: Zeile 474:
             camera.updateProjectionMatrix();             camera.updateProjectionMatrix();
         });         });
-  +
-         // Update der Rotation basierend auf den Slider-Werten+
         document.getElementById('rotateX').addEventListener('input', function() {         document.getElementById('rotateX').addEventListener('input', function() {
             scene.rotation.x = this.value * Math.PI / 180;             scene.rotation.x = this.value * Math.PI / 180;
Zeile 490: Zeile 490:
         });         });
  
-        // Update der Rotation basierend auf den Eingabefeldern 
         document.getElementById('rotateXInput').addEventListener('input', function() {         document.getElementById('rotateXInput').addEventListener('input', function() {
             const value = parseFloat(this.value);             const value = parseFloat(this.value);
Zeile 509: Zeile 508:
         });         });
  
- 
- // Event-Listener für Kamera-Position 
         document.getElementById('cameraX').addEventListener('input', updateCamera);         document.getElementById('cameraX').addEventListener('input', updateCamera);
         document.getElementById('cameraY').addEventListener('input', updateCamera);         document.getElementById('cameraY').addEventListener('input', updateCamera);
         document.getElementById('cameraZ').addEventListener('input', updateCamera);         document.getElementById('cameraZ').addEventListener('input', updateCamera);
- 
-        // Event-Listener für Kamera-Rotation 
         document.getElementById('cameraRotateX').addEventListener('input', updateCamera);         document.getElementById('cameraRotateX').addEventListener('input', updateCamera);
         document.getElementById('cameraRotateY').addEventListener('input', updateCamera);         document.getElementById('cameraRotateY').addEventListener('input', updateCamera);
         document.getElementById('cameraRotateZ').addEventListener('input', updateCamera);         document.getElementById('cameraRotateZ').addEventListener('input', updateCamera);
  
-        // Initialisieren+        animate();
         updateVectors();         updateVectors();
-        animate();+ updateCamera(); 
 +  
 + //for(var i = 0; i<5; i++) zoomOut();
     </script>     </script>
 </body> </body>
vektor.1733588007.txt.gz · Zuletzt geändert: 2024/12/07 17:13 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