外掛說明

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

螢幕擷圖

Editor Page using Block — Sample Page using Block

適用於區塊編輯器

這個外掛提供 1 個可供 Gutenberg/區塊編輯器使用的區塊。

Three Importer Example block scaffolded with Create Block tool.

安裝方式

Download the ZIP folder from the repository.
In your WordPress dashboard, go to Plugins > Add New > Upload Plugin.
Select the ZIP folder and click Install Now.
Activate the plugin.

常見問題集

Why cant I see my Geometry?

Check your Camera Position, Geometry Position, or Geometry Rotation. Ensure the camera position isn’t inside the mesh position.

Why are multiple instances of THREE being imported?

This happens when using multiple TI implementations. Stick to using just blocks or either shortcodes on a single page (avoid mixmatching both TI blocks and TI shortcodes on a single page). This warning shouldn’t break anything, as it’s just a warning, but will slow that page’s loading speed.

How can I use the custom scene inject function?

Place the shortcode [ti3d_sceneinject module1 module2 ...], then add the TI id to a div and your script in a Custom HTML block.

[ti3d_sceneinject orbitcontrols axeshelper]

Example Script:

<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>

使用者評論

這個外掛目前沒有任何使用者評論。

參與者及開發者

以下人員參與了開源軟體〈Three Importer〉的開發相關工作。

callahancodes

將〈Three Importer〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣？

任何人均可瀏覽程式碼、查看 SVN 存放庫，或透過 RSS 訂閱開發記錄。

變更記錄

1.0.0

Initial Release.

1.1.0

Added “None” geometry option for background-focused functionality. Removed non-essential settings when selected to improve UI.
Added orbitcontrols toggle (default = true).
Fixed item justification bug of horizontal-misalignment for block inner content.
Fixed TI Block height adjustment bug; was working in the page editor but not the frontend (block previously stayed at default 400px height).
Changed geometry X/Y/Z rotation to float from int to support more specific rotation speeds.

1.1.1

Added outline to TI Block in editor.
Fixed warning.js not showing warning in editor when TI Blocks are nested within each other.
Attempted fix at incorrect padding and full-width styling.

1.1.2

Added message in editor for disabled Orbit Controls when backgrounds are used to prevent users escaping the background viewpoint.
Added Shader background option.