How do you do to work with external js classes files and put this on a main.js file with modules?

espace3d · May 24, 2021, 8:47am

Hi,

My application seems like that :

├── index.html
└── main.js

My main.js load module like this :

import * as THREE from "https://threejs.org/build/three.module.js";
import
{
	OrbitControls
} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import
{
	CSM
} from "https://threejs.org/examples/jsm/csm/CSM.js";
import
{
	TWEEN
} from 'https://unpkg.com/three@0.125.2/examples//jsm/libs/tween.module.min'

i have also class inside my main.js file :

class Player{
  constructor()
  {
    this.geom = new THREE.BoxGeometry(2,2,2);
    this.mat = new THREE.MeshPhongMaterial({
       color: 0xfffff,
    });
    this.mesh = new THREE.Mesh(this.geom, this.mat);
  }
  }

Until now everything works good. But i would to put my class Player in another external js file like this :

├── classes
│   └── player.js
├── index.html
└── main.js

Change in my main.js like this :

...
let player = new Player()
...

And in my index.html i do this :

<script src="js/classes/player.js"></script>

<script type='module' src="js/main.js"></script>

and my error is :
Uncaught ReferenceError: THREE is not defined

How do you do to work with external js classes files and put this on a main.js file with modules ?

Mugen87 · May 24, 2021, 11:12am

Just for clarification: This runtime error happens since your import three.js as an ES6 module. That means the resulting THREE namespace is not available in the global space (and hence not in your Player class). Try the following:

Implement your Player class as an ES6 module like so:

import * as THREE from "https://threejs.org/build/three.module.js";

class Player{
  constructor()
  {
    this.geom = new THREE.BoxGeometry(2,2,2);
    this.mat = new THREE.MeshPhongMaterial({
       color: 0xfffff,
    });
    this.mesh = new THREE.Mesh(this.geom, this.mat);
  }
}

export default Player;

Import the Player class in main.js like so:

import Player from `./classes/player.js`;

Remove the obsolete import in your index.html:

<script src="js/classes/player.js"></script>

espace3d · May 24, 2021, 2:40pm

Okay thanks so you have to import all your modules in each classes! Do you have an easy way?

drcmda · May 24, 2021, 2:51pm

that is the easy way. you either use global IIFE’s in very specific order. i would suggest you do not because it’s only a matter of time until three casts it out. or modules, which have namespaces. if your module uses something it needs to import it.

of course if you actually want to build something real using esm like that will never work, because you can’t have dependencies. the only thing that makes sense in that case is skypack or bundlers, everything else will hurt you in the process.

espace3d · May 24, 2021, 3:51pm

With Phaser and it works also with THREE.js i write my classes like this :

//in player.js
class Player{
  constructor(T)
  {
    this.geom = new T.BoxGeometry(2,2,2);
    this.mat = new T.MeshPhongMaterial({
       color: 0xfffff,
    });
    this.mesh = new T.Mesh(this.geom, this.mat);
  }
}

//in main.js
import * as THREE from "https://threejs.org/build/three.module.js";
let player = new Player(THREE)

The advantage is :
One file to load all the modules (main.js) and all the classes load the modules with abbreviations/parameters.

Is not a good way ? and Why ?

drcmda · May 24, 2021, 5:42pm

you do not normally have to do that with modules, it kind of goes against the whole point of it. seems also limited, what you gonna do with a third party control. but if it works for you then it works …

espace3d · May 25, 2021, 12:41pm

okay i take your advice(s) (drcmda and Mugen87) as the way to follow Thanks.

espace3d · May 25, 2021, 5:44pm

Hi,

I don’t understand why it doesn’t works…

Here my files :

// classes/player.js
import * as THREE from "https://threejs.org/build/three.module.js";

class PLAYER
{
    constructor()
    {
        this.geom = new THREE.BoxGeometry(2, 2, 2);
        this.mat = new THREE.MeshPhongMaterial({
            color: 0xfffff,
        });
        this.mesh = new THREE.Mesh(this.geom, this.mat);
        scene.add(this.mesh)
    }
}
export default PLAYER;

and my main.js

import * as THREE from "https://threejs.org/build/three.module.js";
import
{
    OrbitControls
} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import
{
    CSM
} from "https://threejs.org/examples/jsm/csm/CSM.js";
import
{
    TWEEN
} from 'https://unpkg.com/three@0.125.2/examples//jsm/libs/tween.module.min'

