Ask Your Question

How to save 3d plot as rotatable html file

asked 2020-04-20 20:47:57 -0600

al gravatar image

I'm using SAGEMATH in a Jupyter notebook on CoCalc. I have a rotatable 3d image and I want to save it as such.

If I go to (Grey) File/Download as html If I "EXPORT AS HTML" and click this now opens in the browser. Then I can scroll down to a particular 3d plot and click on the download error to the lower right of the image, and thereby take a nice screenshot with the perspective indicated.

What I want to do is save the html file of just this image, not the whole notebook. I know this is possible because I did it a year ago- but forgot to take notes on what worked, and have forgotten how!

Some of my plots I did with threejs and some with the default (not sure what that is). Both work in the same way.

Thanks for any suggestions!

edit retag flag offensive close merge delete


Could you paste the code associated with the 3D image directly into a Sage terminal? That would launch a graphics window like this:

The icon in the bottom right hand corner allows you to save an image directly as html.

RyanG gravatar imageRyanG ( 2020-04-20 21:13:45 -0600 )edit

Thanks RyanG for the suggestion! I am not sure what you mean by "a Sage terminal".

I had installed sagemath on my notebook (a Mac) but it hasn't been working well for a while so I switched to CoCalc.

I thought maybe you meant a SageCell so I pasted my code into a SageCell. This ran fine, and now doing ctrl-click (on a Mac) opens up a menu for Jmol. In CoCalc the menu appeared but was inactive. So that is already really cool: I can produce stereo views, rotate at a constant speed. Also I can Export- say to X3D but I haven't figured that out yet.

There is no icon to save as html.

I then tried pasting the code into a sage notebook instead of a jupyter notebook in CoCal. This is worse: jmol as viewer gives error messages and so I used the default ...(more)

al gravatar imageal ( 2020-04-23 16:48:18 -0600 )edit

PS If I can figure out how to save as html, the next step I want to do is to create a 3d film which I know is possible for molecules in Jmol. I don't know if that is compatible with Sagemath. What I mean by 3D film is a 3d image which can be grabbed and rotated, as the film runs. An example is here under "Animation".

al gravatar imageal ( 2020-04-23 16:53:23 -0600 )edit

PPS a further dream would be to produce rotatable stereo pair views, and also animated...

al gravatar imageal ( 2020-04-23 17:34:17 -0600 )edit

I'm running Sage 9.0 on my MacBook and much of my work involves producing 3D crystal structures (three.js) files which can be saved as HTML (an example being the above link). Maybe update Sage to 9.0 with Homebrew on your Mac?

RyanG gravatar imageRyanG ( 2020-04-24 22:37:32 -0600 )edit

Thanks very much for the sugestion; I will try to reinstall it- it had stopped working at some point!

So you use three.js rather than jmol? Why is that? In my graphic the jmol image turns out better... also, the stereo pairs option is really cool (I use the walleyed view, as I can see that one in 3d by de-focussing my eyes and letting the images join together) and, as I mentioned, I see that poeple have successfully made 3d-animations using jmol.

al gravatar imageal ( 2020-04-25 13:44:50 -0600 )edit

Fantastic, it worked!!! On CoCalc there is an option to create a Sagemath notebook with version 9.0. So I pasted the code in there, with three.js viewer, and could save the 3d- html file!!!

Thanks again!

(I would still like to be able to do this with jmol, but that gives an error also with Sage 9.0. So if jmol could be made to work there, OR if jmol in the Jupyter notebook could be made to run better- so the menu works, as it does on SageCell, and so it is possible to save the 3d- html.... OR if all this could work on SageCell...)

al gravatar imageal ( 2020-04-25 15:06:16 -0600 )edit

I actually coded my own framework for viewing/manipulating molecular structures with Python/Sage. I've never used Jmol at all but I wouldn't be opposed to it. I'm glad it worked for you!

RyanG gravatar imageRyanG ( 2020-04-25 19:03:47 -0600 )edit

I included another tip as an answer. I was having trouble pasting the code as a comment

RyanG gravatar imageRyanG ( 2020-04-25 19:15:23 -0600 )edit

1 answer

Sort by ยป oldest newest most voted

answered 2020-04-25 19:14:44 -0600

RyanG gravatar image

Running the code with a Sage notebook appears to have fixed the issue. Note that if you have want to view the HTML files on a different computer or host them on a website etc, make sure you update the the following code HTML in your three.js file:

Original file HTML (lines 21-24)

<script src="/Applications/SageMath/local/share/threejs/build/three.min.js"></script>
<script src="/Applications/SageMath/local/share/threejs/examples/js/controls/OrbitControls.js"></script>

Updated HTML:

<script src=""></script>
<script src=""></script>
edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account.

Add Answer

Question Tools

1 follower


Asked: 2020-04-20 20:47:57 -0600

Seen: 289 times

Last updated: Apr 25