Threejs+Cannon Virtual City

This is a threejs+cannon virtual city.

This source codes allows threejs designers and coders to build 3d browser and mobile/android games quickly and easily.

Features:

This source code uses threejs and cannon library, the engine\assets\js\engine.js is written to efficiently handle and manage city scale environment.

System Requirements:

To launch the virtual city you need live server or upload on webhosting server.

Custom Avatar

To add characters, you can use your own Ready Player Me avatar url or create your own custom character, rig character at Mixamo, copy at engine/assets/models/players, and then register the character in the engine/assets/js/avatars.js JSON.

[

{name:'avatarName', height: 1.8, weight: 97, offset: .12},

]

avatar name: name of your avatar in fbx or glb file

avatar height: the avatar model height in meters

avatar weight: the avatar mass in kilograms

avatar offset: adjust the avatar offset from the floor, ensure the avatar feet touches the floor just right not floating and not sinking.  

Custom Environment (City & Objects)

To replace city, you can use your own custom model in fbx or gltf format (texture embedded), copy the models to the engine/assets/models/objects folder and add the model file names in the engine/assets/js/levels.js JSON.

JSON example:

{name: 'modelName', type: 'modelType', loader: 'fileExtension', x: [0, 1], y: [0, 0], z: [0, 1], o:[{x:0,y:0,z:0},{x:0,y:90,z:0}], s:[1, 1], si:0, kg:[5, 5], sl:null, sh:'metalimpact', pc:'.5-1', px:1.2, ds:40},

model name: name of the fbx or glb file

model type: objectmesh, trimesh etc...

file extension: GLTF, GLB or FBX only

model positions: x:[0,1],y:[0,0],z:[0,1] 

 the model can clone in multiple positions for example x:[0,1] is placed in x axis 0 and x axis 1 or x:[0,1,2,3,4,5] is place in axis 0, 1, ... and 5

model orientation: o:[{x:0,y:0,z:0},{x:0,y:90,z:0}]

model scale: s:[1, .5]

 the model can cloned in different scale for instance a tree model example s:[1, .5] the first tree model clone is full scale (1) and the second tree model clone is half scale (.5)

model mass (kg): kg:[5,5]

 the model can be of different mass in kilo grams for example kg:[0,1] the zero (0) is static and one (1) kilo gram is a kilogram or kg:[10,0,40,30,2] has different masses.

model proximity (meters): ds:40

Screenshot:

Enjoy!