import
{
    PLAYER
} from "./classes/player.js"
console.clear();

const params = {
    color_cube: 0xacaaad,
};
let m = {} // materials
let g = {} // geometry
let o = {} // objects
let s = {} // sounds
let startX, startY, my_latest_tap;

let scene, camera, renderer, container, controls; // what to see
let csm, csmHelper; // plugin to have shadows on huge scene 

// // // TOUCH ACTIONS

function init_app()
{
    init()
    //CHANGE KEY TOGGLES

    animate()
    ///////////////////////////////////////////////////////////////////////////////////////////

    function init()
    {
        // init_minimal(this)
        const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

        scene = new THREE.Scene();
        // pour avoir une couleur de fond dans le ciel
        scene.background = new THREE.Color(0xf6ffb9);

        scene.fog = new THREE.Fog(params.color_fog, 0, params.distance_fog);
        // camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.01, 2000);
        camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 2, 2000);

        // for camera with mouse
        // camera.position.set(10, 1, 10);

        // for camera with controls
        camera.position.set(40, 13, 40);
        camera.rotation.order = "YXZ";
        camera.rotation.y = -Math.PI / 2;
        o.direction = new THREE.Vector3(0, 0, 0);
        console.log(o.direction)
        camera.getWorldDirection(o.direction);

        renderer = new THREE.WebGLRenderer({
            antialias: true,
            alpha: true,
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        // document.getElementById("canvas").appendChild(renderer.domElement);

        //Shadows
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        //  ORBIT
        controls = new OrbitControls(camera, renderer.domElement);
        // controls.target.y = 5


        //  LIGHTS
        var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);

g.cube = new THREE.BoxGeometry(2, 2, 2);

		m.cube = new THREE.MeshPhongMaterial({

			color: params.color_cube,
			shininess: 100,

		});
        ///////////////////////////////////////////////////////////////////////////////////////////
        o.cube = new THREE.Mesh(g.cube, m.cube);
        o.cube.castShadow = true
        o.cube.receiveShadow = true
        o.cube.outside = true
        scene.add(o.cube);
        let pl = new Player()
    }

    function animate()
    {

        requestAnimationFrame(animate);
        ///////////////////////////////////////////////////////////////////////////////////////////
        camera.updateMatrixWorld();
        renderer.render(scene, camera);
    }

}

init_app()

my error is :
Uncaught SyntaxError: The requested module ‘./classes/player.js’ does not provide an export named ‘PLAYER’

Why ?

Mugen87 · May 25, 2021, 6:29pm

Write the import like so:

import PLAYER from "./classes/player.js"

espace3d · May 25, 2021, 7:07pm

Thanks.

Just a last question :

how do you put scene.add(this.mesh) directly in the class ?

import * as THREE from “https://threejs.org/build/three.module.js”;

class PLAYER
{
    constructor()
    {
        this.geom = new THREE.BoxGeometry(2, 2, 2);
        this.mat = new THREE.MeshPhongMaterial({
            color: 0xfffff,
        });
        this.mesh = new THREE.Mesh(this.geom, this.mat);
        // DON'T WORKS
        //scene.add(this.mesh)
    }
}
export default PLAYER;

Mugen87 · May 25, 2021, 7:22pm

You could pass in the scene object as a constructor argument.

let pl = new Player(scene);

You could also consider to derive the Player class from Mesh and then add the player object directly to the scene.

scene.add(pl);

Dustin_West · April 17, 2023, 12:27am

this fixed the issue I was having trying to just do the tutorial!
The WebGL Compatibility check in the tutorial was messing up!
So I fixed the import statement to be correctly styled put the check code below the animate function.
Voila! About two hours of bug fixing done!

Topic		Replies	Views
Best practice modules with global Questions modules	5	1166	July 30, 2020
How to implement ThreeJS please without type="module" Questions modules , javascript	10	6004	September 22, 2020
Importing Three.js as module Questions modules , import	24	38423	January 19, 2023
Using three.js dependencies with webpack Questions modules , examples , webpack	3	3256	September 13, 2017
Helper functions in external file Questions	5	211	June 1, 2024

How do you do to work with external js classes files and put this on a main.js file with modules?

Related Topics