A WordPress website featuring the impressive capabilities of the Three.js JavaScript 3D library

Question

A WordPress website featuring the impressive capabilities of the Three.js JavaScript 3D library

I attempted to integrate the Three.js JavaScript 3D library into my WordPress website by including three.min.js in various parts:

Within the body of a post
```
<script src="/three.min.js"></script>
```

In the footer


<script type='text/javascript' src='/three.min.js'></script>

And in the Pinboard: Theme Functions (functions.php) file


function pinboard_enqueue_scripts() {
wp_register_script('three.min', '/three.min.js', true);
wp_enqueue_script( 'three.min' );
}
add_action( 'wp_enqueue_scripts', 'pinboard_enqueue_scripts' );

Regrettably, the cube from Mr.doob’s page is not displaying on my Cube page.

I would greatly appreciate any assistance with getting Three.js to function correctly on my WordPress site.

Thank you.

wordpress 3d three.js javascript

Answer 1

Answer №1

When it comes to CSS, there's a lot you can do ^^ I personally follow a similar approach on my website . If you need some inspiration, feel free to check it out. In the wordpress theme editor, I made changes to the header file (header.php) to include both the library and script there. I used an absolute URL (yes, I took a shortcut, but you might find a better way with more patience) and added the libraries and script like this:

</head>
<body <?php body_class(); ?>>
    <!-- The additions start here (after head & body in Heaper.php) -->
    <div id="3dcontainer" style="position: fixed; z-index: -1;"></div>
    <div id="page" class="hfeed site">
    <header id="masthead" class="site-header" role="banner" style="overflow: visible;">

    <script src="http://lizkats.com/wp-content/fromGame/three.js"></script>
    <script src="http://lizkats.com/wp-content/fromGame/models/modelMeerkatPoseWeb.js"></script>
<script>

        var container, stats;

        var camera, scene, renderer, objects;

        var clock = new THREE.Clock();


        function init() {

            container = document.getElementById('3dcontainer');

            camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.5, 200 );
            camera.position.set( 0.4, 0.42, 0.9 );

            scene = new THREE.Scene();

            // ...

            // Renderer

            renderer = new THREE.WebGLRenderer( { alpha: true } );
            renderer.setClearColor( 0x453326, 1);
            renderer.setSize( window.innerWidth, window.innerHeight);

            container.appendChild( renderer.domElement );

            animate();
        }

        init();

        function animate() {

            requestAnimationFrame( animate );


            render();
        }

        function render() {

            var delta = clock.getDelta();

            renderer.render( scene, camera );
        }
</script>

The 3dcontainer is where I place the canvas object.

Additionally, don't forget to update your style.css to get the desired look. Here's a link to my current stylesheet for reference: http://pastebin.com/9uUiAZhY

Best of luck!

Answer 2

When it comes to CSS, there's a lot you can do ^^ I personally follow a similar approach on my website . If you need some inspiration, feel free to check it out. In the wordpress theme editor, I made changes to the header file (header.php) to include both the library and script there. I used an absolute URL (yes, I took a shortcut, but you might find a better way with more patience) and added the libraries and script like this:

</head>
<body <?php body_class(); ?>>
    <!-- The additions start here (after head & body in Heaper.php) -->
    <div id="3dcontainer" style="position: fixed; z-index: -1;"></div>
    <div id="page" class="hfeed site">
    <header id="masthead" class="site-header" role="banner" style="overflow: visible;">

    <script src="http://lizkats.com/wp-content/fromGame/three.js"></script>
    <script src="http://lizkats.com/wp-content/fromGame/models/modelMeerkatPoseWeb.js"></script>
<script>

        var container, stats;

        var camera, scene, renderer, objects;

        var clock = new THREE.Clock();


        function init() {

            container = document.getElementById('3dcontainer');

            camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.5, 200 );
            camera.position.set( 0.4, 0.42, 0.9 );

            scene = new THREE.Scene();

            // ...

            // Renderer

            renderer = new THREE.WebGLRenderer( { alpha: true } );
            renderer.setClearColor( 0x453326, 1);
            renderer.setSize( window.innerWidth, window.innerHeight);

            container.appendChild( renderer.domElement );

            animate();
        }

        init();

        function animate() {

            requestAnimationFrame( animate );


            render();
        }

        function render() {

            var delta = clock.getDelta();

            renderer.render( scene, camera );
        }
</script>

The 3dcontainer is where I place the canvas object.

Additionally, don't forget to update your style.css to get the desired look. Here's a link to my current stylesheet for reference: http://pastebin.com/9uUiAZhY

Best of luck!

Answer 3

Answer №2

