User Guide: 3D Robotic Arm Simulator with Arduino Serial Control

Overview

This web-based Robotic Arm simulator lets you visualize and control a 3-degree-of-freedom (3-DOF) robotic arm in real time. You can manually move the arm using sliders in the browser, or connect a physical Arduino-based robotic arm via a USB serial port and watch the 3D model mirror the real arm's movements live.

The tool runs entirely in the browser — no installation required.

Interface Layout

The interface is divided into two sections side by side:

Left panel — all controls: joint sliders, reset/grid buttons, end effector position readout, and the Arduino serial connection.
Right panel — the interactive 3D viewport showing the robotic arm.

Section 1: Navigating the 3D Viewport

The 3D viewport shows the robotic arm rendered in real time. You can freely move the camera around the arm to inspect it from any angle.

Action	How to do it
Rotate the view	Left-click and drag
Pan the view	Right-click and drag
Zoom in / out	Scroll wheel

The arm sits on a grid with X (red), Y (green), and Z (blue) axes visible at the origin. These help you orient yourself in 3D space.

Section 2: Joint Sliders

There are three sliders, one for each joint of the arm. Moving a slider rotates that joint and updates the 3D model instantly.

Base Rotation (θ₁)

Range: −180° to +180°
Effect: Rotates the entire arm around the vertical axis, like a turntable. A value of 0° points the arm forward; positive values swing it to one side.

Shoulder Rotation (θ₂)

Range: −90° to +90°
Effect: Tilts the upper arm up or down from the base. Positive values lift the arm upward; negative values push it downward.

Elbow Rotation (θ₃)

Range: −180° to +180°
Effect: Bends the forearm segment relative to the upper arm. Use this to extend or fold the arm.

The current angle for each joint is shown to the right of its slider label, updating as you drag.

Section 3: Buttons

⟳ Reset

Snaps all three joints back to the default starting position: Base 120°, Shoulder 50°, Elbow 85°. Useful if you lose track of the arm's orientation or want to return to a known state.

⊞ Grid

Toggles the floor grid in the 3D viewport on and off. Hide it for a cleaner view of the arm itself, or keep it visible for spatial reference.

Section 4: End Effector Position

Below the buttons you will find a live readout showing the X, Y, and Z coordinates of the end effector — the tip of the arm (where a gripper or tool would attach).

X:  87.3 mm
Y: 142.1 mm
Z:  34.6 mm

These values update every time you move a slider or receive data from the Arduino. Coordinates are in millimetres and are calculated using forward kinematics based on the current joint angles and the arm's link lengths.

Section 5: Arduino Serial Connection

This section lets you link the simulator to a real physical robotic arm controlled by an Arduino. When connected, the 3D model will move to match whatever angles the Arduino is reporting in real time.

Important: This feature requires Google Chrome or Microsoft Edge. Firefox and Safari do not support the Web Serial API.

How to Connect

Plug your Arduino into your computer via USB.
Make sure the Arduino is running firmware that sends serial data in the expected format (see below).
Click Connect to Arduino.
A browser dialog will appear listing available COM ports. Select the one your Arduino is on (e.g. COM3 on Windows, /dev/ttyUSB0 on Linux).
Click Connect in the dialog.
The status indicator will turn green and show Connected to Arduino.

Expected Serial Data Format

The Arduino must send data over serial at 115200 baud in the following format:

DATA:120,50,85

The line must start with DATA:
Followed by three comma-separated numbers representing the Base, Shoulder, and Elbow angles in degrees
Each value should be within the respective slider's valid range

Any line that does not start with DATA: is ignored. This means debug print statements from the Arduino will not cause errors.

Live Serial Data Display

While connected, the last received serial line is shown in the serial data box at the bottom of the control panel. This is useful for verifying the Arduino is sending data correctly.

How to Disconnect

Click the button again — it will now read Disconnect. The connection is cleanly closed and the status indicator will update accordingly.

Troubleshooting Serial Connection

Problem	Likely cause	Fix
No COM ports appear	Arduino not plugged in, or driver missing	Check USB cable; install CH340 or FTDI drivers
Connection fails immediately	Port already in use	Close Arduino IDE Serial Monitor before connecting
Data received but arm doesn't move	Wrong data format	Ensure Arduino sends `DATA:angle1,angle2,angle3\n`
Browser says "not supported"	Wrong browser	Switch to Chrome or Edge

Section 6: Understanding the 3D Model

The robotic arm model consists of the following parts:

Base (dark gray box) — the fixed platform the arm sits on. It does not move.
Joints (green spheres) — the three pivot points of the arm. Each sphere represents one degree of freedom.
Links (blue rectangular bars) — the rigid segments connecting the joints. Link 1 connects the base to the shoulder, Link 2 connects shoulder to elbow, Link 3 extends from the elbow to the end effector.

The arm obeys a simple hierarchical structure: rotating the base joint rotates everything above it; rotating the shoulder joint moves the elbow and end effector; rotating the elbow only moves the forearm and end effector.

Section 7: Tips for Getting the Most Out of the Simulator

Combine slider and viewport interaction. While adjusting sliders, orbit the camera with the mouse to check the arm from multiple angles — this gives you an accurate sense of where the end effector is in 3D space.
Use Reset before connecting Arduino. Starting from the known default position (120°, 50°, 85°) makes it easier to spot any discrepancies between the physical arm and the simulation when you first connect.
Check the end effector readout for reachability. If you are planning motion paths, use the X/Y/Z display to understand the arm's workspace limits before sending commands to the physical robot.
Hide the grid for screenshots. Click the Grid button to remove the grid lines for a cleaner visual when capturing images for documentation.
Verify serial data in the display box first. Before relying on live control, connect the Arduino and watch the serial data box to confirm the data format is correct and the values are within expected ranges.

Quick Reference

Control	What it does
Base slider	Rotates arm horizontally (−180° to 180°)
Shoulder slider	Tilts arm up/down (−90° to 90°)
Elbow slider	Bends forearm (−180° to 180°)
Reset button	Returns arm to 120° / 50° / 85°
Grid button	Toggles floor grid visibility
Connect button	Opens COM port selector for Arduino
End effector readout	Live X/Y/Z position of arm tip in mm
Serial data box	Last raw line received from Arduino