This project is a THREE.js + Cannon-ES powered virtual city experience tailored for both browser and mobile (Android) platforms.

Gameplay Preview:

This source code empowers three.js designers and coders to build immersive 3D metaverse games rapidly and with ease.

Features:

• Utilizes three.js and the cannon library for efficient management of city-scale environments (see engine/assets/js/engine.js).
• Provides resources including previews, downloads for source code, building assets, model components, game levels, vehicles, avatars, and buildings.
• Supports customization of avatars using your own Ready Player Me URL or custom character models (rigged with Mixamo).

Custom Avatar Setup:
To add characters, copy your model into engine/assets/models/players and register it in engine/assets/js/avatars.js as shown below:

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

Explanation:

• avatar name: Filename (fbx or glb) of your avatar.
• avatar height: Model height in meters.
• avatar weight: Mass in kilograms.
• avatar offset: Adjusts the model so its feet are correctly aligned with the floor.

Custom Environment Setup (City & Objects):
To replace or add to the city environment, copy your model (fbx or gltf with embedded textures) to the engine/assets/models/objects folder. Then, add the model file names in engine/assets/js/levels.js as illustrated below:

JSONCopied
{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}

Explanation:

• model name: Name of the fbx or glb file.
• model type: e.g., objectmesh, trimesh, etc.
• file extension: Only GLTF, GLB, or FBX are supported.
• model positions: Define multiple positions (e.g., x: [0,1] places clones at position 0 and 1).
• model orientation: Rotation settings for each clone.
• model scale: Allows varied scaling (e.g., s: [1, .5] for full and half scale).
• model mass: In kilograms, supporting different masses per clone.
• model proximity: Distance settings (meters) for placement.

Useful Links:

• Project Preview
• Download Source Code
• Download Building Assets
• Download Model Components
• Download Game Level
• Download Vehicle
• Download Avatar
• Download Buildings

Also see:[NL]- Project Download Page

Learn more about the 3D Browser Game [The Island City]:

Download the model

Three.js has been updated to release r155. Check for any bugs, errors, or conflicts with the new release: