A Prototype for a 3D Frame Block

Embedding 3D and WebXR scenes in WordPress.

When I added the scenes 3D Scenes section to my website, I wrote a simple WordPress shortcode that would render an iframe with support for immersive content. It was enough to get the feature rolled out, but it wasn’t ideal. I had to remember the exact name and attributes of the shortcode for every scene post I added.

An example of the shortcode to add Lab 051.

[canLabFrame scene_url="https://radical-canvatorium.vercel.app/labs/lab051"]

The shortcode rendered an iframe using the scene_url value and added some attributes to support embedded WebXR scenes. I learned how to do this from this article a few years ago. The key is allow=”xr-spatial-tracking” on the iframe.

This morning I created a prototype of a WordPress Block that will do the same thing, with a few enhancements.

When making a new scene post, I can select the RAD 3D Frame block instead of typing in the shortcode. The block has a few settings:

• URL for the scene
• Aspect ratio: I added a few to start: 16×9, 4×3, and 1×1
• Show New Tab Link
• New tab Link Text

I recorded a short demo of using the block.

I’m thinking about making a WordPress plugin that contains this block and a few other tools for working with 3D content in WordPress. If that is something you are interested in, please let me know.