Create 3D JavaScript Game

Learn to obtain free 3d models and animations from Mixamo, import them into Blender, organize idle, running, and attack animations, and export as glTF for use in a Babylon.js project.

Set up a Babylon.js 3D game project by initializing npm and installing core and loaders. Create a client folder, HTML page, and a first scene with camera and hemispheric light.

Set up a camera container in a Babylon.js scene and move it with arrow keys, aligning a target above the ground and readying for model imports with a loader.

Borrow Poly Haven textures to create ground material in a Babylon.js scene, using diffuse and normal maps with a standard material, then adjust specular color, scale textures, and reduce shininess.

Export the GLB character, import it with the Babylon.js loader, and control its idle and attack animations via animation groups in the scene.

Move a 3d character by selecting a ground point with the mouse, using a root mesh and character box, to trigger running animation and directional translation with delta time.

Learn to stop a 3d character at its destination by adding an action manager with an execute code action triggered on collision, creating a target box and halting movement.

Create a basic 3D tree in Blender, adjust origin and unwrap textures, then export as glTF for seamless import into Babylon.js.

Learn to attach a name label above a character using a text block in Babylon.js, create an advanced dynamic texture, and billboard the label for 3D objects.

Learn to implement sound in a 3D JavaScript game using Babylon.js, including importing an MP3, organizing a sounds folder, enabling autoplay, and triggering a hit sound in the attack function.

Import and instantiate enemies with load asset container async and instantiate model to scene. Organize in an enemies array and attach a life bar UI to the body.

Implement a damage attack against a goblin enemy in a 3D JavaScript game. Wire clicks, distance checks, and target IDs to trigger attack sequences and remove defeated enemies.

Implement enemy chase and attack for a goblin in a 3d javascript game by measuring distance to the player, moving toward them, and triggering an attack when near.

Create character life ui in a 3d javascript game using a Babylon.js gui dynamic texture to render a red life bar and centered life text at the top-left that updates.

Build the project using the package.json build script via the command line, producing a dist folder with index.html and assets for deployment to Marcel and other sites.

Learn how to deploy a 3d JavaScript game to the web with vercel, linking GitHub, importing your repo, and pushing updates to deploy changes.

Publish your html5 rpg game on itch.io by creating an account, uploading a zip bundle, and configuring metadata, cover media, and tags for public discovery.