All projects
Interactive 3D (Three.js)

Pipe Trekker A-200: 3D viewer

Web-based real-time 3D viewer for the A-200 Pipe Crawler from Pipe Trekker, built with Three.js over two weeks at 3D College Danmark.

Role
3D modelling, animation and web development
Tools
  • Three.js
  • Claude Code
  • Blender
Technology
HTML / CSS / JavaScript
Format
Interactive, runs live in the browser
Interactive 3D, running live in the browser Open in new window
How to use the demo
  • Lower and raise the arm
  • Tilt the camera head up and down
  • Turn the camera head 360°
  • Switch between fixed camera angles
  • Drag to rotate the camera
  • Scroll the mouse wheel or pinch with two fingers to zoom
  • Show info points, and hover over a point to highlight the part
  • Use Reset to put the robot and the camera back

About the demo

During my 6th school period at 3D College Danmark I made a web-based real-time 3D viewer for the A-200 Pipe Crawler drone from Pipe Trekker, a company under Deep Trekker Inc. The project was a small proof of concept and my first attempt at combining 3D modelling with interactive web development.

Workflow

The project took two weeks. In the first week I modelled and animated the Pipe Crawler drone and optimised the geometry and materials so the model could run in the browser. Each movement is on its own animation layer, an NLA track in Blender, so the code can find and play them separately. In the second week I built the website and the JavaScript logic that controls the viewer and the interaction.

Reflection

The project was far from perfect. The last days of the second week went on fine-tuning, performance optimisation and debugging. I learned how 3D modelling, animation and web development can be brought together in one workflow, and that AI can make the code when I set the direction and check the result.

Tools and technologies

I used Three.js for the 3D rendering and the interactive controls together with HTML, CSS and JavaScript. The code was made with Claude Code, which I directed, and I reviewed and corrected it along the way, so the viewer only does what the project needed.

Sources