Controlling 3D robotic arm with Arduino and Three.js

IoT3-DOF Robotic Arm Control with Arduinoe Lifespan

In today’s world of robotics, combining hardware and software to create interactive systems is more accessible than ever. One exciting project is controlling a 3D robotic arm using Arduino and the Three.js library. In this blog post, we’ll explore how to create a 3-DOF (Degree of Freedom) robotic arm controlled by a potentiometer and a joystick. We'll also delve into how the Three.js library can simulate the movement of the arm in 3D space on a web interface, providing a real-time visual representation of the robotic arm’s movements.

A 3-DOF robotic arm has three axes of movement, which correspond to the base, shoulder, and elbow of the arm. In our project, the robotic arm's position will be controlled using the following:

1. Potentiometer for controlling the base rotation.
2. Joystick for controlling the shoulder and elbow angles.
3. A reset button to return the arm to its default position.

This setup is both simple and effective for controlling a small-scale robotic arm using low-cost components like Arduino, a potentiometer, and a joystick.

How the Code Works

The following code controls the 3-DOF robotic arm by reading inputs from a potentiometer and joystick, sending angle values to an HTML interface, and using the Three.js library to render the movement in 3D space.

  // Pin definitions
#define POT_PIN A0      // Base control potentiometer
#define JOYSTICK_X A1   // Joystick X-axis for shoulder
#define JOYSTICK_Y A2   // Joystick Y-axis for elbow (corrected typo)
#define JOYSTICK_BTN 2  // Joystick push button pin

// Variables to store angles
int baseAngle = 120;     // Initial position 120 degrees
int shoulderAngle = 50;  // Initial position 50 degrees
int elbowAngle = 85;     // Initial position 85 degrees

// Button debounce variables
unsigned long lastButtonPress = 0;
const int debounceDelay = 50;

// Timing variables
unsigned long lastSend = 0;
const unsigned long SEND_INTERVAL = 50; // Send every 50ms

void setup() {
    Serial.begin(115200);  // Start USB Serial communication
    
    // Initialize pins
    pinMode(POT_PIN, INPUT);
    pinMode(JOYSTICK_X, INPUT);
    pinMode(JOYSTICK_Y, INPUT);
    pinMode(JOYSTICK_BTN, INPUT_PULLUP);  // Button uses internal pullup
}

void loop() {
    // Check reset button (active LOW because of INPUT_PULLUP)
    if (digitalRead(JOYSTICK_BTN) == LOW) {
        if ((millis() - lastButtonPress) > debounceDelay) {
            // Reset to initial positions
            baseAngle = 120;
            shoulderAngle = 50;
            elbowAngle = 85;
            lastButtonPress = millis();
        }
    }
    
    // Read potentiometer for base control (0-1023 to -180 to 180 degrees)
    int newBase = map(analogRead(POT_PIN), 0, 1023, -180, 180);
    baseAngle = newBase;  // Base movement can be direct
    
    // Read joystick values
    int joyX = map(analogRead(JOYSTICK_X), 0, 1023, -45, 135);
    shoulderAngle = joyX;
    int joyY = map(analogRead(JOYSTICK_Y), 0, 1023, 0, 135); 
    elbowAngle = joyY;
    
    // Send data at fixed interval
    if (millis() - lastSend >= SEND_INTERVAL) {
        Serial.print("DATA:");  // Prefix required by HTML code
        Serial.print(baseAngle);
        Serial.print(",");
        Serial.print(shoulderAngle);
        Serial.print(",");
        Serial.println(elbowAngle);
        lastSend = millis();
    }
}  
  

Key components of the code:

1. Pin Setup: The potentiometer is connected to POT_PIN (A0), and the joystick is connected to JOYSTICK_X (A1) for the shoulder and JOYSTICK_Y (A2) for the elbow.
2. Button Reset: The reset button, connected to JOYSTICK_BTN (pin 2), allows the robotic arm to return to its default position.
3. Data Sending: The code sends the base, shoulder, and elbow angles via serial communication every 50ms.

The key to integrating this with Three.js is sending these angle values to the web interface, which uses JavaScript to update the 3D model of the arm accordingly.

Integrating Arduino with Three.js for 3D Simulation

Now, let’s discuss how to visualize the robotic arm’s movements using Three.js. Three.js is a powerful JavaScript library that enables 3D rendering directly in the browser. By receiving the angle data from the Arduino, you can use Three.js to animate and display the movement of the robotic arm in real-time.

Here’s how you can use Three.js for this project:

1. Receive Serial Data: Create a web-based interface that communicates with the Arduino via WebSerial or WebSockets to receive the angle data for the base, shoulder, and elbow.
2. Update the 3D Model: Use the received angles to rotate the joints of the 3D arm model.
3. Real-Time Feedback: As the user moves the joystick and potentiometer, the arm's movement is reflected in the 3D simulation, providing real-time visual feedback.

By combining Arduino with Three.js, you can create an interactive and visually appealing way to control your robotic arm directly from the browser.

Further Reading and Resources

If you're interested in creating or simulating a 3D robotic arm, there are several useful resources to guide you:

1. For a Joystick-controlled 3-DOF robotic arm, check out our post on Joystick-controlled 3-DOF Robotic Arm.
2. If you'd like to try a 3D robotic arm simulator, take a look at our guide on the 3D Robotic Arm Simulator.
3. For more information on Joystick-controlled DC motors with Arduino, visit Joystick-controlled DC Motor with Arduino and TIP122.
4. If you’re working with motor speed and direction control using a joystick, check out our article on Motor Speed and Direction Control with Joystick and Arduino L298N.

Conclusion

By combining the Arduino microcontroller with the Three.js library, you can build a fully interactive and real-time 3D robotic arm simulation that can be controlled through a potentiometer and a joystick. This project not only teaches the fundamentals of robotics and control systems but also demonstrates how to use web technologies for real-time 3D visualization.

With the power of Arduino, Three.js, and a few basic components, you can create your own 3-DOF robotic arm and simulate its movements in a web browser, making it a great project for both beginners and experienced makers alike.