ThreeJS spitting big typescript file into modules OR reading textfile?

Alright, so I am making a small project that has a character move around in a level with other characters.

The project runs server-side physics with cannonjs and renders with threejs on clientside (with cannonjs for movement physics & object collision)

I’ve gotten to the point where I can send Static or Dynamic Objects and have them update via, now I would like to move the “load level” function into its own seperate file so I can call multiple different levels depending on my import path.

The issue is that I tried with typescirpt and failed, however, before trying again, i would like advice on how to proceed and structure this level loading issue.

Method 1: create a text file with object position, rotation, and other properties and have the server and client read the file and generate code from it to create scene/world

Method 2: create seperate typescript files for each level

public loadLevel(){
	const cubeShape = new CANNON.Box(new CANNON.Vec3(1, 1, 1))
	var cubeBody = new CANNON.Body({ mass: 1 , material: this.physicsMaterial});
	cubeBody.position.x = 0
	cubeBody.position.y = 20
	cubeBody.position.z = 4
	map.boxes.push({position: cubeBody.position, 
					rotation: cubeBody.quaternion,
				    shape: {x: 1, y: 1, z: 1},
					isDynamic: true
	//const planeShape = new CANNON.Plane()
	const planeShape = new CANNON.Box(new CANNON.Vec3(15, 0.1, 15))
	var planeBody = new CANNON.Body({ mass: 0, material: this.physicsMaterial })
	planeBody.position.set(0, 0, 0)
	map.boxes.push({position: planeBody.position, 
					rotation: planeBody.quaternion,
				    shape: {x: 15, y: 0.1, z: 15},
				    color: 0x555555,
				   isDynamic: false})
	var object0 = new CANNON.Body({ mass: 0 , material: this.physicsMaterial});
	object0.addShape(new CANNON.Box(new CANNON.Vec3(1, 0.5, 1)))
	object0.position.x = 5
	object0.position.y = 4
	object0.position.z = 4
	map.boxes.push({position: object0.position, 
					rotation: object0.quaternion,
				    shape: {x: 1, y: 0.5, z: 1},
				    color: 0x318192,
				   isDynamic: false})
	for(var i = 0; i < this.objects.length; i++) {[i])
	for (var i = 0; i < map.boxes.length; i++) {
		if (map.boxes[i].isDynamic) {
			map.dynamics.push({position: map.boxes[i].position, 
					rotation: map.boxes[i].rotation,
				    shape: map.boxes[i].shape,

TBH I have no idea how to do either, guidance would be appreciated!

Look at the ballgame branch of this project

It is a Threejs TypeScript project containing two sub projects for client and server.

It also demonstrates Socketio and Server Side Cannonjs as well as many other things.
Many problems were solved when creating this demo. Admittedly, I would have solved them differently than you, but they were solved.

See the running example at

The Ballgame branch demonstrates,

  • Server-Side Cannonjs Physics,
  • Physics Friction and Restitution,
  • Tweening mesh positions and quaternions based on server side physics body properties,
  • Multiplayer Support using SocketIO,
  • Mobile and Desktop Responsive UI,
  • Custom Camera controller which acts as an Orbit Controls and Follow Cam
  • Reflector Object
  • THREE.CubeCamera
  • Basic Game Engine with a clock, game phases and scoreboard.

To install locally

git clone
cd Three.js-TypeScript-Boilerplate
git checkout ballgame 
npm install
npm install -g typescript
npm run dev

Visit to play locally

Visit for more info about this demo.

If want to pull text files from the server into your threejs client, then checkout the bsc5 branch of this same project. It demonstrates many other things as well.
More info at

1 Like

Thank you for your reply, and I have to say, all of this is genuinely amazing! I will be learning this soon and hopefully can get it to work!!!