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.

callahancodes

<p>Three Importer allows users to insert custom ThreeJS scenes which can be implemented via Block editor, shortcode, or custom script injection. This allows people with little-to-no coding experience to well-seasoned developers to create beautiful, 3D scenes with full control over the settings.</p>
<p><strong>Block Support</strong><br />
Three Importer has full support with the official WordPress Block Editor. Simply type and select “/Three Importer” in your page editor and you’ll see the 3D render notice for the public view.</p>
<p><strong>Shortcode Support</strong><br />
Three Importer allows the exact same functionality from blocks within the <code>[ti3d_scene]</code> shortcode. Developers can also use the <code>[ti3d_sceneinject]</code> shortcode to call project-specific libraries from THREE and use them within custom scripts.</p>
<h3>Shortcode Parameters</h3>
<h4>Geometry Settings</h4>
<ul>
<li><code>geometry</code> : Type of 3D shape (default: box).</li>
<li><code>geometry_color</code> : Hex color code (default: #000000).</li>
<li><code>geometry_material</code> : Three.js material type (default: basic).</li>
<li><code>geometry_size</code> : Scaling factor (default: 1).</li>
<li><code>geometry_xrotation</code> / <code>yrotation</code> / <code>zrotation</code> : Initial rotation.</li>
<li><code>geometry_instancing</code> : Enable instanced rendering (default: false).</li>
<li><code>geometry_instancingnum</code> : Total instances (default: 50).</li>
<li><code>geometry_instancingspacing</code> : Gap between instances (default: 1).</li>
<li><code>gltf_url</code> : URL for external GLTF/GLB models.</li>
</ul>
<h4>Lighting Settings</h4>
<ul>
<li><code>light</code> : Light source type (default: ambient).</li>
<li><code>light_color</code> : Color of the light (default: #ffffff).</li>
<li><code>light_intensity</code> : Brightness (default: 1).</li>
<li><code>light_xpos</code> / <code>ypos</code> / <code>zpos</code> : Light coordinates (default: 0).</li>
<li><code>light_helper</code> : Toggle visual position guide (default: false).</li>
</ul>
<h4>Camera Settings</h4>
<ul>
<li><code>camera_xpos</code> / <code>ypos</code> / <code>zpos</code> : Camera coordinates.</li>
<li><code>camera_xtarget</code> / <code>ytarget</code> / <code>ztarget</code> : Camera look-at target.</li>
<li><code>camera_followmouse</code> : Enable mouse-tracking (default: false).</li>
</ul>
<h4>Particles & Scene</h4>
<ul>
<li><code>scene_background</code> : Background color or transparency (default: none).</li>
<li><code>particle_amount</code> : Total particles (default: 1000).</li>
<li><code>particle_size</code> : Size of particles (default: 1).</li>
<li><code>particle_speed</code> : Movement speed (default: 5).</li>
<li><code>particle_direction</code> : Flow direction (default: right).</li>
<li><code>particle_color</code> : Particle hex color (default: #000000).</li>
<li><code>particle_stretch</code> : Motion stretch factor (default: 5).</li>
</ul>
<h4>Grid & Text</h4>
<ul>
<li><code>cubegrid_stretch</code> : Grid stretch amount (default: 120).</li>
<li><code>cubegrid_spacing</code> : Distance between grid cubes (default: 1).</li>
<li><code>cubegrid_material</code> : Material for the grid (default: phong).</li>
<li><code>cubegrid_color</code> : Grid hex color (default: #ffffff).</li>
<li><code>trid_text</code> : String of text to render in 3D (default: TI).</li>
<li><code>trid_color</code> : Color of 3D text (default: #ffffff).</li>
<li><code>trid_size</code> : Depth/Size of 3D text (default: 1).</li>
</ul>
<h3>[ti3d_sceneinject] Available Modules</h3>
<ul>
<li><strong>Controls:</strong> orbitcontrols, flycontrols, firstpersoncontrols, pointerlockcontrols, trackballcontrols</li>
<li><strong>Loaders:</strong> gltfloader, objloader, fbxloader, textureloader, cubetextureloader, dracoloader, rgbeloader</li>
<li><strong>Post-Processing:</strong> effectcomposer, renderpass, unrealbloompass, shaderpass, ssaopass</li>
<li><strong>Shaders:</strong> fxaashader, copyshader, luminosityshader, sobeloperatorshader</li>
<li><strong>Geometry:</strong> boxlinegeometry, convexgeometry, parametricgeometry, teapotgeometry</li>
<li><strong>Helpers:</strong> gridhelper, axeshelper, camerahelper, directionallighthelper</li>
<li><strong>Misc:</strong> animationmixer, gui</li>
</ul>


Three Importer

A powerful ThreeJS WordPress plugin for creating 3D scenes via blocks, shortcodes, or custom script injection.

Three Code – Canvas Embed for Three.js vs Three Importer