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.<\/p>\n\n
Block Support<\/strong>\nThree 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.<\/p>\n\n Shortcode Support<\/strong>\nThree Importer allows the exact same functionality from blocks within the Check your Camera Position, Geometry Position, or Geometry Rotation. Ensure the camera position isn't inside the mesh position.<\/p><\/dd>\n 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.<\/p><\/dd>\n Place the shortcode Example Script:<\/p>\n\n[ti3d_scene]<\/code> shortcode. Developers can also use the [ti3d_sceneinject]<\/code> shortcode to call project-specific libraries from THREE and use them within custom scripts.<\/p>\n\nShortcode Parameters<\/h3>\n\n
Geometry Settings<\/h4>\n\n
\n
geometry<\/code> : Type of 3D shape (default: box).<\/li>\ngeometry_color<\/code> : Hex color code (default: #000000).<\/li>\ngeometry_material<\/code> : Three.js material type (default: basic).<\/li>\ngeometry_size<\/code> : Scaling factor (default: 1).<\/li>\ngeometry_xrotation<\/code> \/ yrotation<\/code> \/ zrotation<\/code> : Initial rotation.<\/li>\ngeometry_instancing<\/code> : Enable instanced rendering (default: false).<\/li>\ngeometry_instancingnum<\/code> : Total instances (default: 50).<\/li>\ngeometry_instancingspacing<\/code> : Gap between instances (default: 1).<\/li>\ngltf_url<\/code> : URL for external GLTF\/GLB models.<\/li>\n<\/ul>\n\nLighting Settings<\/h4>\n\n
\n
light<\/code> : Light source type (default: ambient).<\/li>\nlight_color<\/code> : Color of the light (default: #ffffff).<\/li>\nlight_intensity<\/code> : Brightness (default: 1).<\/li>\nlight_xpos<\/code> \/ ypos<\/code> \/ zpos<\/code> : Light coordinates (default: 0).<\/li>\nlight_helper<\/code> : Toggle visual position guide (default: false).<\/li>\n<\/ul>\n\nCamera Settings<\/h4>\n\n
\n
camera_xpos<\/code> \/ ypos<\/code> \/ zpos<\/code> : Camera coordinates.<\/li>\ncamera_xtarget<\/code> \/ ytarget<\/code> \/ ztarget<\/code> : Camera look-at target.<\/li>\ncamera_followmouse<\/code> : Enable mouse-tracking (default: false).<\/li>\n<\/ul>\n\nParticles & Scene<\/h4>\n\n
\n
scene_background<\/code> : Background color or transparency (default: none).<\/li>\nparticle_amount<\/code> : Total particles (default: 1000).<\/li>\nparticle_size<\/code> : Size of particles (default: 1).<\/li>\nparticle_speed<\/code> : Movement speed (default: 5).<\/li>\nparticle_direction<\/code> : Flow direction (default: right).<\/li>\nparticle_color<\/code> : Particle hex color (default: #000000).<\/li>\nparticle_stretch<\/code> : Motion stretch factor (default: 5).<\/li>\n<\/ul>\n\nGrid & Text<\/h4>\n\n
\n
cubegrid_stretch<\/code> : Grid stretch amount (default: 120).<\/li>\ncubegrid_spacing<\/code> : Distance between grid cubes (default: 1).<\/li>\ncubegrid_material<\/code> : Material for the grid (default: phong).<\/li>\ncubegrid_color<\/code> : Grid hex color (default: #ffffff).<\/li>\ntrid_text<\/code> : String of text to render in 3D (default: TI).<\/li>\ntrid_color<\/code> : Color of 3D text (default: #ffffff).<\/li>\ntrid_size<\/code> : Depth\/Size of 3D text (default: 1).<\/li>\n<\/ul>\n\n[ti3d_sceneinject] Available Modules<\/h3>\n\n
\n
\n
\n
Why cant I see my Geometry?<\/h3><\/dt>\n
Why are multiple instances of THREE being imported?<\/h3><\/dt>\n
How can I use the custom scene inject function?<\/h3><\/dt>\n
[ti3d_sceneinject module1 module2 ...]<\/code>, then add the TI id to a div and your script in a Custom HTML block.<\/p>\n\n[ti3d_sceneinject orbitcontrols axeshelper]\n<\/code><\/pre>\n\n<div class=\"three-importer-container\" id=\"ti\"><\/div>\n<script>\ndocument.addEventListener('three-modules-ready', () => {\n const scene = new THREE.Scene();\n const container = document.getElementById('ti');\n const width = container.clientWidth;\n const height = container.clientHeight;\n\n const camera = new THREE.PerspectiveCamera(75, width \/ height, 0.1, 1000);\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\n renderer.setSize(width, height);\n container.appendChild(renderer.domElement);\n\n const geometry = new THREE.BoxGeometry(2, 2, 2);\n const material = new THREE.MeshNormalMaterial();\n const cube = new THREE.Mesh(geometry, material);\n scene.add(cube);\n\n if (THREE.AxesHelper) {\n const axesHelper = new THREE.AxesHelper(3);\n scene.add(axesHelper);\n }\n\n let controls;\n if (THREE.OrbitControls) {\n controls = new THREE.OrbitControls(camera, renderer.domElement);\n }\n\n function animate() {\n requestAnimationFrame(animate);\n cube.rotation.x += 0.01;\n cube.rotation.y += 0.01;\n if (controls) controls.update();\n renderer.render(scene, camera);\n }\n\n animate();\n});\n<\/script>\n<\/code><\/pre><\/dd>\n\n<\/dl>\n\n\n1.0.0<\/h4>\n\n
\n