Three.js Physics Demo with Real ESC/POS Thermal Printer Output

3D Toilet Paper Generator is an experimental Next.js web application that combines interactive WebGL simulation with real-world ESC/POS thermal printing.

Drag a realistic 3D toilet roll, measure the exact unrolled length in centimeters, and send that value directly to a network thermal printer over TCP.

This project demonstrates how browser-based 3D rendering can integrate with real hardware through a Node.js backend.

How It Works

• Interactive 3D toilet roll built with Three.js and React Three Fiber
• Custom Verlet-based cloth simulation for the hanging paper strip
• Dynamic roll radius calculation based on unrolled distance
• Rapier physics for collisions and movement
• Direct ESC/POS byte commands sent over TCP using Node.js net.Socket
• Automatic feed and cut commands for compatible thermal printers

Tech Stack

• Next.js 16 (App Router)
• React 19
• Tailwind CSS v4
• Three.js
• @react-three/fiber
• @react-three/drei
• @react-three/rapier
• Node.js TCP sockets
• ESC/POS thermal printer protocol

Important: Printing Requirements

Thermal printing requires running the project with a Node.js server.

Web browsers do not support direct TCP socket communication, which means ESC/POS printing cannot work from a static deployment alone.

To enable printing:

• Run the project locally or on a Node-enabled server
• Configure your printer IP address and port (typically 9100)
• Ensure the printer supports raw ESC/POS over TCP

The live demo shows the 3D simulation, but printer output requires server execution.

Why I Built This

What started as a joke became a compact testbed for:

• WebGL physics rendering
• Custom cloth simulation
• Network-based hardware integration
• Raw ESC/POS command generation

It's playful on the surface, but technically it demonstrates a full browser → server → printer workflow.