Metaverse Tutorial: Learn Virtual Worlds from Scratch (2026)
The metaverse is a persistent, shared, 3D virtual space where users interact through avatars. After building a virtual art gallery that hosted 5,000 visitors and a multiplayer world using WebXR and Three.js, I believe the metaverse is not a single platform but a convergence of open standards. This tutorial focuses on building interoperable virtual experiences, not betting on any one company's walled garden.
You will learn WebXR for browser-based VR, Three.js for 3D rendering, avatar creation and animation, spatial audio, and how to connect users in real time. The goal is to create a virtual space that works across devices — desktop, mobile, and VR headsets.
WebXR: Browser-Based VR
WebXR is the W3C standard that brings virtual and augmented reality to web browsers. Users with a VR headset enter immersive mode; desktop users see the same scene on a flat screen. No app store, no install — just a URL. This is the most accessible way to distribute metaverse experiences.
The API handles head tracking, hand controllers, and session management. You request an 'immersive-vr' session, enter a render loop at the headset's refresh rate, and submit frames. The Three.js WebXRManager wraps most of this complexity.
import * as THREE from 'three';
import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 1.6, 3);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.xr.enabled = true;
document.body.appendChild(renderer.domElement);
document.body.appendChild(VRButton.createButton(renderer));
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
});3D Space Design for Social Presence
Virtual spaces need different design rules than physical architecture. Avatars need room to move (minimum 2m x 2m per person), no sharp corners (motion sickness), and landmarks for orientation. Lighting affects social presence: warm ambient light with directional light for shadows creates depth perception.
Use LOD (Level of Detail) systems to keep performance smooth on mobile and VR. The average social VR space should target under 100k triangles and use atlased textures. Test your scene at the lowest target device spec first.
const ambientLight = new THREE.AmbientLight(0x404060, 0.5);
scene.add(ambientLight);
const mainLight = new THREE.DirectionalLight(0xffeedd, 1.2);
mainLight.position.set(5, 10, 7);
mainLight.castShadow = true;
scene.add(mainLight);
const fillLight = new THREE.DirectionalLight(0x4488ff, 0.3);
fillLight.position.set(-5, 0, 5);
scene.add(fillLight);Avatars with VRM Standard
Avatars are the user's representation in the metaverse. For cross-platform compatibility, use the VRM standard (a humanoid avatar format based on glTF). VRM includes morph targets for facial expressions, spring bones for physics, and a standardized skeleton for animation retargeting.
For multi-user consistency, implement IK (Inverse Kinematics) for arms and legs based on headset and controller positions. Full-body IK requires additional trackers; upper-body IK works with just head and hands.
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { VRM, VRMLoaderPlugin } from '@pixiv/three-vrm';
const loader = new GLTFLoader();
loader.register(parser => new VRMLoaderPlugin(parser));
loader.load('avatar.vrm', (gltf) => {
const vrm = gltf.userData.vrm;
scene.add(vrm.scene);
function animate() {
vrm.update(clock.getDelta());
renderer.render(scene, camera);
}
});Multiplayer with Colyseus
Real-time multiplayer requires a server to relay positions and state. Colyseus is an authoritative game server for JavaScript/TypeScript that syncs state automatically. Each client sends input (position, rotation, animation state) to the server, which broadcasts to other clients in the same room.
For voice chat, WebRTC with a SFU (Selective Forwarding Unit) like Mediasoup or LiveKit enables spatial audio — voices get louder/fade as avatars approach/move away.
import Colyseus from 'colyseus.js';
const client = new Colyseus.Client('wss://my-metaverse-server.com');
const room = await client.joinOrCreate('world', { avatarId: 'my-avatar' });
room.onStateChange((state) => {
state.players.forEach((player, sessionId) => {
if (sessionId !== room.sessionId) {
updateAvatarPosition(sessionId, player);
}
});
});
room.send('playerMove', {
x: avatar.position.x,
y: avatar.position.y,
z: avatar.position.z,
rotation: avatar.rotation.y
});Spatial Audio
Spatial audio is critical for presence. When you hear someone's voice from a specific direction, your brain treats them as real. The Web Audio API with PannerNode creates 3D positional audio. Resonance Audio (Google) adds reverb based on room geometry.
For background ambience, use looping positional audio sources attached to scene objects. The audio attenuation model should follow inverse square law with a reasonable rolloff factor (1.0-2.0).
const audioContext = new AudioContext();
function createSpatialAudio(url, position) {
const source = audioContext.createBufferSource();
const panner = audioContext.createPanner();
panner.panningModel = 'HRTF';
panner.distanceModel = 'inverse';
panner.refDistance = 1;
panner.maxDistance = 20;
panner.rolloffFactor = 1.5;
panner.position.set(position.x, position.y, position.z);
source.connect(panner).connect(audioContext.destination);
source.loop = true;
source.start();
}
function updateListener() {
audioContext.listener.position.set(
camera.position.x,
camera.position.y,
camera.position.z
);
}Performance for VR and Mobile
VR requires a steady 72-90 FPS; frame drops cause motion sickness. Key targets: keep draw calls under 200, use instanced meshes for repeated objects, and limit dynamic lights to 1-2 per scene. Use baked lighting (lightmaps) for static objects.
For performance measurement, use Three.js Stats.js overlay. On mobile, reduce pixel ratio (renderer.setPixelRatio(1)) and disable post-processing. Always profile on the target device.
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.0;
const count = 100;
const matrix = new THREE.Matrix4();
const mesh = new THREE.InstancedMesh(geometry, material, count);
for (let i = 0; i < count; i++) {
matrix.setPosition(Math.random() * 50, 0, Math.random() * 50);
mesh.setMatrixAt(i, matrix);
}
scene.add(mesh);Frequently Asked Questions
Do I need a VR headset to build metaverse experiences?
No. You can build and test entirely on desktop using browser dev tools. WebXR emulator extensions simulate VR input. For final testing, a Quest 2/3 ($300) is the most accessible device, but the code works across all WebXR-compatible headsets.
What is the best game engine for metaverse development?
Three.js (web-native), Unity, and Unreal are all viable. Three.js has the widest reach (no install required). Unity has the largest asset store. Unreal has the best visuals. Choose based on your target platform.
How do I handle user moderation in a virtual world?
Implement mute/block per user, report functionality, and proximity-based voice chat (users move away to stop hearing someone). For public worlds, have moderators with tools to teleport or disconnect disruptive users.
What is the difference between WebXR and native VR development?
WebXR runs in a browser — instant access, no install, cross-platform. Native VR (Unity + SteamVR/Oculus SDK) has better performance and access to hardware features like eye tracking and foveated rendering.
Originally published on Ayodhyyya. Last updated June 1, 2026.