前言介紹
- 這款 WordPress 外掛「ThreeWP」是 2024-09-23 上架。
- 目前有 200 個安裝啟用數。
- 上一次更新是 2025-12-20，距離現在已有 68 天。
- 外掛最低要求 WordPress 5.4 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
- 有 2 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
rondevs |
外掛標籤
webgl | three.js | 3D graphics | WordPress 3D | visualization |
內容簡介
綜合介紹：ThreeWP 是一個 WordPress 外掛，將 Three.js 庫及其附加組件集成到您的 WordPress 網站中，使用自定義捆綁文件。這個設置讓您可以直接在您的 WordPress 主題或自定義 JavaScript 代碼中創建和管理自定義的 3D 模型、動畫和互動圖形。
問題與答案：
1. ThreeWP 是一個什麼樣的 WordPress 外掛？
- ThreeWP 是一個將 Three.js 庫和其附加組件集成到 WordPress 網站中的外掛。
2. 如何透過 ThreeWP 創建和管理自定義的 3D 模型、動畫和互動圖形？
- 使用 ThreeWP，您可以直接在 WordPress 主題或自定義 JavaScript 代碼中進行上述操作。
3. 在使用 ThreeWP 的過程中，有哪些功能是其具備的？
- 自定義捆綁集成、簡單安裝設置、自定義集成功能。
4. ThreeWP 的 JavaScript 捆綁文件的原始碼可以在哪裡找到？
- ThreeWP 的 JavaScript 捆綁文件的原始碼在以下 URL 可以公開獲取：https://github.com/rondevs/threejs-custom-bundler。
原文外掛簡介
ThreeWP is a WordPress plugin that integrates the Three.js library and its addons into your WordPress site using a custom bundle file. This setup allows you to create and manage custom 3D models, animations, and interactive graphics directly within your WordPress theme or custom JavaScript code.
Features
Custom Bundle Integration: Enqueues the Three.js library and essential addons using a custom bundle file, avoiding reliance on a CDN.
Easy Setup: Straightforward installation and activation process.
Custom Integration: No built-in shortcodes or settings; users add their own Three.js code for full customization.
Source Code
The source code for the minified JavaScript bundle file used in this plugin is publicly available at the following URL: https://github.com/rondevs/threejs-custom-bundler
Usage
After activating the plugin, Use the [use_threewp] shortcode to enable Three.js for specific pages. Three.js and its addons will be available for use in your theme or custom JavaScript files. You need to manually add your Three.js code to create and manage 3D content.
Example Usage
Add Custom JavaScript:
– Add your Three.js initialization and rendering code to your theme’s JavaScript file or use a custom script. Here’s a basic example:
document.addEventListener('DOMContentLoaded', function () {
if (typeof ThreeWP !== 'undefined') {
// Destructure THREE and THREE_ADDONS from ThreeWP
const { THREE, OrbitControls } = ThreeWP;
// Create a scene
const scene = new THREE.Scene();
// Setup a camera
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000,
);
// Setup a renderer
const renderer = new THREE.WebGLRenderer();
// Give the renderer a width and height
renderer.setSize(window.innerWidth, window.innerHeight);
// Append the renderer into the html body
document.body.appendChild(renderer.domElement);
// Set camera position
camera.position.z = 2;
// Load a texture
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load(
'https://threejsfundamentals.org/threejs/resources/images/wall.jpg',
); // Replace with your image URL
// Create geometry
const geometry = new THREE.BoxGeometry(1, 1, 1);
// Create material
const material = new THREE.MeshStandardMaterial({ map: texture });
// Combine into mesh
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
const light = new THREE.AmbientLight(0xffffff);
scene.add(light);
// Set up OrbitControls
const controls = new OrbitControls(
camera,
renderer.domElement,
);
// Optional: Adjust controls settings (e.g., damping, auto-rotation)
controls.enableDamping = true; // Adds smoothness when dragging
controls.dampingFactor = 0.03;
controls.autoRotate = true;
controls.autoRotateSpeed = 2;
function animate(t = 0) {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
// Responsive
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
} else {
console.error('Three.js could not be loaded.');
}
});
NOTE: Destructure THREE and the addons to access from ThreeWP bundle.
Tips
Responsive Design: Adjust the size of the Three.js container or renderer according to your design requirements. Handle window resizing events to keep the 3D content responsive.
Documentation: Refer to the Three.js documentation for detailed information on creating more complex scenes, objects, and animations.
Available Tools in This Plugin
THREE
Addons:
ArcballControls
BufferGeometryUtils
CameraUtils
CCDIKSolver
ConvexGeometry
ConvexH
CSS2DRenderer
CSS3DRenderer
DecalGeometry
DRACOLoader
DragControls
EdgeSplitModifier
EffectComposer
FirstPersonControls
FlyControls
FontLoader
GLTFLoader
KTX2Loader
LDrawLoader
Lensflare
LensflareElement
LightProbeGenerator
LightProbeHelper
Lut
LUT3dlLoader
LUTCubeLoader
MapControls
MeshSurfaceSampler
MMDAnimationHelper
MMDLoader
MMDPhysics
MTLLoader
OBB
OBJLoader
OrbitControls
ParametricGeometry
PCDLoader
PDBLoader
PointerLockControls
PositionalAudioHelper
RectAreaLightHelper
Rhino3dmLoader
SceneUtils
SDFGeometryGenerator
SkeletonUtils
Sky
SVGLoader
SVGRenderer
TeapotGeometry
TextGeometry
TGALoader
Timer
TrackballControls
TransformControls
VertexNormalsHelper
VertexTangentsHelper
XREstimatedLight
v2.0.2
Updated custom bundle file.
Removed external dependencies from the bundle.
Introduced shortcode [use_threewp] to load the Three.js bundle script only on pages that contain the shortcode.
2.0.1
Added defer attribute to the Three.js script for improved performance and load times.
Updated plugin code for better compatibility with modern browsers.
2.0.0
*Introduced custom bundle file integration for Three.js and essential addons like OrbitControls, GLTFLoader, EffectComposer, and BloomPass etc.
*This version enhances the plugin’s capabilities and provides a more comprehensive setup for integrating Three.js with WordPress.
1.1.0
Added Three.js Addons Support with CDN
1.0.0
Initial release of the Three.js CDN Integration plugin.
Contributing
We welcome contributions to improve this plugin. If you have suggestions, bug reports, or feature requests, please open an issue on https://github.com/rondevs/threewp/issues.
License
This plugin is licensed under the GPLv2 or later. See the LICENSE file for details.
Support
If you encounter any issues or need assistance, please reach out via https://github.com/rondevs/threewp/issues.
Thank you for using ThreeWP! We hope it enhances your WordPress site with exciting 3D content.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「ThreeWP」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
Elements Hive for Breakdance 》Elements Hive for Breakdance 是一個 Breakdance 外掛，需要 Breakdance 才能運作。, 使用 Elements Hive 的獨特元素和擴展，強化你的 Breakdance 網站建構...。
Threepress 》輕鬆地在 WordPress 中嵌入 three.js, 您可以做什麼：, 在任何地方創建 three.js 圖庫, 使用 Threepress 管理員中的短代碼生成器創建圖庫，然後將短代碼貼到...。
WP3D Model Import Viewer 》<h2>總結：</h2>, <p>WP3D Model Import 是一個提供3D模型整合功能的 WordPress 外掛，讓您輕鬆將3D模型上傳至媒體庫中，並以直觀的界面展...。
Easy 3d Model Viewer 》總結文案: 這款 WordPress 外掛提供了展示真實3D模型的功能，支援顯示真實渲染效果（光源、環境貼圖和陰影），添加帶有工具提示和信息窗口的標記，控制動畫，...。
Code Three 3D Interactive 》**外掛總結:** Code 3 讓您能夠使用簡單的短代碼將多個物件、互動式 3D 場景嵌入您的 WordPress 網站中。, , #### 問題與解答:, 1. Code 3 是用來做什麼的？,...。
Xtrad Viewer 》Xtra Viewer WordPress 外掛可讓您在 WordPress 頁面上編輯和顯示 3D 情景。, 一個 3D 情景可以是任何東西，從簡單的 3D 文字標題、真正的 3D Slider 或完整...。
Three Viewer 》Three Viewer 提供一個免費且簡單的解決方案，讓您可以在您的網站上視覺化任何 3D 模型，, 使用 Three Viewer 編輯器，您可以輕鬆編輯並添加燈光或地面物件等...。
Sphere Manager 》外掛, , 可放置標籤：文字、圖片、HTML 代碼, 若要匯入圖片和影片，你必須先將它們上傳到 WordPress 的媒體庫中(也可以貼上 URL)。外掛程式將在你上傳到媒體...。
3D Scene Viewer 》3D場景查看器插件可讓您從3D模型文件中創建一個3D場景。, 支援的文件類型, , glTF v2： .gltf或二進位 .glb。, FBX v6400或更新版本（二進位）。, , 該插件支...。
Three Importer 》```html, <ul>, <li>Three Importer 允許使用者透過區塊編輯器、短代碼或自訂腳本插入自訂的 ThreeJS 場景，從沒有經驗的人到老練的開發者皆可...。
Three Code – Canvas Embed for Three.js 》總結：<br>, 這個外掛可以透過短代碼嵌入自訂的 Three.js 场景。它是第三方插件，並非 Three.js 項目的一部分。請記住 Three.js 是其各自所有者的商標...。
Edel Museum Generator 》網站 Edel Museum Generator 讓您輕鬆在 WordPress 網站上建立高品質的 3D 虛擬博物館和畫廊。, 使用 Three.js 技術，提供流暢、身臨其境的「第一人稱射擊」(...。
EAI – Elementor Animation Interactive 》<!DOCTYPE html>, <html>, <body>, , <h2>WordPress 外掛介紹:</h2>, <p>透過令人驚豔的 ThreeJS 動畫增強 Elementor。...。