Three.js Browser Virtual Experience Engine
A modular Three.js-powered virtual experience engine written in JavaScript, built for developing large-scale open-world or immersive browser-based environments for gaming, simulation, and architectural visualization.
The engine includes the “Craterland” demo level — a compact test environment assembled from freely available 3D assets — demonstrating streamlined integration of external models and scenes from common asset sources with minimal configuration.
Core features include structured scene organization, a physics layer built on an extended Cannon.js implementation for optimized simulation, and multiple systems for runtime performance management. These include dynamic asset streaming for efficient memory usage, mesh simplification for handling high-density geometry, and a parallax-based interior projection system that simulates interior depth via single-plane cube mapping.
The avatar system supports modular mesh swapping (hair, head, torso, pants, shoes) with configurable materials and colors. Animation handling is optimized for large multiplayer environments through adaptive update throttling, reducing animation frequency for distant players to maintain stable WebGL performance across expansive scenes.
Screenshot #1 – You can import game levels or 3D assets from sources like Sketchfab, RenderHub, or TurboSquid and integrate them into the engine with only minor tweaks or modifications. The Three.js developer can simply download and clone the terrain mesh to use as collider geometry, enabling quick setup for physics interactions and seamless world integration.
Screenshot #2 – Gameplay supports multiple camera views, from third-person and first-person to god mode, allowing Three.js developers to orbit, observe, and oversee level integration and progress as new assets are added to the scene.
Screenshot #3 – In Blender, import the downloaded GLB file, clone the terrain mesh, remove its material, and rename the cloned geometry to phy-body-main-terrain-0kg-craterland. This name allows the engine to recognize it as a Cannon.js physics body (collider). The 0kg tag indicates that the body is stationary, meaning dynamic objects such as avatar capsules, vehicle tires, and bodies will collide with it.
Screenshot #4 – In your code editor, open engine.html, search for the asset name (e.g., craterland), and replace it with your custom environment asset name (e.g., my-custom-game-level). There’s no need to include the .glb extension. After saving the changes, launch the project using your live server.
Screenshot #5 – In your browser, change the URL from https://127.0.0.1 to your local network address (e.g., https://192.168.x.x). Some functions may not work correctly due to CORS restrictions when using localhost. To avoid this, access the project via your local IP address instead.
3D Browser Gameplay: Live Demo
Explore your architectural showcase or game environment as development progresses. Add more assets to build toward your desired level design or architectural visualization project.
Unlimited Possibilities
This 3D browser game engine unlocks endless creative potential — from open-world exploration and immersive metaverse spaces to interior design showcases, virtual event activations, and even wedding or venue planning. You can also transform it into a personalized virtual hub or meeting place for your online community.
Built on a fully modular Three.js framework, the source code demonstrates advanced integration of physics, dynamic asset streaming, and optimized scene management for large-scale or open-world environments. It’s perfect for developers looking to explore efficient WebGL workflows, integrate external 3D assets with minimal setup, or build interactive browser-based experiences — from expansive game worlds and metaverse prototypes to architectural visualizations and real-time simulations.
Resources
- Sketchfab: Terrain Model
- Source Code: Download Here
)
