|
|
<!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> |
