Linux 软件免费装

在这里免费安装WordPress以及其他软件

Banner图

Three Importer

开发者 callahancodes
更新时间 2026年2月17日 23:57
PHP版本: 5.0 及以上
WordPress版本: 6.9
版权: GPL-2.0-or-later
版权网址: 版权信息

标签

3d animation graphics webgl threejs

下载

1.0.0 1.0.1 1.0.2 1.0.3

详情介绍:

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.

安装:

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

屏幕截图:

  • Editor Page using Block
  • Sample Page using [ti3d_scene] shortcode
  • Editor Page using [ti3d_scene] shortcode
  • Sample Page using [ti3d_sceneinject] shortcode
  • Editor Page using [ti3d_sceneinject] shortcode

常见问题:

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: ` 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(); }); `

更新日志:

1.0.0