If you're searching for ways to integrate a three.js cube into your Wordpress site, you've come to the right place. Below is a simple guide to help you achieve this without using bundlers like npm:

1. Open your index.php or page.php file based on your Wordpress configuration.

2. Start by importing the three.js library either via CDN or npm:

CDN Method:

<script type="module">
// Locate the latest version at https://cdn.skypack.dev/three.
import * as THREE from 'https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9febf7edfafadfafb1aeaca8b1aa">[email protected]</a>';

const scene = new THREE.Scene();
</script>

If you choose the npm method, run npm install three in your terminal to create the necessary node_modules folder containing the library. Remember that for this tutorial, we won't be bundling the HTML as recommended in the official three.js docs. Enqueue the library in your functions.php file:

wp_enqueue_script( 'three-min', get_template_directory_uri() . '/node_modules/three/build/three.min.js', array(), null, false );

Note that this script should be placed in the <head> section to ensure it runs before any other scripts.

3. Now, let's add a basic cube to your script:

<script type="module">

// Locate the latest version at https://cdn.skypack.dev/three.

import * as THREE from 'https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b5f43594e4e6b1b051a181c051e">[email protected]</a>';

const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            const geometry = new THREE.BoxGeometry();
            const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            const cube = new THREE.Mesh( geometry, material );
            scene.add( cube );

            camera.position.z = 5;

            function animate() {
                requestAnimationFrame( animate );

                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;

                renderer.render( scene, camera );
            };

            animate();


</script>

If using NPM, omit

import * as THREE from 'https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ffbe7fdeaeacfbfa1bebcb8a1ba">[email protected]</a>';

as it's not required due to the UMD import. Keep an eye out for future updates regarding Webpack bundler integration!

Answer 4

If you're searching for ways to integrate a three.js cube into your Wordpress site, you've come to the right place. Below is a simple guide to help you achieve this without using bundlers like npm:

1. Open your index.php or page.php file based on your Wordpress configuration.

2. Start by importing the three.js library either via CDN or npm:

CDN Method:

<script type="module">
// Locate the latest version at https://cdn.skypack.dev/three.
import * as THREE from 'https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9febf7edfafadfafb1aeaca8b1aa">[email protected]</a>';

const scene = new THREE.Scene();
</script>

If you choose the npm method, run npm install three in your terminal to create the necessary node_modules folder containing the library. Remember that for this tutorial, we won't be bundling the HTML as recommended in the official three.js docs. Enqueue the library in your functions.php file:

wp_enqueue_script( 'three-min', get_template_directory_uri() . '/node_modules/three/build/three.min.js', array(), null, false );

Note that this script should be placed in the <head> section to ensure it runs before any other scripts.

3. Now, let's add a basic cube to your script:

<script type="module">

// Locate the latest version at https://cdn.skypack.dev/three.

import * as THREE from 'https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b5f43594e4e6b1b051a181c051e">[email protected]</a>';

const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            const geometry = new THREE.BoxGeometry();
            const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            const cube = new THREE.Mesh( geometry, material );
            scene.add( cube );

            camera.position.z = 5;

            function animate() {
                requestAnimationFrame( animate );

                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;

                renderer.render( scene, camera );
            };

            animate();


</script>

If using NPM, omit

import * as THREE from 'https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ffbe7fdeaeacfbfa1bebcb8a1ba">[email protected]</a>';

as it's not required due to the UMD import. Keep an eye out for future updates regarding Webpack bundler integration!

A WordPress website featuring the impressive capabilities of the Three.js JavaScript 3D library

Answer №1

Answer №2

Similar questions

Retrieving information from a MYSQL database table and populating a text field with AJAX and PHP

What causes the picturesArray to remain consistently void?

Tips for consolidating JavaScript assets in Mean.io

Ways to continuously monitor an array until specific criteria are fulfilled

What is the formula for determining the REAL innerWidth and innerHeight?

Extract the property value and save it as an array in Vue

Tips for managing content and tables that exceed their container's boundaries

Master the art of sending multiple asynchronous requests simultaneously with suspense in Vue 3

Issue with Snackbar slide transition not functioning properly in mui 5

Issue with top-level navigation menu dropdown functionality

Fragment errors detected in the Menu Component

Jquery Triggers Failing to Work Following Ajax Request

AngularJS property sorting: organize your list by name

Expand the Canvas element to match the size of the div below

Navigating with NextJS to a personalized URL and managing the feedback from an external application

Display the user's username on the navigation bar once they have successfully

Refreshing image does not reload

Accessing a file located in a specific directory using the node fs module

Prevent the print dialog window from appearing when a page loads in Selenium for Firefox and Chrome

Testing a function within a React functional component using jest.spyOn with React Testing Library can be accomplished with the following steps: