{"id":2917,"date":"2011-07-22T11:42:11","date_gmt":"2011-07-22T11:42:11","guid":{"rendered":"https:\/\/blogs.mathworks.com\/pick\/2011\/07\/22\/matlab-3d-figure-to-3d-xhtml\/"},"modified":"2011-07-22T11:42:11","modified_gmt":"2011-07-22T11:42:11","slug":"matlab-3d-figure-to-3d-xhtml","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/pick\/2011\/07\/22\/matlab-3d-figure-to-3d-xhtml\/","title":{"rendered":"MATLAB 3D Figure to 3D (X)HTML"},"content":{"rendered":"<div xmlns:mwsh=\"https:\/\/www.mathworks.com\/namespace\/mcode\/v1\/syntaxhighlight.dtd\" class=\"content\">\r\n   <p><a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/31289\">Eric&#8217;s<\/a> pick this week is <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/32207-matlab-3d-figure-to-3d--x-html\">MATLAB 3D Figure to 3D (X)HTML<\/a> by <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/29180\">Dirk-Jan Kroon<\/a>.\r\n   <\/p>\r\n   <p>Dirk-Jan Kroon&#8217;s submission makes it easy to transfer 3D MATLAB plots to an interactive graphic on a web page. The tool doesn&#8217;t\r\n      just translate geometry &#8211; it even includes transparency and lighting effects! You can build a complex scientific visualization\r\n      in MATLAB and share it on your research web page.\r\n   <\/p>\r\n   <p>Dirk-Jan says that the tool currently supports \"Axes, Patch, Line, Surface and Light\" objects. I decided to try this out on\r\n      my favorite 3D model, a human femur bone, and added lighting and material effects for good measure. The model has an interesting\r\n      back story...\r\n   <\/p>\r\n   <p>In grad school I needed an accurate 3D model of a human femur bone for a project. Somehow, I convinced the university med\r\n      school to loan me a real human femur bone! I don&#8217;t know where this thing came from, but I did get a great 3D scan from it.\r\n   <\/p>\r\n   <p>Here's the model in MATLAB:<\/p>\r\n   <p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/femur.png\"> <\/p>\r\n   <p>And here's the model in my web browser, where the resulting visualization supports zoom, pan, and rotate operations:<\/p>\r\n   <p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/femur_web.png\"> <\/p>\r\n   <p>The tool creates both the 3D model as well as a sample web page with the model embedded into it. You can view the page with\r\n      any of these popular web browsers:\r\n   <\/p>\r\n   <div>\r\n      <ul>\r\n         <li><a title=\"http:\/\/windows.microsoft.com\/en-US\/internet-explorer\/products\/ie\/home (link no longer works)\"> Internet Explorer 9<\/a> with  <a title=\"http:\/\/labs.adobe.com\/technologies\/flashplatformruntimes\/flashplayer11\/ (link no longer works)\"> Flash 11<\/a> installed\r\n         <\/li>\r\n         <li><a href=\"http:\/\/www.google.com\/chrome\">Google Chrome 9.x<\/a><\/li>\r\n         <li><a href=\"http:\/\/www.mozilla.com\/firefox\/\">Firefox 4.x<\/a><\/li>\r\n         <li><a href=\"http:\/\/nightly.webkit.org\">WebKit<\/a><\/li>\r\n      <\/ul>\r\n   <\/div>\r\n   <p>The visualization is based on the <a href=\"http:\/\/www.x3dom.org\">x3dom framework<\/a>. Be sure to read the x3dom <a href=\"http:\/\/www.x3dom.org\/?page_id=9\">supported browser<\/a> page if you have difficulties displaying the example that Dirk-Jan provided with his submission. Also, if you have an older\r\n      graphics driver you may need to <a href=\"http:\/\/www.x3dom.org\/?p=1871\">update<\/a> it.\r\n   <\/p>\r\n   <p>Leave us a comment with your thoughts <a href=\"https:\/\/blogs.mathworks.com\/pick\/?p=2917#respond\">here<\/a>, or leave a <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/32207-matlab-3d-figure-to-3d--x-html#comments\">comment<\/a> for Dirk-Jan.\r\n   <\/p><script language=\"JavaScript\">\r\n<!--\r\n\r\n    function grabCode_c800e43c058545f7a9d7ad3eb4756b8b() {\r\n        \/\/ Remember the title so we can use it in the new page\r\n        title = document.title;\r\n\r\n        \/\/ Break up these strings so that their presence\r\n        \/\/ in the Javascript doesn't mess up the search for\r\n        \/\/ the MATLAB code.\r\n        t1='c800e43c058545f7a9d7ad3eb4756b8b ' + '##### ' + 'SOURCE BEGIN' + ' #####';\r\n        t2='##### ' + 'SOURCE END' + ' #####' + ' c800e43c058545f7a9d7ad3eb4756b8b';\r\n    \r\n        b=document.getElementsByTagName('body')[0];\r\n        i1=b.innerHTML.indexOf(t1)+t1.length;\r\n        i2=b.innerHTML.indexOf(t2);\r\n \r\n        code_string = b.innerHTML.substring(i1, i2);\r\n        code_string = code_string.replace(\/REPLACE_WITH_DASH_DASH\/g,'--');\r\n\r\n        \/\/ Use \/x3C\/g instead of the less-than character to avoid errors \r\n        \/\/ in the XML parser.\r\n        \/\/ Use '\\x26#60;' instead of '<' so that the XML parser\r\n        \/\/ doesn't go ahead and substitute the less-than character. \r\n        code_string = code_string.replace(\/\\x3C\/g, '\\x26#60;');\r\n\r\n        author = 'Brett Shoelson';\r\n        copyright = 'Copyright 2011 The MathWorks, Inc.';\r\n\r\n        w = window.open();\r\n        d = w.document;\r\n        d.write('<pre>\\n');\r\n        d.write(code_string);\r\n\r\n        \/\/ Add author and copyright lines at the bottom if specified.\r\n        if ((author.length > 0) || (copyright.length > 0)) {\r\n            d.writeln('');\r\n            d.writeln('%%');\r\n            if (author.length > 0) {\r\n                d.writeln('% _' + author + '_');\r\n            }\r\n            if (copyright.length > 0) {\r\n                d.writeln('% _' + copyright + '_');\r\n            }\r\n        }\r\n\r\n        d.write('<\/pre>\\n');\r\n      \r\n      d.title = title + ' (MATLAB code)';\r\n      d.close();\r\n      }   \r\n      \r\n-->\r\n<\/script><p style=\"text-align: right; font-size: xx-small; font-weight:lighter;   font-style: italic; color: gray\"><br><a href=\"javascript:grabCode_c800e43c058545f7a9d7ad3eb4756b8b()\"><span style=\"font-size: x-small;        font-style: italic;\">Get \r\n            the MATLAB code \r\n            <noscript>(requires JavaScript)<\/noscript><\/span><\/a><br><br>\r\n      Published with MATLAB&reg; 7.12<br><\/p>\r\n<\/div>\r\n<!--\r\nc800e43c058545f7a9d7ad3eb4756b8b ##### SOURCE BEGIN #####\r\n%%\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/31289 Eric\u00e2\u20ac\u2122s>\r\n% pick this week is <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/32207-matlab-3d-figure-to-3d--x-html\r\n% MATLAB 3D Figure to 3D (X)HTML> by\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/29180\r\n% Dirk-Jan Kroon>.\r\n% \r\n% Dirk-Jan Kroon\u00e2\u20ac\u2122s submission makes it easy to transfer 3D MATLAB plots to an\r\n% interactive graphic on a web page. The tool doesn\u00e2\u20ac\u2122t just translate geometry \u00e2\u20ac\u201c\r\n% it even includes transparency and lighting effects! You can build a complex\r\n% scientific visualization in MATLAB and share it on your research web page.\r\n% \r\n% Dirk-Jan says that the tool currently supports \"Axes, Patch, Line, Surface and\r\n% Light\" objects. I decided to try this out on my favorite 3D model, a human\r\n% femur bone, and added lighting and material effects for good measure. The\r\n% model has an interesting back story...\r\n% \r\n% In grad school I needed an accurate 3D model of a human femur bone for a\r\n% project. Somehow, I convinced the university med school to loan me a real\r\n% human femur bone! I don\u00e2\u20ac\u2122t know where this thing came from, but I did get a\r\n% great 3D scan from it.\r\n%\r\n% Here's the model in MATLAB:\r\n% \r\n% <<femur.png>>\r\n%\r\n% And here's the model in my web browser, where the resulting visualization\r\n% supports zoom, pan, and rotate operations:\r\n%\r\n% <<femur_web.png>>\r\n%\r\n% The tool creates both the 3D model as well as a sample web page with the model\r\n% embedded into it. You can view the page with any of these popular web\r\n% browsers:\r\n%\r\n% * <http:\/\/windows.microsoft.com\/en-US\/internet-explorer\/products\/ie\/home \r\n%  Internet Explorer 9> with\r\n%  <http:\/\/labs.adobe.com\/technologies\/flashplatformruntimes\/flashplayer11\/\r\n%  Flash 11> installed\r\n% * <http:\/\/www.google.com\/chrome Google Chrome 9.x>\r\n% * <http:\/\/www.mozilla.com\/firefox\/ Firefox 4.x>\r\n% * <http:\/\/nightly.webkit.org WebKit>\r\n%\r\n% The visualization is based on the <http:\/\/www.x3dom.org x3dom framework>. Be\r\n% sure to read the x3dom <http:\/\/www.x3dom.org\/?page_id=9 supported browser>\r\n% page if you have difficulties displaying the example that Dirk-Jan provided\r\n% with his submission. Also, if you have an older graphics driver you may need\r\n% to <http:\/\/www.x3dom.org\/?p=1871 update> it.\r\n%\r\n% Leave us a comment with your thoughts <https:\/\/blogs.mathworks.com\/pick\/?p=2917#respond here>, or leave a\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/32207-matlab-3d-figure-to-3d--x-html#comments comment>\r\n% for Dirk-Jan.\r\n##### SOURCE END ##### c800e43c058545f7a9d7ad3eb4756b8b\r\n-->","protected":false},"excerpt":{"rendered":"<p>\r\n   Eric&#8217;s pick this week is MATLAB 3D Figure to 3D (X)HTML by Dirk-Jan Kroon.\r\n   \r\n   Dirk-Jan Kroon&#8217;s submission makes it easy to transfer 3D MATLAB plots to an interactive graphic on... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/pick\/2011\/07\/22\/matlab-3d-figure-to-3d-xhtml\/\">read more >><\/a><\/p>","protected":false},"author":36,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[16],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/2917"}],"collection":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/comments?post=2917"}],"version-history":[{"count":0,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/2917\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/media?parent=2917"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/categories?post=2917"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/tags?post=2917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}