Wednesday, March 29, 2017

Creating interactive 3D models in your browser with Solvespace

Interactive 3D model

It may be convenient to view a interactive model made in Solvespace using a webbrowser. For instance if you want to share the model with someone who hasn't Solvespace installed. Luckily Solvespace has an option just for this under File -> Export Triangle Mesh. Now in the dialog window select Three.js-compatible mesh with viewer (html). Save the file. An html file is now available that can be viewed in the browser (I only had succes with Firefox, Chrome wouldn't show me the model). The html file created by Solvespace consist for a large part on Javascript and relying on the Three.js Javascript library. All the points, edges and faces of the 3D model are included in this file.

Screenshot of the html file created by Solvespace and opened in the Firefox browser.

When the html file is opened the 3D model can be rotated (left mouse button), moved (right mouse button) and zoomed (scroll wheel). The options are activated by a mouse click in the frame. Clicking on the scroll wheel deactivates these options.

One step further

This can be taken one step further. The model can be integrated in a website. The simplest way is to use the <iframe> tag in html. Below is a simple example where cube.html is the file that has been generated by Solvespace.

<!DOCTYPE html>
<html>
    <head>
    <title>
    This is a cube
    </title>
    </head>
    <body>
        <iframe src="cube.html", height="600", width="800"></iframe>
    </body>
</html>

That's it, the interactive model will show up in the webpage which is a pretty cool Solvespace feature. BTW: I didn't bother demonstrating it in Blogger because I think it's to much of a hassle editing the template.

For this tutorial I used Solvespace 2.3 on OSX.

Solvespace is open source (GPLv3 license) and is available for Window, OSX and Linux. It is developed by Jonathan Westhues and maintained by Whitequark and others. It can be downloaded here: http://solvespace.com/download.pl.

No comments:

Post a Comment