KODNA Network

<p>Embed custom Three.js scenes using shortcodes.<br />
This is a third-party plugin and is not affiliated with the Three.js project.</p>
<h3>Trademark Notice</h3>
<p>Three.js is a trademark of its respective owners.</p>
<h3>Usage</h3>
<p>To embed a saved Three.js scene, use the shortcode:</p>
<p>[three_code id=”default”]</p>
<p>Replace <code>default</code> with the Scene ID you created in the admin screen.</p>
<h3>Optional Three.js Examples</h3>
<p>This plugin is compatible with official Three.js example utilities such as OrbitControls and GLTFLoader.</p>
<p>To comply with WordPress.org guidelines and avoid unnecessary dependencies, these optional utilities are not bundled by default.</p>
<p>Developers may add official, unmodified Three.js example files locally and enqueue them using standard WordPress practices.</p>


Three Code – Canvas Embed for Three.js

Embed custom Three.js canvases via shortcode.

kerryoco

<p>Easily embed <a href="https://threejs.org" rel="nofollow ugc">three.js</a> in <a href="https://github.com/Wordpress/Wordpress" rel="nofollow ugc">WordPress</a></p>
<h3>What you can do:</h3>
<h3>Create three.js galleries anywhere</h3>
<p>Create galleries using the shortcode generator in the Threepress admin, and then paste the shortcode wherever you want – the javascript that renders the shortcodes is loaded on all public pages.</p>
<p>A gallery renders one three.js Scene.</p>
<p>To customize the layout or dimensions of your gallery, use CSS.  An id tag of form <code>#threepress-gallery-[gallery name]</code> is put on the <em>wrapper</em> of the <code><canvas></code> element, or use class <code>.threepress-gallery</code> / <code>.threepress-gallery canvas</code> to target all galleries.</p>
<p>The gallery renderer (three.js object) should adjust to match your given dimensions automatically to prevent skewing or blurring.</p>
<p>If you want to custom code your own gallery, scroll down to ‘javascript devs’.</p>
<h3>Notes</h3>
<p>All models must be in “.glb” format – most 3d programs can export to this.</p>
<p>They are stored in the Media Library like everything else, but can be found easily through the Threepress library, which simply filters for “.glb” extensions.</p>
<h4>For javascript devs:</h4>
<p>All the galleries on a given page will be available in the global variable <code>THREEPRESS</code>, in the <code>galleries</code> property.  See the <code>Gallery</code> class (<code>static/js/ThreepressGallery.js</code>) for insight on interacting with these.</p>


Threepress

3d model gallery uploader and viewer powered by three.js

Three Code – Canvas Embed for Three.js vs Threepress