Now, we were working on integrating Three.js with WordPress to create an efficient and streamlined solution for better page speed and easy management of multiple 3D models being loaded on the website.
The first step is to allow the file types of our 3D models in the WordPress Media Library. By default, 3D file types like FBX are not allowed. If you want to upload your files via FTP or SSH, you can skip this step.
To allow custom file types, I recommend the usage of File Upload Types by WPForms. Once installed and activated, you can search for the file types you need and activate them. For our project, we needed FBX. FBX is supported by a wide variety of 3D modeling programs and is well-supported in Three.js too. Unfortunately, FBX is not in the file types list of the plugin, so we have to add a custom file type by clicking the link below the heading “Add File Upload Types”.
To add FBX we need to input a name, the MIME type, and the extension. For the name, we chose “FBX 3D File”. The MIME type can be retrieved from digipres.com. In our case, it is “application/octet-stream”.
When we try to upload the model again, it works as expected.
There are different ways to add custom scripts to a WordPress site. As we use Elementor for our WordPress sites, we use Elementor’s built-in tool. For development purposes, you can use this code to load Three.js on your website:
Note, that you can change the Three.js version by changing it in the links. In our case, we used version 0.152.0. You can find the newest releases on github.com.
Also, be sure to download all scripts and serve them from your server in a production environment.
To optimize page speed, you should load this script only on pages that use Three.js.
To load a model on a page, we need to use the HTML element of Elementor. On the Three.js examples page, you can find the used script tag by inspecting the website. With a few adoptions, we can use those examples on our Elementor page.
We used this example and made it responsive, by changing the width each time the resize event is triggered. Note, that we added a DIV element as a container for the 3D model. If you add more than one model to a single page, you have to use different IDs for your containers.
When loading our FBX model, we have to set up lighting. Three.js provides a great example of an FBX model with animation. We can use the same approach as before to modify the code to our needs. For the FBX model, though, we added multiple direct lights and one hemisphere light to properly illuminate our object.
Did you enjoy reading this post? If so, we would greatly appreciate it if you could take a moment to share it with your friends and colleagues on social media. Sharing valuable content helps us to spread knowledge and inspire others. Thank you for your support!
Wir haben Ihre Nachricht erhalten und melden uns bei Ihnen.