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 socket.io, 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(){
//DYNAMIC CUBE
const cubeShape = new CANNON.Box(new CANNON.Vec3(1, 1, 1))
var cubeBody = new CANNON.Body({ mass: 1 , material: this.physicsMaterial});
cubeBody.addShape(cubeShape)
cubeBody.position.x = 0
cubeBody.position.y = 20
cubeBody.position.z = 4
this.objects.push(cubeBody)
map.boxes.push({position: cubeBody.position,
rotation: cubeBody.quaternion,
shape: {x: 1, y: 1, z: 1},
isDynamic: true
})
//FLOOR
//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.addShape(planeShape)
planeBody.position.set(0, 0, 0)
this.objects.push(planeBody)
map.boxes.push({position: planeBody.position,
rotation: planeBody.quaternion,
shape: {x: 15, y: 0.1, z: 15},
color: 0x555555,
isDynamic: false})
//NEW CUBE
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
this.objects.push(object0)
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++) {
this.world.addBody(this.objects[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!
