\vec{x}

= ${this.vek1} +

r

× ${this.rv}`; } lotfußpunktverfahren() { //TODO: Debuggen //normale zahlen * multiplikator for (let i = 0; i < 3; i++) { this.sum1.push(this.ebene[i] * this.vek1[i]); } for (let i = 0; i < 3; i++) { this.sum += this.sum1[i]; } //r zahlen mal multiplikator for (let i = 0; i < 3; i++) { this.sum_r += this.ebene[i] * this.rv[i]; } //summe normale zahlen rüber ziehen und vorzeichen ändern this.ebene[3] = this.ebene[3] + this.sum * -1; //wenn r negativ dann vorzeichen e3 ändern if (this.sum_r < 0) { this.ebene[3] *= -1; this.sum_r = this.sum_r * -1; } //wenn r nicht eins dann e3 durch r teilen if (this.sum_r != 1) { this.ebene[3] = this.ebene[3] / this.sum_r; } //r in g einsetzen for (let i = 0; i < 3; i++) { this.schnittpunkt.push( (Math.round( this.vek1[i] + this.ebene[3] * this.rv[i] + Number.EPSILON ) * 100) / 100 ); } if (isNaN(this.schnittpunkt[0])) { return "keine Ebene eingegeben"; } return this.schnittpunkt; } abstand(val) { if (val == "a") { return ( Math.round( (Math.sqrt( (this.schnittpunkt[0] - this.vek1[0]) ** 2 + (this.schnittpunkt[1] - this.vek1[1]) ** 2 + (this.schnittpunkt[2] - this.vek1[2]) ** 2 ) + Number.EPSILON) * 100 ) / 100 ); } else if (val == "b") { return ( Math.round( (Math.sqrt( (this.schnittpunkt[0] - this.vek2[0]) ** 2 + (this.schnittpunkt[1] - this.vek2[1]) ** 2 + (this.schnittpunkt[2] - this.vek2[2]) ** 2 ) + Number.EPSILON) * 100 ) / 100 ); } } kreuzprodukt() { this.cross[0] = this.vek1[1] * this.vek2[2] - this.vek1[2] * this.vek2[1]; this.cross[1] = this.vek1[2] * this.vek2[0] - this.vek1[0] * this.vek2[2]; this.cross[2] = this.vek1[0] * this.vek2[1] - this.vek1[1] * this.vek2[0]; return this.cross; } } let ebene = [e_x, e_y, e_z, e_val]; let a = [v_a_x, v_a_y, v_a_z]; let b = [v_b_x, v_b_y, v_b_z]; ebene = ebene.map(Number); a = a.map(Number); b = b.map(Number); //let test1 = new Vektoren(a, b, ebene); /*let ebene = [1, 2, 3, 6]; let a = [12, 04, 15]; let b = [1, 6, 1];*/ let test1 = new Vektoren(a, b, ebene); let betrag = test1.betrag_rv(); let richtungsvektor = test1.rv; let winkel = test1.skalarprodukt(); let Gerade = test1.gerade(); let lotfußpunkt = test1.lotfußpunktverfahren(); let abstand_v1 = test1.abstand("a"); let abstand_v2 = test1.abstand("b"); let kreuzprodukt = test1.kreuzprodukt(); let expression = "

\vec{a}

" + "✗" + "

\vec{u}

" + " = "; document.getElementById("bet").innerHTML = betrag + " LE"; document.getElementById("rv").innerHTML = richtungsvektor; document.getElementById("win").innerHTML = "α = " + winkel + "°"; document.getElementById("ger").innerHTML = Gerade; document.getElementById("schn").innerHTML = lotfußpunkt; document.getElementById("kreuz_lsg").innerHTML = expression + kreuzprodukt; } //get vectors function draw(value) { let v_a_x = document.getElementById("v_a_x").value; let v_a_y = document.getElementById("v_a_y").value; let v_a_z = document.getElementById("v_a_z").value; let v_b_x = document.getElementById("v_b_x").value; let v_b_y = document.getElementById("v_b_y").value; let v_b_z = document.getElementById("v_b_z").value; // Get the canvas element const canvas = document.getElementById("canvas"); // Create the scene, camera, and renderer const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000 ); camera.up.set(0, 0, 1); const renderer = new THREE.WebGLRenderer({ canvas }); // Set the renderer size and add it to the document renderer.setSize(canvas.clientWidth, canvas.clientHeight); document.body.appendChild(renderer.domElement); // Rotate the scene so the Z axis points upwards // Create a grid on the XY plane for depth const gridSize = 40; const gridDivisions = 20; const gridHelper = new THREE.GridHelper(gridSize, gridDivisions); scene.add(gridHelper); gridHelper.rotateX(Math.PI / 2); // Create the axes as arrow helpers const xAxis = new THREE.Vector3(1, 0, 0); const yAxis = new THREE.Vector3(0, 1, 0); const zAxis = new THREE.Vector3(0, 0, 1); const arrowLength = document.getElementById("axis").value; const xArrowColor = 0xff0000; const yArrowColor = 0x00ff00; const zArrowColor = 0x0000ff; const axesHelper = new THREE.Group(); axesHelper.add( new THREE.ArrowHelper(xAxis, new THREE.Vector3(), arrowLength, xArrowColor) ); axesHelper.add( new THREE.ArrowHelper(yAxis, new THREE.Vector3(), arrowLength, yArrowColor) ); axesHelper.add( new THREE.ArrowHelper(zAxis, new THREE.Vector3(), arrowLength, zArrowColor) ); scene.add(axesHelper); // Create the vector and a line and arrow to visualize it const vector = new THREE.Vector3(v_a_x, v_a_y, v_a_z); const lineGeometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(0, 0, 0), vector, ]); const lineMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00 }); const line = new THREE.Line(lineGeometry, lineMaterial); scene.add(line); const arrowHelper = new THREE.ArrowHelper( vector.clone().normalize(), new THREE.Vector3(), vector.length(), 0xffff00 ); scene.add(arrowHelper); //create a second vector const vector2 = new THREE.Vector3(v_b_x, v_b_y, v_b_z); const lineGeometry2 = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(0, 0, 0), vector2, ]); const lineMaterial2 = new THREE.LineBasicMaterial({ color: 0xff00ee }); const line2 = new THREE.Line(lineGeometry2, lineMaterial2); scene.add(line2); const arrowHelper2 = new THREE.ArrowHelper( vector2.clone().normalize(), new THREE.Vector3(), vector2.length(), 0xff00ee ); scene.add(arrowHelper2); let change_x = document.getElementById("myRange_x").value; let change_y = document.getElementById("myRange_y").value; let change_z = document.getElementById("myRange_z").value; // Position and rotate the camera to see the vector better camera.position.set(change_x, change_y, change_z); camera.lookAt(new THREE.Vector3(0, 0, 0)); // Render the scene renderer.render(scene, camera); let feedback = document.getElementById("form"); canvas.style.display = "block"; feedback.insertBefore(canvas, feedback.firstChild); } /* x → */

3D vectors with three.js