ST3215总线舵机机械臂：从激光切割到双向数字孪生

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>工业风 2-DOF 机械臂 - 水平方向修正版</title> <style> body { margin: 0; overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #1a1e24; user-select: none; } #ui { position: absolute; top: 15px; left: 15px; z-index: 10; background: rgba(25, 30, 35, 0.85); color: #e0e0e0; padding: 18px 22px; border-radius: 6px; font-size: 14px; box-shadow: 0 8px 16px rgba(0,0,0,0.6); border-left: 4px solid #ffb300; width: 300px; backdrop-filter: blur(5px); } h2 { margin: 0 0 10px 0; font-size: 16px; color: #fff; letter-spacing: 1px; } .btn-row { display: flex; gap: 10px; } button { margin-top: 10px; padding: 10px; cursor: pointer; width: 100%; background: #333; color: #fff; border: 1px solid #555; border-radius: 4px; font-weight: bold; transition: 0.2s; } button:hover { background: #444; border-color: #ffb300; } button:disabled { background: #222; color: #666; border-color: #333; cursor: not-allowed; } .btn-stop { background: #d32f2f; border-color: #b71c1c; } .btn-stop:hover { background: #f44336; border-color: #ffb300; } #status { margin-top: 10px; color: #f44336; font-weight: bold; text-align: center; font-size: 13px;} .slider-group { margin-top: 15px; } .slider-group label { display: flex; justify-content: space-between; font-size: 12px; color: #aaa; margin-bottom: 5px; } input[type=range] { width: 100%; -webkit-appearance: none; background: transparent; height: 6px; border-radius: 3px; background: #333; outline: none; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%; background: #ffb300; cursor: pointer; border: 2px solid #fff; } .data-row { margin-top: 15px; font-family: 'Consolas', monospace; color: #b0bec5; font-size: 14px; line-height: 1.6; border-top: 1px solid #333; padding-top: 10px;} .data-row span { color: #ffb300; font-weight: bold; } .hint { font-size: 12px; color: #888; margin-top: 10px;} .active-mode { color: #4CAF50; font-weight: bold; } </style> </head> <body> <div id="ui"> <h2>INDUSTRIAL ARM v3.1</h2> <div class="btn-row"> <button id="connectBtn">连接串口</button> <button id="stopBtn" class="btn-stop" disabled>急停</button> </div> <div id="status">未连接</div> <div class="slider-group"> <label><span>底座旋转 (Yaw)</span> <span id="yawSliderVal">2048</span></label> <input type="range" id="yawSlider" min="0" max="4095" value="2048"> </div> <div class="slider-group"> <label><span>大臂俯仰 (Pitch)</span> <span id="pitchSliderVal">2048</span></label> <input type="range" id="pitchSlider" min="490" max="3180" value="2048"> </div> <div class="data-row"> 物理反馈: <span id="valYaw">--</span> | <span id="valPitch">--</span> </div> <div class="hint"> <b>状态：</b> <span id="modeText" class="active-mode">⚪ 卸力</span><br> • 拖拽黄色模型或使用滑块。<br> • 松手即卸力，可用手掰动。 </div> </div> <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js", "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/" } } </script> <script type="module"> import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'; // ================= 1. 场景初始化 ================= const scene = new THREE.Scene(); scene.background = new THREE.Color(0x2a303a); scene.fog = new THREE.Fog(0x2a303a, 8, 20); const camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 0.1, 100); camera.position.set(4, 3, 5); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(innerWidth, innerHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; document.body.appendChild(renderer.domElement); const pmremGenerator = new THREE.PMREMGenerator(renderer); const envTexture = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture; scene.environment = envTexture; const controls = new OrbitControls(camera, renderer.domElement); controls.target.set(0, 0.8, 0); controls.enableDamping = true; controls.update(); scene.add(new THREE.AmbientLight(0xffffff, 0.4)); const dirLight = new THREE.DirectionalLight(0xffffff, 1.8); dirLight.position.set(5, 8, 5); dirLight.castShadow = true; dirLight.shadow.mapSize.width = 2048; dirLight.shadow.mapSize.height = 2048; scene.add(dirLight); const rimLight = new THREE.DirectionalLight(0x00d2ff, 2.0); rimLight.position.set(-5, 2, -5); scene.add(rimLight); const gridHelper = new THREE.GridHelper(10, 20, 0x555555, 0x333333); gridHelper.position.y = -0.01; scene.add(gridHelper); // ================= 2. 材质与模型 ================= const matCastIron = new THREE.MeshStandardMaterial({ color: 0x3b3f44, roughness: 0.6, metalness: 0.8 }); const matIndustrialYellow = new THREE.MeshStandardMaterial({ color: 0xffb300, roughness: 0.3, metalness: 0.5 }); const matMotorBlack = new THREE.MeshStandardMaterial({ color: 0x24272b, roughness: 0.2, metalness: 0.9 }); const matSteel = new THREE.MeshStandardMaterial({ color: 0x9ba4b5, roughness: 0.15, metalness: 0.95 }); const robotRoot = new THREE.Group(); scene.add(robotRoot); const basePlate = new THREE.Mesh(new THREE.BoxGeometry(1.2, 0.1, 1.2), matCastIron); basePlate.position.y = 0.05; basePlate.receiveShadow = true; robotRoot.add(basePlate); const baseFlange = new THREE.Mesh(new THREE.CylinderGeometry(0.5, 0.6, 0.15, 32), matSteel); baseFlange.position.y = 0.15; baseFlange.castShadow = true; robotRoot.add(baseFlange); const jointYaw = new THREE.Group(); jointYaw.position.y = 0.225; robotRoot.add(jointYaw); const turretGroup = new THREE.Group(); turretGroup.name = "turret"; jointYaw.add(turretGroup); const turretBase = new THREE.Mesh(new THREE.CylinderGeometry(0.45, 0.45, 0.2, 32), matIndustrialYellow); turretBase.position.y = 0.1; turretBase.castShadow = true; turretGroup.add(turretBase); const bracketL = new THREE.Mesh(new THREE.BoxGeometry(0.15, 0.5, 0.4), matMotorBlack); bracketL.position.set(-0.35, 0.4, 0); bracketL.castShadow = true; turretGroup.add(bracketL); const bracketR = bracketL.clone(); bracketR.position.x = 0.35; turretGroup.add(bracketR); const motorYaw = new THREE.Mesh(new THREE.CylinderGeometry(0.2, 0.2, 0.9, 16), matMotorBlack); motorYaw.rotation.z = Math.PI / 2; motorYaw.position.y = 0.5; motorYaw.castShadow = true; turretGroup.add(motorYaw); const jointPitch = new THREE.Group(); jointPitch.position.y = 0.5; turretGroup.add(jointPitch); const armGroup = new THREE.Group(); armGroup.name = "arm"; jointPitch.add(armGroup); const pitchFlange = new THREE.Mesh(new THREE.CylinderGeometry(0.18, 0.18, 0.1, 24), matSteel); pitchFlange.rotation.z = Math.PI / 2; pitchFlange.position.x = -0.4; armGroup.add(pitchFlange); const pitchFlangeR = pitchFlange.clone(); pitchFlangeR.position.x = 0.4; armGroup.add(pitchFlangeR); const armLinkMain = new THREE.Mesh(new THREE.BoxGeometry(0.25, 1.4, 0.25), matIndustrialYellow); armLinkMain.position.y = 0.7; armLinkMain.castShadow = true; armGroup.add(armLinkMain); const armRib = new THREE.Mesh(new THREE.BoxGeometry(0.1, 1.3, 0.35), matSteel); armRib.position.y = 0.7; armRib.castShadow = true; armGroup.add(armRib); const jointElbow = new THREE.Group(); jointElbow.position.y = 1.4; armGroup.add(jointElbow); const motorElbow = new THREE.Mesh(new THREE.CylinderGeometry(0.15, 0.15, 0.5, 16), matMotorBlack); motorElbow.rotation.z = Math.PI / 2; motorElbow.castShadow = true; jointElbow.add(motorElbow); const forearm = new THREE.Mesh(new THREE.BoxGeometry(0.15, 0.15, 0.8), matIndustrialYellow); forearm.position.z = 0.4; forearm.castShadow = true; jointElbow.add(forearm); const endFlange = new THREE.Mesh(new THREE.CylinderGeometry(0.12, 0.12, 0.05, 16), matSteel); endFlange.rotation.x = Math.PI / 2; endFlange.position.z = 0.8; jointElbow.add(endFlange); const gripperL = new THREE.Mesh(new THREE.BoxGeometry(0.04, 0.2, 0.1), matMotorBlack); gripperL.position.set(-0.06, 0, 0.85); jointElbow.add(gripperL); const gripperR = gripperL.clone(); gripperR.position.x = 0.06; jointElbow.add(gripperR); const PITCH_OFFSET = Math.PI / 6; jointPitch.rotation.x = PITCH_OFFSET; // ================= 3. 通信与状态 ================= const PITCH_MIN = 490; const PITCH_MAX = 3180; let targetRawYaw = 2048; let targetRawPitch = 2048; function rawToRad(raw) { return ((raw - 2048) / 4096) * Math.PI * 2; } const connectBtn = document.getElementById('connectBtn'); const stopBtn = document.getElementById('stopBtn'); const statusDiv = document.getElementById('status'); const valYaw = document.getElementById('valYaw'); const valPitch = document.getElementById('valPitch'); const modeText = document.getElementById('modeText'); const yawSlider = document.getElementById('yawSlider'); const pitchSlider = document.getElementById('pitchSlider'); const yawSliderVal = document.getElementById('yawSliderVal'); const pitchSliderVal = document.getElementById('pitchSliderVal'); let port = null; let isInteracting = false; connectBtn.addEventListener('click', async () => { if (port) return; try { port = await navigator.serial.requestPort(); await port.open({ baudRate: 115200 }); statusDiv.textContent = '✅ 串口已连接'; statusDiv.style.color = '#4CAF50'; connectBtn.disabled = true; stopBtn.disabled = false; readLoop(); } catch (e) { statusDiv.textContent = '❌ 连接失败'; statusDiv.style.color = '#f44336'; } }); stopBtn.addEventListener('click', () => { sendCommand('E0'); isInteracting = false; modeText.innerHTML = '⚪ 已急停 (卸力)'; modeText.style.color = '#4CAF50'; }); async function readLoop() { const decoder = new TextDecoderStream(); port.readable.pipeTo(decoder.writable); const reader = decoder.readable.getReader(); let buffer = ''; while (true) { const { value, done } = await reader.read(); if (done) break; buffer += value; const lines = buffer.split('\n'); buffer = lines.pop(); for (const line of lines) { parseIncoming(line.trim()); } } } function parseIncoming(line) { const match = line.match(/A(\d+),B(\d+)/); if (match) { let rawA = parseInt(match[1]); let rawB = parseInt(match[2]); valYaw.textContent = rawA; valPitch.textContent = rawB; if (!isInteracting) { // 如果物理值变化微小，则忽略，防止终点抖动 if (Math.abs(rawA - targetRawYaw) > 3) { targetRawYaw = rawA; yawSlider.value = rawA; yawSliderVal.textContent = rawA; } if (Math.abs(rawB - targetRawPitch) > 3) { targetRawPitch = THREE.MathUtils.clamp(rawB, PITCH_MIN, PITCH_MAX); pitchSlider.value = targetRawPitch; pitchSliderVal.textContent = targetRawPitch; } } } } let lastSendTime = 0; async function sendCommand(msg) { if (!port || !port.writable) return; const now = Date.now(); if ((msg.startsWith('A') || msg.startsWith('B')) && now - lastSendTime < 30) return; lastSendTime = now; const writer = port.writable.getWriter(); await writer.write(new TextEncoder().encode(`${msg}\n`)); writer.releaseLock(); } function setMode(isPowered) { if (isPowered) { sendCommand('E1'); modeText.innerHTML = '🔴 动力接通 (锁定)'; modeText.style.color = '#f44336'; } else { sendCommand('E0'); modeText.innerHTML = '⚪ 卸力 (自由)'; modeText.style.color = '#4CAF50'; } } // 滑块交互 function onSliderChange() { if (!port) return; isInteracting = true; setMode(true); targetRawYaw = parseInt(yawSlider.value); targetRawPitch = THREE.MathUtils.clamp(parseInt(pitchSlider.value), PITCH_MIN, PITCH_MAX); yawSliderVal.textContent = targetRawYaw; pitchSliderVal.textContent = targetRawPitch; sendCommand(`A${targetRawYaw}`); sendCommand(`B${targetRawPitch}`); } yawSlider.addEventListener('input', onSliderChange); pitchSlider.addEventListener('input', onSliderChange); yawSlider.addEventListener('change', () => { isInteracting = false; setMode(false); }); pitchSlider.addEventListener('change', () => { isInteracting = false; setMode(false); }); // 鼠标拖拽模型 const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); let activeName = ""; let previousMousePosition = { x: 0, y: 0 }; renderer.domElement.addEventListener('pointerdown', (event) => { mouse.x = (event.clientX / innerWidth) * 2 - 1; mouse.y = -(event.clientY / innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects([turretGroup, armGroup], true); if (intersects.length > 0) { let tempObj = intersects[0].object; let isArm = false; while (tempObj) { if (tempObj.name === 'arm') { isArm = true; break; } tempObj = tempObj.parent; } activeName = isArm ? "arm" : "turret"; } else { return; } isInteracting = true; controls.enabled = false; previousMousePosition = { x: event.clientX, y: event.clientY }; setMode(true); }); renderer.domElement.addEventListener('pointermove', (event) => { if (!isInteracting) return; const deltaX = event.clientX - previousMousePosition.x; const deltaY = event.clientY - previousMousePosition.y; previousMousePosition = { x: event.clientX, y: event.clientY }; if (activeName === "turret") { // 【核心修正】水平方向取反：减去 deltaX targetRawYaw = THREE.MathUtils.clamp(targetRawYaw - deltaX * 10, 0, 4095); sendCommand(`A${Math.round(targetRawYaw)}`); yawSlider.value = targetRawYaw; yawSliderVal.textContent = Math.round(targetRawYaw); } else if (activeName === "arm") { targetRawPitch = THREE.MathUtils.clamp(targetRawPitch - deltaY * 10, PITCH_MIN, PITCH_MAX); sendCommand(`B${Math.round(targetRawPitch)}`); pitchSlider.value = targetRawPitch; pitchSliderVal.textContent = Math.round(targetRawPitch); } }); window.addEventListener('pointerup', () => { if (isInteracting) setMode(false); isInteracting = false; activeName = ""; controls.enabled = true; }); // ================= 4. 渲染算法 ================= function animate() { requestAnimationFrame(animate); controls.update(); const lerpFactor = isInteracting ? 0.5 : 0.2; // 【核心修正】渲染时水平弧度取负 let targetRadYaw = -rawToRad(targetRawYaw); let targetRadPitch = rawToRad(targetRawPitch) + PITCH_OFFSET; let diffYaw = targetRadYaw - jointYaw.rotation.y; diffYaw = Math.atan2(Math.sin(diffYaw), Math.cos(diffYaw)); let diffPitch = targetRadPitch - jointPitch.rotation.x; diffPitch = Math.atan2(Math.sin(diffPitch), Math.cos(diffPitch)); if (Math.abs(diffYaw) > 0.003) { jointYaw.rotation.y += diffYaw * lerpFactor; } if (Math.abs(diffPitch) > 0.003) { jointPitch.rotation.x += diffPitch * lerpFactor; } renderer.render(scene, camera); } animate(); window.addEventListener('resize', () => { camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); renderer.setSize(innerWidth, innerHeight); }); </script> </body> </html>

#include <SCServo.h> SMS_STS st; #define S_RXD 4 #define S_TXD 5 #define SERVO_ID_1 1 #define SERVO_ID_2 2 const int PITCH_MIN = 490; const int PITCH_MAX = 3180; unsigned long lastSendTime = 0; const int sendInterval = 50; void setup() { Serial.begin(115200); Serial1.begin(1000000, SERIAL_8N1, S_RXD, S_TXD); st.pSerial = &Serial1; delay(1000); st.EnableTorque(SERVO_ID_1, 0); st.EnableTorque(SERVO_ID_2, 0); } void loop() { if (Serial.available()) { String line = Serial.readStringUntil('\n'); line.trim(); if (line == "E1") { st.EnableTorque(SERVO_ID_1, 1); st.EnableTorque(SERVO_ID_2, 1); } else if (line == "E0") { st.EnableTorque(SERVO_ID_1, 0); st.EnableTorque(SERVO_ID_2, 0); } else if (line.length() >= 2) { char prefix = line.charAt(0); int value = line.substring(1).toInt(); if (prefix == 'A') { value = constrain(value, 0, 4095); st.WritePosEx(SERVO_ID_1, value, 500, 20); } else if (prefix == 'B') { value = constrain(value, PITCH_MIN, PITCH_MAX); st.WritePosEx(SERVO_ID_2, value, 500, 20); } } } if (millis() - lastSendTime > sendInterval) { lastSendTime = millis(); int pos1 = st.ReadPos(SERVO_ID_1); int pos2 = st.ReadPos(SERVO_ID_2); if (pos1 >= 0 && pos2 >= 0) { Serial.print("A"); Serial.print(pos1); Serial.print(",B"); Serial.println(pos2); } } }