Three JS Gutenberg Block

Written by: David Arnado

This custom Gutenberg block uses Three.js to generate a rotating 3D Geometric Shape. The frontend controls modify the camera position, the field of view, the near value, the geometric shape, and the wireframe status through the Interactivity API. The Interactivity API was released as a public API in WordPress 6.5.

I decided to used the Interactivity API to simplify the process of managing events. This API also helped me to reduce the number of instances where standard DOM manipulating methods are used (like querySelector).

This demo block uses some of the basic Geometries included in Three.js, however, with some additional work, it’s possible to add textures and create more complex blocks.

You can check the complete source code in my github repository.

Demo Block