Thomas Capricelli

Introduction

Among a huge list of great features, KiCad allows to display the PCB in 3D, even with components and such. This is extremely useful while routing.

This post is about providing the same functionnality, but on a web page. This has no real usefulness, but it adds a huge wow ! effect to your project webpage. This looks like this, but in a more interactive way:

You can see a live example for one of my projects, sygeco 1, You can move around, zoom in/out, and have it rotate. Or not. And it works from my android browser, too 🙂

Acknowledgement

First of all, I must cite the original work i’m basing this upon: for years, the only example I could find online what this project. It works, but is not easy to reproduce. This post is about documenting the process and making it more general.

Overview and Download

The previous repository contains a lot of uneeded files, maybe some leftover from previous tests. Like all icezum files or some javascript files. What you really need is:

• four javascript files: OrbitControls.js; three.js; VRMLLoader.js; WebGL.js. You can put them wherever you want, but you need to fix the paths in the html file.
• one html file
• a proper VRML export of your PCB from KiCad. This is a file ending with “.wrl”.

I grouped the javascript files and a HTML template in a zip archive, that you can download here.

Step-by-step instructions

Let’s start by exporting your PCB into a VRML file. For that, open your project in KiCad PCB editor, and then goes in menu File>Export>VRML...

Two important settings need to be verified, and their default values are not what we want.

• in “Coordinate Origin Options”, select “Board center origin”: otherwise your model will be displayed completely displaced.
• uncheck the “Copy 3D model files to 3D model path”: it creates one big VRML with all components build-in, instead of copying components VRML files and referencing them from the main VRML. Effectively creating a self-contained file.

Modify the HTML file. In my zip archive, the file is a kind of minimal template. You need to at least change the following:

• title, on second line, replacing My Awesome project - PCB 3D view
• change the path of the VRML file, replacing “myawesomeproject.wrl” (around line 153, but use the search function of your editor). Of course you can do more complicated, but if you put the VRML file next to the HTML file, the path is just the name of the file exported by KiCad.
• fix the paths for the four javascript files. Those are the lines starting with <script src="/js/three.js"></script>, around line 44.

With all of that settled, you can go and try. If it doesn’t work right away, the most probable reason is that your javascript paths are wrong.

This is the minimal setting. You can of course do a lot more, like personalizing the html page content and look, or adding more controls.