Three Importer

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

Author:	callahancodes (profile at wordpress.org)
WordPress version required:	6.7
WordPress version tested:	6.9.1
Plugin version:	1.0.5
Added to WordPress repository:	15-02-2026
Last updated:	23-02-2026
Rating, %:	0
Rated by:	0
Plugin URI:
Total downloads:	215
Click to start download

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.

Block Support
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.

Shortcode Support
Three Importer allows the exact same functionality from blocks within the [ti3d_scene] shortcode. Developers can also use the [ti3d_sceneinject] shortcode to call project-specific libraries from THREE and use them within custom scripts.

Shortcode Parameters

Geometry Settings

• geometry : Type of 3D shape (default: box).
• geometry_color : Hex color code (default: #000000).
• geometry_material : Three.js material type (default: basic).
• geometry_size : Scaling factor (default: 1).
• geometry_xrotation / yrotation / zrotation : Initial rotation.
• geometry_instancing : Enable instanced rendering (default: false).
• geometry_instancingnum : Total instances (default: 50).
• geometry_instancingspacing : Gap between instances (default: 1).
• gltf_url : URL for external GLTF/GLB models.

Lighting Settings

• light : Light source type (default: ambient).
• light_color : Color of the light (default: #ffffff).
• light_intensity : Brightness (default: 1).
• light_xpos / ypos / zpos : Light coordinates (default: 0).
• light_helper : Toggle visual position guide (default: false).

Camera Settings

• camera_xpos / ypos / zpos : Camera coordinates.
• camera_xtarget / ytarget / ztarget : Camera look-at target.
• camera_followmouse : Enable mouse-tracking (default: false).

Particles & Scene

• scene_background : Background color or transparency (default: none).
• particle_amount : Total particles (default: 1000).
• particle_size : Size of particles (default: 1).
• particle_speed : Movement speed (default: 5).
• particle_direction : Flow direction (default: right).
• particle_color : Particle hex color (default: #000000).
• particle_stretch : Motion stretch factor (default: 5).

Grid & Text

• cubegrid_stretch : Grid stretch amount (default: 120).
• cubegrid_spacing : Distance between grid cubes (default: 1).
• cubegrid_material : Material for the grid (default: phong).
• cubegrid_color : Grid hex color (default: #ffffff).
• trid_text : String of text to render in 3D (default: TI).
• trid_color : Color of 3D text (default: #ffffff).
• trid_size : Depth/Size of 3D text (default: 1).

[ti3d_sceneinject] Available Modules

• Controls: orbitcontrols, flycontrols, firstpersoncontrols, pointerlockcontrols, trackballcontrols
• Loaders: gltfloader, objloader, fbxloader, textureloader, cubetextureloader, dracoloader, rgbeloader
• Post-Processing: effectcomposer, renderpass, unrealbloompass, shaderpass, ssaopass
• Shaders: fxaashader, copyshader, luminosityshader, sobeloperatorshader
• Geometry: boxlinegeometry, convexgeometry, parametricgeometry, teapotgeometry
• Helpers: gridhelper, axeshelper, camerahelper, directionallighthelper
• Misc: animationmixer, gui

[ti3d_sceneinject orbitcontrols axeshelper]

<div class="three-importer-container" id="ti"></div>
<script>
document.addEventListener('three-modules-ready', () => {
    const scene = new THREE.Scene();
    const container = document.getElementById('ti');
    const width = container.clientWidth;
    const height = container.clientHeight;

    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    camera.position.z = 5;

    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(width, height);
    container.appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry(2, 2, 2);
    const material = new THREE.MeshNormalMaterial();
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    if (THREE.AxesHelper) {
        const axesHelper = new THREE.AxesHelper(3);
        scene.add(axesHelper);
    }

    let controls;
    if (THREE.OrbitControls) {
        controls = new THREE.OrbitControls(camera, renderer.domElement);
    }

    function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        if (controls) controls.update();
        renderer.render(scene, camera);
    }

    animate();
});
</script>