{"id":4856,"date":"2026-08-29T20:00:37","date_gmt":"2026-08-29T11:00:37","guid":{"rendered":"https:\/\/donguri3.net\/server-tech\/3dcg-showcase-wordpress-2\/"},"modified":"2026-08-29T20:00:38","modified_gmt":"2026-08-29T11:00:38","slug":"3dcg-showcase-wordpress","status":"publish","type":"post","link":"https:\/\/donguri3.net\/en\/server-tech\/wordpress-blog-seo\/3dcg-showcase-wordpress\/","title":{"rendered":"How to Display 3DCG in WordPress"},"content":{"rendered":"<p>Previously, when introducing the <a href=\"https:\/\/donguri3.net\/others\/3dprinted-staple-hook\/\">staple-attached wall hook<\/a>, I embedded a 3DCG model into the article. Embedding 3DCG models in blogs and websites enhances visual appeal and helps capture visitors&#8217; interest. In this article, I will explain the step-by-step process of how to display 3DCG in WordPress.<\/p>\n<div>\n<hr \/>\n<\/div>\n<h2>Prerequisites<\/h2>\n<ul>\n<li>Access permissions to the WordPress dashboard.<\/li>\n<li>A 3DCG model file (.glb format). In this guide, we will use FreeCAD to create it.<\/li>\n<li>Installation of the WordPress plugin &#8220;3D Viewer&#8221;.<\/li>\n<\/ul>\n<div>\n<hr \/>\n<\/div>\n<h2>Installing the 3D Viewer Plugin<\/h2>\n<p>First, install the &#8220;3D Viewer&#8221; plugin in WordPress.<\/p>\n<ol start=\"1\">\n<li>Click &#8220;Plugins &gt; Add New&#8221; from the left menu of the WordPress dashboard.<\/li>\n<li>Type &#8220;3D Viewer&#8221; into the search box, and click the &#8220;Install Now&#8221; button on the plugin displayed in the search results.<br \/>\n<a href=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/3Dviewer.png\"><img decoding=\"async\" class=\"aligncenter wp-image-201 size-full\" src=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/3Dviewer.png\" alt=\"3D Model Viewer\" width=\"582\" height=\"255\" srcset=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/3Dviewer.png 582w, https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/3Dviewer-300x131.png 300w\" sizes=\"(max-width: 582px) 100vw, 582px\" \/><\/a><\/li>\n<li>After installation, click the &#8220;Activate&#8221; button.<\/li>\n<\/ol>\n<div>\n<hr \/>\n<\/div>\n<h2>Creating a .glb File<\/h2>\n<p>To display a 3DCG model, a file in .glb format is required. This time, we will use FreeCAD to create the .glb file.<\/p>\n<ol start=\"1\">\n<li>Create or open a 3D model in FreeCAD.\n<ul>\n<li>Edit and refine the shape as needed.<\/li>\n<li>Check the created model by rotating or zooming in and out.<\/li>\n<\/ul>\n<\/li>\n<li>Select &#8220;Export&#8221; from the File menu.<br \/>\n<a href=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-234407.png\"><img decoding=\"async\" class=\"aligncenter wp-image-202 size-full\" src=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-234407.png\" alt=\"FreeCAD Export\" width=\"551\" height=\"508\" srcset=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-234407.png 551w, https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-234407-300x277.png 300w\" sizes=\"(max-width: 551px) 100vw, 551px\" \/><\/a><\/li>\n<li>Select &#8220;GLB File (.glb)&#8221; as the save format and save the file.<a href=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-234725.png\"><img decoding=\"async\" class=\"aligncenter wp-image-203 size-full\" src=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-234725.png\" alt=\"Exporting the model\" width=\"611\" height=\"122\" srcset=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-234725.png 611w, https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-234725-300x60.png 300w\" sizes=\"(max-width: 611px) 100vw, 611px\" \/><\/a><\/li>\n<\/ol>\n<div>\n<hr \/>\n<\/div>\n<h2>Uploading the .glb File to 3D Viewer<\/h2>\n<p>Next, upload the created .glb file to WordPress and embed it into your blog post.<\/p>\n<ol start=\"1\">\n<li>Click &#8220;3D Viewer&#8221; from the left menu of the WordPress dashboard.<a href=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-234908.png\"><img decoding=\"async\" class=\"aligncenter wp-image-208 size-full\" src=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-234908.png\" alt=\"3D Viewer\" width=\"326\" height=\"215\" srcset=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-234908.png 326w, https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-234908-300x198.png 300w\" sizes=\"(max-width: 326px) 100vw, 326px\" \/><\/a><\/li>\n<li>Click the &#8220;Add New Model&#8221; button.<br \/>\n<a href=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-235259-1.png\"><img decoding=\"async\" class=\"aligncenter wp-image-210 size-full\" src=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-235259-1.png\" alt=\"3D Viewer\" width=\"201\" height=\"41\" \/><\/a><\/li>\n<li>Click &#8220;Choose File&#8221; and select the created .glb file.<a href=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-235102.png\"><img decoding=\"async\" class=\"aligncenter wp-image-206 size-full\" src=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-235102.png\" alt=\"Select model\" width=\"851\" height=\"74\" srcset=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-235102.png 851w, https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-235102-300x26.png 300w, https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-235102-768x67.png 768w\" sizes=\"(max-width: 851px) 100vw, 851px\" \/><\/a><\/li>\n<li>Enter a title and description as needed, and click the &#8220;Save&#8221; button.<br \/>\n<a href=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-235047.png\"><img decoding=\"async\" class=\"aligncenter wp-image-205 size-full\" src=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-235047.png\" alt=\"Title\" width=\"863\" height=\"80\" srcset=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-235047.png 863w, https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-235047-300x28.png 300w, https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-235047-768x71.png 768w\" sizes=\"(max-width: 863px) 100vw, 863px\" \/><\/a><br \/>\n<a href=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-235113.png\"><img decoding=\"async\" class=\"aligncenter wp-image-207 size-full\" src=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-14-235113.png\" alt=\"Save\" width=\"295\" height=\"107\" \/><\/a><\/li>\n<\/ol>\n<div>\n<hr \/>\n<\/div>\n<h2>Inserting the 3DCG Model into the Post<\/h2>\n<p>Here is how to insert the uploaded 3DCG model into the article body when using the Classic Editor.<\/p>\n<ol start=\"1\">\n<li>Copy the shortcode of the created model from the 3D Viewer page.<br \/>\n<a href=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-15-000430.png\"><img decoding=\"async\" class=\"aligncenter wp-image-213 size-full\" src=\"https:\/\/donguri3.net\/wp-content\/uploads\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-12-15-000430.png\" alt=\"Shortcode\" width=\"200\" height=\"117\" \/><\/a><\/li>\n<li>Open the blog post editing screen.<\/li>\n<li>Insert the shortcode in the location where you want to embed it.<\/li>\n<li>Check the preview to make sure it displays correctly.<\/li>\n<\/ol>\n<p>If you are not using the Classic Editor, you can likely add it using the following steps:<\/p>\n<ol start=\"1\">\n<li>Open the blog post editing screen.<\/li>\n<li>Click the plus button (Add block), search for &#8220;3D Viewer&#8221;, and add it.<\/li>\n<li>Select and embed the 3D model you want to display.<\/li>\n<\/ol>\n<div>\n<hr \/>\n<\/div>\n<h2>Publishing<\/h2>\n<p>Finally, publish the article.<\/p>\n<ol start=\"1\">\n<li>Click the &#8220;Preview&#8221; button in the upper right to check how the model works.<br \/>\n[3d_viewer id=192]<\/li>\n<li>If there are no issues, click the &#8220;Publish&#8221; button to make your blog post live.<\/li>\n<\/ol>\n<div>\n<hr \/>\n<\/div>\n<h2>Conclusion<\/h2>\n<p>That covers how to display 3DCG models in WordPress. From creating .glb files using FreeCAD to embedding models via the 3D Viewer plugin, you can easily incorporate 3DCG into your blog. Give it a try!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Previously, when introducing the staple-attached wall hook, I embedded a 3DCG model into the article. Embeddin [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":1078,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"en_US","_original_post":"https:\/\/donguri3.net\/?p=199","footnotes":""},"categories":[1166],"tags":[61,179],"class_list":["post-4856","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-blog-seo","tag-wordpress","tag-179","en-US"],"_links":{"self":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts\/4856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/comments?post=4856"}],"version-history":[{"count":1,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts\/4856\/revisions"}],"predecessor-version":[{"id":4859,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts\/4856\/revisions\/4859"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/media\/1078"}],"wp:attachment":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/media?parent=4856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/categories?post=4856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/tags?post=4856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}