| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <title>G-code Viewer</title> |
| | <style> |
| | body { |
| | margin: 0; |
| | overflow: hidden; |
| | } |
| | canvas { |
| | display: block; |
| | } |
| | </style> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script> |
| | </head> |
| | <body> |
| | <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 gridHelper = new THREE.GridHelper(200, 50); |
| | scene.add(gridHelper); |
| | |
| | |
| | function loadGCode(gcode) { |
| | const material = new THREE.LineBasicMaterial({ color: 0x00ff00 }); |
| | const points = []; |
| | const lines = gcode.split("\n"); |
| | |
| | let currentX = 0, currentY = 0, currentZ = 0; |
| | let isRelative = false; |
| | |
| | lines.forEach((line) => { |
| | line = line.trim(); |
| | if (line.startsWith("G90")) { |
| | isRelative = false; |
| | } else if (line.startsWith("G91")) { |
| | isRelative = true; |
| | } |
| | |
| | const matchX = line.match(/X([-+]?\d*\.?\d+)/); |
| | const matchY = line.match(/Y([-+]?\d*\.?\d+)/); |
| | const matchZ = line.match(/Z([-+]?\d*\.?\d+)/); |
| | |
| | let newX = currentX; |
| | let newY = currentY; |
| | let newZ = currentZ; |
| | |
| | if (matchX) { |
| | const deltaX = parseFloat(matchX[1]); |
| | newX = isRelative ? currentX + deltaX : deltaX; |
| | } |
| | if (matchY) { |
| | const deltaY = parseFloat(matchY[1]); |
| | newY = isRelative ? currentY + deltaY : deltaY; |
| | } |
| | if (matchZ) { |
| | const deltaZ = parseFloat(matchZ[1]); |
| | newZ = isRelative ? currentZ + deltaZ : deltaZ; |
| | } |
| | |
| | points.push(new THREE.Vector3(newX, newY, newZ)); |
| | |
| | currentX = newX; |
| | currentY = newY; |
| | currentZ = newZ; |
| | }); |
| | |
| | const geometry = new THREE.BufferGeometry().setFromPoints(points); |
| | const line = new THREE.Line(geometry, material); |
| | scene.add(line); |
| | } |
| | |
| | |
| | camera.position.set(0, 50, 200); |
| | camera.lookAt(0, 0, 0); |
| | |
| | |
| | function animate() { |
| | requestAnimationFrame(animate); |
| | renderer.render(scene, camera); |
| | } |
| | animate(); |
| | |
| | |
| | if (window.gcode) { |
| | loadGCode(window.gcode); |
| | } else { |
| | console.error("No G-code provided"); |
| | } |
| | </script> |
| | </body> |
| | </html> |
