Three.js in wordpress

Questions
1

So I have three.js working, but I can’t add any second library file without errors. First up was getting OrbitControls.js to work. But it trows errors…

function addthreejs() {
wp_enqueue_script( 'three', get_template_directory_uri() . '/js/three.js', array(
'threemodule',
'OrbitControls'
), true );

wp_enqueue_script( 'threemodule', get_template_directory_uri() . '/js/build/three.module.js', array(), false );
wp_enqueue_script( 'OrbitControls', get_template_directory_uri() . '/js/controls/OrbitControls.js', array(), false );

    }
add_action( 'wp_enqueue_scripts', 'addthreejs' );

and the errors are:

Uncaught SyntaxError: export declarations may only appear at top level of a module three.module.js:51536

Uncaught SyntaxError: import declarations may only appear at top level of a module OrbitControls.js:10

Uncaught ReferenceError: OrbitControls is not defined

Then i thought ow well, so we have to work from thee.js. So lets copy paste the OrbitControls code into three.js… got that without errors, but the OrbitControls is still unknown, so event adding:

exports.OrbitControls= OrbitControls;
exports.MapControls= MapControls;

instead of

export { OrbitControls, MapControls };

did not work…

any other ways? really copying the code into the page, making those control functions work there might be the next thing to try

2

I’m not familiar with Wordpress but when including ES6 modules, you have to ensure that the CMS is generating the correct markup for it. So the script tag has to look like so:

<script type="module" src="/js/build/three.module.js"></script>

Notice the type="module" tag.

3

Yeah problem is, you can’t add scripts that way in wordpress, you have to enqueue them in a php script… anyway, I found a mapcontrol script which I was able to add in the script in the page, ‘top level’, and now it works.

5

could you please share structure of php enqueue