Integrating ThreeJS with WordPress: enqueue

With Threejs in a WordPress theme you can make some pretty impressive animations. It’s also great for playing around with the library because running a local wordpress instance is really easy with tools like Local by Flywheel.

Here are some quick steps on integrating Threejs with a wordpress theme.

Download the library

Download directly from their website or from the github project.

Upload three.js to your theme.

Add three.js to wherever you keep your themes javascript. Alternatively you can add the minified code to your main javascript file.

Enqueue the script in your functions.php

now we need to make a function in our functions.php to use wp_enqueue_script to load the files. The ‘true’ value in the wp_enqueue_script function loads the script in the footer.


function mytheme_threejs_scripts() {
wp_enqueue_script( 'mytheme-threejs', get_template_directory_uri() . '/js/three.js', array(), '', true );
add_action( 'wp_enqueue_scripts', 'mytheme_threejs_scripts' );

Now threejs is successfully integrated.