Wordpress and Three rendering

vincent789 · September 17, 2019, 2:23pm

Hi Everybody,

Sorry for my awful French-English.

Hi dear admin,
In my entire life, that’s the first time I write on a forum… so sorry in advance : I might not be at the good place to ask my question. I’ll follow this topic and move it if it needs to be done.

I’ve been trying desperately to use the rendering addons with wordpress.
I’ve got no problem using three.js, GLTFLoader and OrbitControls, but when it comes to render, it’s seems to generate a world of problems.

My will is to use a bloom effect on a basic scene with a basic GLTF object (let’s say a ball). I try to adapt the UnrealBloomPass from the documentation. So I charge in the wordpress functions.php all the scripts I need, which are those ones (don’t pay attention to the “true” or “false” in_footer, that’s a problem I’l talk about later :

	wp_enqueue_script( 'three', get_template_directory_uri() . '/js/three.js', array(), true );

wp_enqueue_script( 'OrbitControls', get_template_directory_uri() . '/js/OrbitControls.js', array(), false );

wp_enqueue_script( 'GLTFLoader', get_template_directory_uri() . '/js/GLTFLoader.js', array(), false );

wp_enqueue_script( 'EffectComposer', get_template_directory_uri() . '/js/EffectComposer.js', array(), true );

wp_enqueue_script( 'RenderPass', get_template_directory_uri() . '/js/RenderPass.js', array(), false );

wp_enqueue_script( 'UnrealBloomPass', get_template_directory_uri() . '/js/UnrealBloomPass.js', array(), true );

The fact is : when I do it in a basic HTML index, it works and I manage to render a scene. When I’m on the wordpress project (all JS files loaded in the same order), my js code seems not to reach three.js.

For example, if I write this in the JS containing my three scene : composer = new THREE.EffectComposer(renderer);

Even if EffectComposer is loaded, I get this message composer = Cannot read property ‘getSize’ of undefined.
Or this error : RenderPass is not a function (athough RenderPass is fully loaded.

Then comes my question :
Where to load my JS files in wordpress. It seems to have no importance when it’s about OrbitControls or GLTFLoader, but a lot of importance when it’s about the rendering .js files.
Do I put them all at the bottom of the body ?
My second question is about the “Uncaught TypeError: Cannot read property ‘getSize’ of undefined
at new THREE.EffectComposer (EffectComposer.js?ver=1:18)
at (index):196” error.
How to get rid of that ? Did I miss something so important that makes me noobest that I already am ?
If somebody has a working WP example that would allow me to learn a bit more…

Thanks a lot.

All my version are the last versions from the official three GitHub repository…
Last version of Worpress.
Very last version of myself, I think I will pass out if it does not work tomorow.

vincent789 · September 17, 2019, 2:40pm

Thanks for the topic update !

Mugen87 · September 17, 2019, 2:41pm

Any chances to provide a live link to your current work of progress? This will make it much easier to investigate your issue.

danlong · September 17, 2019, 2:46pm

In terms of the loading order, you could try and set the scripts as dependencies of your three.js file? (https://developer.wordpress.org/reference/functions/wp_enqueue_script/)

I think it would look something like this:

wp_enqueue_script( 'three', get_template_directory_uri() . '/js/three.js', array(
'OrbitControls',
'GLTFLoader',
'EffectComposer',
'RenderPass',
'UnrealBloomPass'
), true );

wp_enqueue_script( 'OrbitControls', get_template_directory_uri() . '/js/OrbitControls.js', array(), false );

wp_enqueue_script( 'GLTFLoader', get_template_directory_uri() . '/js/GLTFLoader.js', array(), false );

wp_enqueue_script( 'EffectComposer', get_template_directory_uri() . '/js/EffectComposer.js', array(), true );

wp_enqueue_script( 'RenderPass', get_template_directory_uri() . '/js/RenderPass.js', array(), false );

wp_enqueue_script( 'UnrealBloomPass', get_template_directory_uri() . '/js/UnrealBloomPass.js', array(), true );

vincent789 · September 17, 2019, 2:48pm

Ok I cannot acces FZ and my server from where I am so I’l try do this tonight ! Thx a lot.

vincent789 · September 17, 2019, 4:21pm

Here it is for the link ! I reproduced it exactly, just aded a random GLTF import. The same thing occurs when I use the basic scene, with the basic cube.
https://vunce.fr/eoperk/

vincent789 · September 17, 2019, 4:29pm

Using this solution, it looks like Three.js is loaded after all its dependencies…so i’ll try to adapt it… but i’m not sure yet it could work.

wp_enqueue_script( ‘three’, get_template_directory_uri() . ‘/js/three.js’, array(
‘OrbitControls’,
‘GLTFLoader’,
‘EffectComposer’,
‘RenderPass’,
‘UnrealBloomPass’
), false );

wp_enqueue_script( 'OrbitControls', get_template_directory_uri() . '/js/OrbitControls.js', array(), false );

wp_enqueue_script( 'GLTFLoader', get_template_directory_uri() . '/js/GLTFLoader.js', array(), false );

wp_enqueue_script( 'EffectComposer', get_template_directory_uri() . '/js/EffectComposer.js', array(), true );

wp_enqueue_script( 'RenderPass', get_template_directory_uri() . '/js/RenderPass.js', array(), false );

wp_enqueue_script( 'UnrealBloomPass', get_template_directory_uri() . '/js/UnrealBloomPass.js', array(), true );

And then in the debugger :

Mugen87 · September 17, 2019, 5:24pm

There is actually a programming error in your code. You create the instance of EffectComposer before your create the instance of WebGLRenderer. Hence you pass undefined as a parameter to EffectComposer constructor.

The solution for this issue is to create the composer right after the renderer’s creation in init().

vincent789 · September 18, 2019, 11:39am

All problems solved using node, cause there were too much dependencies (I’m totally new on this kind of devs, but it appeared it would work fine using the imports & modules). Thanks a lot anyway. If dependencies needed but there’s no node, @Danlong solution works fine = use the functions.php to declare dependencies (and seems, in my case, to be the only functional solution). Thanks !!!

rojele · March 17, 2020, 11:27am

Hi! I’m actually struggling with a similar problem, as I cannot get wordpress to correctly load threejs (I assume) and I get errors as “: Cannot read property ‘width’ of null”". When you talk about using node, are you referring to node.js? Any clue about how to do it for a correct wordpress and threejs integration?
A lot of thanks in advance, all the best.

vincent789 · July 21, 2020, 1:39pm

Hi ! Yes, I figured it was possible to charge it like you’d do with other javascript files in wordpress.
In a “normal” wordpress theme, you have to go to the functions.php file and then enqueue your .js script (masonry.js for example) like this :

function test_scripts() {
	wp_enqueue_style( 'test-style', get_stylesheet_uri(), array(), _S_VERSION );
	wp_style_add_data( 'test-style', 'rtl', 'replace' );
	wp_enqueue_script( 'test-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
	wp_enqueue_script( 'splidejs', get_template_directory_uri() . '/js/splide.min.js', array(), _S_VERSION, true );
	wp_enqueue_script( 'app', get_template_directory_uri() . '/js/app.js', array(), _S_VERSION, true );
	wp_enqueue_script( 'masonry', get_template_directory_uri() . '/js/masonry.pckgd.min.js', array(), _S_VERSION, true );
	wp_enqueue_script( 'imagesloaded', get_template_directory_uri() . '/js/imagesloaded.pckgd.min.js', array(), _S_VERSION, true );
	wp_enqueue_script( 'test-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), _S_VERSION, true );
	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'test_scripts' );

What seems to be more difficult is to charge scripts as modules, because it’s easier to charge the Three dependancies once it has been done.So you can use that hook in the functions.php :

/**
 * Enqueue three scripts and styles and declare as module.
 */
function three_scripts() {

	wp_enqueue_script( 'three-init', get_template_directory_uri() . './js/robot.js', array(), false );
	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'three_scripts' );

function add_type_attribute($tag, $handle, $src) {
	    // if not your script, do nothing and return original $tag
	    if ( 'three-init' !== $handle ) {
	        return $tag;
	    }
	    // change the script tag by adding type="module" and return it.
	    $tag = '<script type="module" src="' . esc_url( $src ) . '"></script>';
	    return $tag;
}
add_filter('script_loader_tag', 'add_type_attribute' , 10, 3);

And then you can work in the js module file you declared (robot.js here), and call three dependancies like this :

import * as Three from '../node_modules/three/build/three.js';
import { GLTFLoader } from '../node_modules/three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from '../node_modules/three/examples/jsm/controls/OrbitControls.js';


	let container, renderer, scene, camera, controls;

Now ( and i’m not sure I’ll be able to make this work ) I’ll try to pack the whole js with webpack, cause as far as I’m concerned, I don’t understand if I need to upload node dependencies on my server or if the best practice is to webpack them (In fact I don’t fully understand nodejs, and I don’t know how to compilate the whole thing - but I don’t only have this problem on worpdress).

RobertBeric42 · July 21, 2020, 1:44pm

Also, this is my personal profile. I’d like to get rid of the other one that was here for a professional purpose, and that’s why I did not see your answer.

ververid · January 3, 2021, 9:26am

You can check my open source plugin for wordpress that includes asset uploading and viewing through Three.js: https://github.com/DigiArt-project/wordpressunity3deditor

Demo site: https://heliosvr.mklab.iti.gr/
I used EffectsComposer to highlight selected items in the scene editor:

github.com

DigiArt-project/wordpressunity3deditor/blob/d29e3e48135bec4bf3cd5cc83635c580c7a40b5c/js_libs/vr_editor_environmentals.js

"use strict";
class vr_editor_environmentals {

    constructor(container_3D_all){

        // Composer is for the green outline effect when selecting objects
        this.isComposerOn = true;

        // animation
        this.animationMixers = [];
        this.clock = new THREE.Clock();
        this.flagPlayAnimation = true;


        this.is2d = true;
        this.isDebug = false; // Debug mode

        this.thirdPersonView = false;

        this.ctx = this;

This file has been truncated. show original

and
edit-wpunity_scene.php

giuseppe · May 16, 2024, 3:53pm

Hi vincent789,
I’m also trying to integrate a 3D model into WordPress, have you completed your project?
Could you explain how you solved it?
Where did you find all the files?

Gabriel_R_P · May 17, 2024, 12:30am

my .glb file was loading alright when creating a wordpress theme locally, but it could not be loaded when the theme was online. problem was on server file permitions I guess (dunno nothing on backend, chatgpt solved the issue); so here is the simple explanation that solved the problem here:
(obs: my site is on hostgator)

Step-by-Step Instructions for Configuring MIME Types on HostGator

1. Log in to cPanel

Go to your HostGator cPanel login page.

2. Access the MIME Types Configuration

Once logged in, scroll down to the Advanced section and click on MIME Types.

3. Add a New MIME Type

In the MIME Types section, you will see a form to add a new MIME type.
In the MIME Type field, enter: model/gltf-binary.
In the Extensions field, enter: glb.
Click on the Add button to save your changes

Topic		Replies	Views
Wordpress integration Questions wordpress	5	7933	June 26, 2022
How to render a scene with 2 different UnrealBloom effects applied on2 different Object3D? Questions effect-composer , threejs , unrealbloompass	3	243	April 27, 2024
EffectComposer UnrealBloomPass is ruining my whole render thing Questions shader-material , effect-composer , unrealbloompass , shaderpass	2	3962	November 28, 2022
UnrealBloom only on some selected objects Questions	0	33	November 29, 2024
CubeTexturePass and UnrealBloom in the same scene Questions cubetexture-loader , effect-composer , threejs , unrealbloompass	1	147	April 1, 2024

Wordpress and Three rendering

Step-by-Step Instructions for Configuring MIME Types on HostGator

1. Log in to cPanel

2. Access the MIME Types Configuration

3. Add a New MIME Type

Related topics