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

Questions
,
2

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:

  1. 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;
  1. Import the Player class in main.js like so:
import Player from `./classes/player.js`;
  1. Remove the obsolete import in your index.html:
<script src="js/classes/player.js"></script>
1 Like