前言介紹
- 這款 WordPress 外掛「ThreeWP」是 2024-09-23 上架。
- 目前有 100 個安裝啟用數。
- 上一次更新是 2024-09-27，距離現在已有 219 天。
- 外掛最低要求 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 環境。
延伸相關外掛（你可能也想知道）
Visualizer: Tables and Charts Manager for WordPress 》Visualizer: Tables and Charts for WordPress 是一個功能強大且易於使用的外掛，可用於在 WordPress 文章和頁面中創建、管理和嵌入互動式、響應式圖表和表格...。
Chartify – WordPress Chart Plugin 》WordPress 圖表外掛, , 高級版圖表外掛, 圖表外掛展示, 圖表外掛文件, , WordPress 圖表外掛 可建立靜態與動態圖表、圖形和圖表，以提升您的 WordPress 網站...。
Wp-D3 》D3.js 是一個基於資料操控文件的 JavaScript 函式庫。D3 可幫助您使用 HTML、SVG 和 CSS 將資料呈現在網頁上。D3 強調遵循網路標準，讓您擁有現代瀏覽器的所...。
UberChart – WordPress Chart Plugin 》UberChart 是將 Chart.js 庫所包含的無限定制功能帶給 WordPress 的外掛程式。每個圖表有 240 個自訂選項和每個資料集有 30 個選項，非常適合想要自訂每個圖...。
WaveSurfer-WP 》本外掛可將預設的WordPress音訊播放器替換為可顯示音頻波形的播放器。它可以顯示不同音頻頻道的混音（用於播客、廣播重播、電子學習、音樂等），或同時顯示所...。
everviz – Charts, Maps and Tables – Interactive and responsive 》everviz 是一個數據可視化工具，可以幫助您創建互動式圖表、地圖等，而無需編碼。, , 全球的新聞機構、傳訊團隊、政府、學生和研究人員都可以使用這個...。
WP SIMILE Timeline 》此外掛將SIMILE Timeline整合到 WordPress 並提供不同時間軸設定選項的介面。, Timeline 是由 SIMILE Labs 開發的網頁小工具，用於呈現時間資料。, 功能特色...。
Wallnament 》Wallnament 是一個工具，利用擴增實境技術讓您的客戶在自己的空間中可視化您的藝術作品。, 此外掛程式簡化並引導您完成小工具的安裝程序，該小工具是一個按鈕...。
VividWorks 3D E-Commerce Configurator 》將您的VividWorks 3D電子商務配置器帳戶整合至任何WooCommerce商店。, 為您的產品賦予生命，讓您的客戶完整地在三維環境中體驗您產品的所有細節。在線上啟用...。
Tally Graph 》o your WordPress post editor to use the Tally Graph plugin. This plugin allows you to plot custom numeric data over time using the Google Chart API...。
Data Visualizer 》想要在幾秒鐘內將資料視覺化嗎？請使用這個外掛。您可以透過簡單的短代碼輕鬆地視覺化資料，例如：[visualize type=’barchart’ file=’http...。
Data Diagrams: Visual Chart Editor for WordPress 》### 總結文案：, Data-Diagrams 是一個網頁入口，可以輕鬆地創建基於數據驅動的 SVG 圖表，無需任何編程技能。所有內容都是透過簡單的圖形用戶界面定義的。設...。
UVisualize! 》為您的文章和媒體創造一個視覺化的故事！, 創建播放清單, 使用播放清單工具按您選擇的順序創建內容集合，包括音頻、視頻、圖像和文字 - 或者全部都包括！, 講...。
spoonacular recipe visualizer 》如果您想要開始一個美食部落格，這款外掛就是為您而設計。這個外掛允許食譜作者使用三個小工具來增強他們的食譜：, , 成分視覺化工具可使成分列表更具吸引力...。
Map Visualizer 》地圖可視化程式可以讓使用者匯入 CSV 檔案並使用外掛程式的介面製作出一個地圖。, 當您成功匯入（或建立）一個資料來源後，您可以在地圖上視覺化它並且透過簡...。