Building elementor widget for simple gltf not loading wp_register_script

I am trying to develop a simple widget for elementor. Geomatry of box works fine. But as soon i add gltf loader from js/loader it does not work. following is my code.

public function get_script_depends() {

	wp_register_script( 'three-js', plugins_url( '../assets/build/three.js', __FILE__ ) ); // this works fine
	wp_register_script( 'three-gltf', plugins_url( '../assets/js/GLTFLoader.js', __FILE__ ) ); // no error
	wp_register_script( 'file-select', plugins_url( '../assets/js/fileselect-control.js', __FILE__ ) ); // fine
	wp_register_script( 'three-script', plugins_url( '../assets/js/three-script.js', __FILE__ ) ); // fine
	return [ 'three-js', 'file-select', 'three-script', 'three-gltf' ];

const loader = new THREE.GLTFLoader();

it shows error ReferenceError: THREE is not defined…

any advice or correction will be appreciated :slight_smile:

When you look at the contents of ../assets/build/three.js - does it look more like (A) this file or (B) this file ?

THREE namespace is defined only when non-module version of three is loaded.

Could you also show part of the code that you use to create the mentioned geometries - just for reference?

I have moved my .js file loading from widget to elemento-salman.php file and added as filter. following is the code…

function my_plugin_frontend_scripts() {

	wp_register_script( 'frontend-script-1', plugins_url( '/includes/assets/build/three.js', __FILE__ ) );
	wp_register_script( 'frontend-script-2', plugins_url( '/includes/assets/js/loaders/GLTFLoader.js', __FILE__ ));
	wp_register_script( 'frontend-script-3', plugins_url( '/includes/assets/js/controls/OrbitControls.js', __FILE__ ));
	wp_register_script( 'frontend-script-4', plugins_url( '/includes/assets/js/loaders/RGBELoader.js', __FILE__ ));

	wp_enqueue_script( 'frontend-script-1' );
	wp_enqueue_script( 'frontend-script-2' );
	wp_enqueue_script( 'frontend-script-3' );
	wp_enqueue_script( 'frontend-script-4' );

add_action( 'elementor/frontend/before_register_scripts', 'my_plugin_frontend_scripts' );

note:- this is not a good excercise because once plugin is loaded all the three related js files will load… best practice is once you drop the widget into working area it should load three realted js files. Which in my case is not working. so I put the files in element-salman.php not in widget-gltf.php

My custom elementor plugin structure is as following
---- elementor-salman
-------- elementor-salman.php
-------- includes
------------- assets
----------------- build (contain all three basic files .js or bundle) its working fine
----------------- js (contain all folders and fiels which three.js master file conain) now its working fine
------------- controls (contain controls file attachment control for gltf or xyz files) this work fine
------------- widgets (contain widget that shows canvas/gltb/etc.) this work fine

hope you understood my explanation. and thanks for your reply :slight_smile: