MarcTV 3D Model Embed Block

外掛說明

Adds a block for interactive 3D models in .glb and .gltf format from the media library.
You can keep interaction limited to horizontal rotation or enable zoom explicitly when needed.

This plugin is being developed on GitHub https://github.com/mtoensing/marctv-3d-model-embed-block

Includes the model-viewer runtime locally:

  • Project: https://modelviewer.dev/
  • Source: https://github.com/google/model-viewer
  • Package: @google/model-viewer
  • Version: 4.2.0
  • Bundled file: public/vendor/model-viewer/4.2.0/model-viewer-umd.min.js
  • License: Apache License 2.0

The bundled file is kept versioned in the plugin and documented alongside the asset.

Source Code and Build Instructions

The generated block assets in build/ are compiled from the human-readable source files in the public development repository:

  • Repository: https://github.com/mtoensing/marctv-3d-model-embed-block
  • Block source: src/
  • Build tooling: package.json
  • Build command: npm install followed by npm run build

適用於區塊編輯器

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

  • 3D Model Embed Block Embeds a GLB or glTF 3D model with interactive mouse and touch controls.

安裝方式

  1. Install and activate the plugin.
  2. Upload a .glb or .gltf file to the media library.
  3. Insert the 3D Model Embed Block block and select the file.

常見問題集

Which file formats are supported?

The block supports 3D models in .glb and .gltf.

Can I enter an external model URL?

Yes. Use the block’s URL input to insert a .glb or .gltf file directly.

Can I enable zoom?

Yes. Turn on Zoom interaction in the block sidebar to enable pinch zoom on touch devices and mouse-wheel zoom on desktop.

使用者評論

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

參與者及開發者

以下人員參與了開源軟體〈MarcTV 3D Model Embed Block〉的開發相關工作。

參與者

將〈MarcTV 3D Model Embed Block〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

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

變更記錄

1.0.0

  • Add polished WordPress.org icon and banner assets for the public plugin launch.
  • Use the plugin slug consistently for public PHP, block, script, CSS, and custom-property names.
  • Document source code and build instructions in the readme.

0.4.5

  • Maintenance release.

0.4.4

  • Add a Zoom interaction toggle to enable zoom when needed while keeping the previous default interaction unchanged.
  • Document optional zoom controls and direct URL insertion in the readme.

0.4.3

  • Add a Framing control that adjusts model-viewer camera distance via the official camera-orbit attribute.

0.4.2

  • Move model selection into the block UI with upload, Media Library, and URL insert flows similar to core media blocks.
  • Fix block width handling so normal, wide, and full alignment follow WordPress layout standards in the editor and frontend.

0.4.1

  • Hide the default model-viewer progress bar via its official progress-bar slot instead of styling around it.

0.4.0

  • Rename the plugin, block, package, and local directory to 3D Model Embed Block.
  • Keep the bundled model-viewer runtime on a versioned vendor path with documented provenance.

0.3.6

  • Move the bundled model-viewer runtime to a versioned vendor path and document its provenance more clearly.

0.3.5

  • Show model load errors in the editor preview only and keep the frontend neutral.

0.3.4

  • Add a clear block-level error message when a model cannot be loaded.
  • Keep the same feedback visible in the editor preview.

0.3.3

  • Change editor UI strings to English source strings for localization.

0.3.2

  • Move the accepted format hint into the block sidebar.
  • Keep editor selection simple and limit frontend interaction to the fixed horizontal axis.

0.3.1

  • Save explicit camera-controls and auto-rotate attributes so the frontend stays interactive after WordPress sanitization.
  • Let the block fill its available width more reliably inside groups and aligned layouts in the editor.

0.3.0

  • Save native block markup instead of relying on editor-side server rendering.
  • Remove the server-side render architecture and keep the block static.

0.2.0

  • Move block source to the standard src and build structure.
  • Add npm build tooling and GitHub Actions similar to the project standard.