BUILD A PLAYABLE GAME CHARACTER
WITH GROK BOT + THREE.JS

Turn one concept image into a rigged, animated, playable Three.js soldier with Grok Bot — he walks, runs, jumps, fires and reloads, with gun effects and keyboard controls. Steps 1–6 need no code; you finish by loading the exported .glb into your own scene.

Low-poly armored soldier game character in olive and yellow armor holding a rifle, built with Grok Bot and Three.js

LIVE DEMO

The armored soldier behind this page is the live demo — the real exported GLB loaded in Three.js. Launch the full-screen demo to orbit the camera and play all ten animation clips — Idle, Walk, Run, Jump, Fire, Reload, Death, plus fire-on-the-move (WalkFire, RunFire, JumpFire), with live gun effects.

WANT TO BLOW STUFF UP?

Switch from characters to effects: build a 3D rockfire explosion in Three.js — flying debris rocks, fire, smoke, a shockwave ring, and camera shake. The whole blast in one copy-paste file, with a live demo you can orbit.

3D rockfire explosion effect built in Three.js

See the Rockfire Explosion Tutorial

Introduction

A game character has to do a lot: move, run, jump, fire, reload, and look alive while doing it. Building and rigging one by hand is slow. In this tutorial you start from a single concept image and let Grok Bot — an AI assistant that writes and runs code on its own cloud computer — produce a rigged, animated, playable soldier for Three.js. You finish with a .glb you load into your own game.

Steps 1 through 6 are plain-English prompts you can paste — no coding. Step 7 is the only code: the minimum to load the GLB and drive its clips from the keyboard, included in full below.

Frequently Asked Questions

Can AI make a playable, animated game character?

Yes. The armored soldier on this page was built with Grok Bot from a single concept image. From plain-English prompts it produced a procedural low-poly model with a 19-bone skeleton and ten animation clips (Idle, Walk, Run, Jump, Fire, Reload, Death, plus WalkFire, RunFire and JumpFire for firing on the move), plus gun effects and keyboard and mouse controls, exported as a GLB you can drop into your own Three.js game.

What is Grok Bot?

Grok Bot is an AI desktop app for Windows that does real work rather than just answering. It has its own cloud computer with a browser, so it can run code, build files and preview them while you chat. It is included with paid Cursor plans or a linked SuperGrok subscription.

Do I need to code to build the character?

No. Steps 1 through 6 are plain-English prompts you paste into Grok Bot — no coding. You only need a little Three.js and JavaScript for the final step, where you load the exported GLB into your own scene. The full load-and-animate code is included on this page.

How do you load the soldier GLB in Three.js?

Load armored_soldier.glb with GLTFLoader, add gltf.scene to your scene, create one AnimationMixer, and turn each clip in gltf.animations into an action. Play Idle by default, crossfade between Walk and Run from the keys held, and fire Jump, Fire and Reload once with setLoop(THREE.LoopOnce) and clampWhenFinished before handing control back to movement. Update the mixer every frame.

What animations does the soldier GLB include?

Ten clips: the seven base moves (Idle, Walk, Run, Jump, Fire, Reload, Death) plus three baked fire-on-the-move combos (WalkFire, RunFire, JumpFire) so the gun aims forward while moving. The GLB holds the mesh, a 19-bone skeleton and all ten clips, so it also works in Blender (File, Import, glTF 2.0), Unity (with a glTF importer such as glTFast or UnityGLTF) and Godot 4, which imports .glb natively.

Is this tutorial free?

Yes. The animated soldier behind this page is a live Three.js demo, and the full load-and-animate source is on the page. Signing in with Google to reveal the code is free — it takes one click and unlocks every free tutorial on the site.

Play My Free Browser Games

Super Soldier Battle

Free 3D multiplayer FPS built with Three.js and WebGL. Destroy the enemy bots and turrets, climb the leaderboard.

Play now →

AI Tic-Tac-Toe

Play the classic game against an AI opponent right in your browser. Free, no download, with an online leaderboard.

Play now →

What You'll Need

The Grok Bot desktop app on Windows (included with paid Cursor plans, or with a linked SuperGrok subscription).
A concept image of your character — find one or generate one.
A modern browser to open the page Grok Bot builds.
Basic Three.js and JavaScript for Step 7, where you load the character into your own scene. Steps 1–6 need no coding.

1Start from a concept image

Find or generate a concept image of your character. Ours is a low-poly armored soldier in olive and yellow armor, holding a rifle. Attach it to your message in Grok Bot and ask for everything a Three.js game needs in one go: a rigged GLB with game animations, and a Three.js page to test them.

Concept art: a low-poly olive and yellow armored soldier holding a rifle — Input: the concept image attached to the first message.

Prompt to paste: Build this character as a rigged, animated GLB with walk, run, jump, fire, reload, idle and death animations, plus a Three.js HTML page with animation buttons.

What Grok Bot produced: a procedural low-poly model with a 19-bone skeleton and ten animation clips, plus a Three.js viewer page with orbit controls, clip buttons, a speed slider, a skeleton toggle and a Download GLB button.

Tip — close in style, not a copy. Grok Bot builds the model procedurally from code, so it matches the art's style and colors but isn't a pixel-perfect copy of the image. Expect the same look, not an exact match.

2Add gun effects and game controls

Now make it playable. Ask for firing effects and keyboard and mouse controls in one message, and ask for the on-screen instructions to be updated so players know the keys.

Prompt to paste: Add firing effects to the gun, WASD to move, Shift to run, Space to jump, F or left mouse to fire, R to reload, and update the instructions panel.

What Grok Bot produced: gun VFX (muzzle flash, tracers, ejecting shell casings, smoke and impact sparks); controls for W A S D to move, Shift to run, Space to jump, F or left mouse to fire, R to reload; a follow camera with right-drag to orbit; and an updated instructions panel.

The soldier firing with muzzle flash, tracer and smoke — Firing: muzzle flash, tracer and smoke.

The soldier moving with the instructions panel open — Moving, with the updated instructions panel.

Tip — list every key in one message. Spell out each control you want. It's quicker for Grok Bot to wire them all at once than to add them one by one later.

3Tune the speed

Play it for a minute. If something feels off, just say so in plain words. Ours felt slow.

Prompt to paste: He feels slow. Please speed up the animations.

What Grok Bot produced: per-clip speeds (Fire 1.8x, Walk 1.5x, Run 1.3x), with movement speed matched to the animations so the feet don't slide on the ground.

The soldier running at the tuned speed — Run, at the new speed.

Tip — describe the feeling. You don't need numbers. "He feels slow" was enough for Grok Bot to pick sensible speeds for each clip.

4Fix turning with procedural legs

Turning in place often looks fake: the whole body rotates like it's standing on a turntable. Describe exactly that, and ask for the legs to step.

Prompt to paste: When he turns, he spins like he's on a turntable. Animate the legs procedurally when he turns.

What Grok Bot produced: planted feet and hips leading the turn, alternating IK steps so the legs step around instead of sliding, and a lean into turns.

The soldier stepping through a turn instead of spinning — Turning: the legs step instead of spinning.

Tip — name what looks wrong. "Spins like he's on a turntable" tells Grok Bot exactly what to fix. A clear picture of the problem works better than a technical term.

5Make the motion more human

Code-built animation can look stiff. A short, open request is enough to get a full polish pass.

Prompt to paste: Make the movement more human and less robotic.

What Grok Bot produced: a heel-to-toe walk with hip sway and counter-rotation, overlapping motion and a breathing idle, recoil absorbed through the body (not just the arms), and spring lag on the head, chest and rifle.

A filmstrip of the more human walk cycle — The walk cycle, frame by frame.

Tip — broad requests are fine here. When you're not sure what's missing, a general request like this lets Grok Bot choose the details. Then refine whatever still looks off.

6Fire and jump on the move

A game character has to do more than one thing at once. Ask for the combinations you want to play.

Prompt to paste: He needs to fire while running and walking, and jump while running.

What Grok Bot produced: an upper-body fire layer over walking and running, momentum-keeping jumps and firing in mid-air, and level aim while moving.

The soldier firing while running — Firing while running.

The soldier jumping while running — Jumping on the run.

Tip — ask for the moves you'll actually use. Think about how the game will be played and ask for those combinations directly. Grok Bot can layer animations so one doesn't cancel the other.

7Use It In Three.js

Click Download GLB in the viewer, or take armored_soldier.glb from the kit. It holds the mesh, the 19-bone skeleton and all ten clips. Here is the minimum to put him in your own Three.js game:

Load the GLB with GLTFLoader and build one AnimationMixer, turning each clip into an action and updating the mixer every frame.
Crossfade clips with a small play() helper (apply each clip's timeScale so the feet don't slide) so Walk blends to Run instead of snapping.
Map keys to clips — WASD/Shift pick Walk/Run (Idle when still), F fires. Firing on the move plays the baked WalkFire/RunFire combo clips so the gun aims forward; Jump and Reload play once.

Also works in Blender, Unity and Godot. In Blender use File → Import → glTF 2.0 (each clip imports as an Action). Unity needs a glTF importer such as glTFast or UnityGLTF. Godot 4 imports .glb natively, with the clips in the AnimationPlayer. Play every clip once after importing.

Sign in to unlock the code

This tutorial is 100% free — just sign in with Google to reveal the complete load-and-animate Three.js code and the one-click Launch. It takes one click and unlocks every free tutorial.

The Full Code

A complete, runnable page: it loads armored_soldier.glb from a CDN URL, sets up the AnimationMixer, crossfades clips, and drives them from the keyboard. Copy it into index.html and open it — or hit Launch. Use WASD to move, Shift to run, Space/F/R to jump, fire and reload.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Armored Soldier</title>
  <style>
    html, body { margin: 0; height: 100%; background: #0c0d10; overflow: hidden; }
    canvas { display: block; }
    #hud { position: fixed; left: 16px; top: 16px; color: #cdd6e3;
      font: 14px/1.5 system-ui, sans-serif; background: rgba(0,0,0,.4);
      padding: 10px 14px; border-radius: 10px; pointer-events: none; }
    b { color: #ffd54a; }
  </style>
</head>
<body>
  <div id="hud"><b>WASD</b> move · <b>Shift</b> run · <b>Space</b> jump · <b>F</b> fire · <b>R</b> reload</div>
  <script async src="https://unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js"></script>
  <script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
    }
  }
  </script>
  <script type="module">
    import * as THREE from 'three';
    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    // --- scene, camera, renderer ---
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x0c0d10);

    const camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 0.1, 100);
    camera.position.set(3, 2.4, 4.5);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
    renderer.setSize(innerWidth, innerHeight);
    renderer.outputColorSpace = THREE.SRGBColorSpace;
    document.body.appendChild(renderer.domElement);

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.target.set(0, 1, 0);
    controls.enableDamping = true;

    scene.add(new THREE.HemisphereLight(0xffffff, 0x33404d, 1.1));
    const key = new THREE.DirectionalLight(0xffffff, 1.6);
    key.position.set(4, 8, 5);
    scene.add(key);
    const grid = new THREE.GridHelper(20, 20, 0x3a3f4a, 0x23262e);
    scene.add(grid);

    // --- load the GLB and set up the AnimationMixer ---
    const clock = new THREE.Clock();
    const actions = {};
    let mixer, soldier, current, busy = false;

    // Per-clip timeScale keeps the feet from sliding; moveSpeed (m/s) is the
    // ground speed the baked stride was made for. WalkFire/RunFire/JumpFire bake
    // the Fire upper body onto the move legs, so the gun aims forward on the move.
    // shots[] = clip-time beats (seconds) a round is fired on, from the kit notes.
    const META = {
      Idle:     { timeScale: 1 },
      Walk:     { timeScale: 1.5, speed: 1.0909 },
      Run:      { timeScale: 1.3, speed: 3.4211 },
      Jump:     { timeScale: 1,   once: true },
      Fire:     { timeScale: 1.8, shots: [0, 0.2, 0.4] },
      Reload:   { timeScale: 1,   once: true },
      Death:    { timeScale: 1,   once: true },
      WalkFire: { timeScale: 1,   speed: 1.0909, shots: [0, 0.1048, 0.2095, 0.3143, 0.419, 0.5238, 0.6286] },
      RunFire:  { timeScale: 1,   speed: 3.4211, shots: [0, 0.1108, 0.2215, 0.3323, 0.4431] },
      JumpFire: { timeScale: 1,   once: true, shots: [0, 0.1111, 0.2222, 0.3333, 0.4444, 0.5556, 0.6667, 0.7778, 0.8889, 1, 1.1111] }
    };

    let weaponBone = null;
    new GLTFLoader().load('armored_soldier.glb', (gltf) => {
      soldier = gltf.scene;
      scene.add(soldier);
      mixer = new THREE.AnimationMixer(soldier);
      // 10 clips: Idle, Walk, Run, Jump, Fire, Reload, Death, WalkFire, RunFire, JumpFire
      for (const clip of gltf.animations) actions[clip.name] = mixer.clipAction(clip);
      for (const n in META) {
        if (actions[n] && META[n].once) { actions[n].setLoop(THREE.LoopOnce); actions[n].clampWhenFinished = true; }
      }
      // The gun VFX ride the Weapon bone, so they aim wherever the clip points.
      soldier.traverse((o) => { if (o.isBone && o.name === 'Weapon') weaponBone = o; });
      mixer.addEventListener('finished', () => { busy = false; });
      play('Idle');
    });

    // ---- Gun VFX: muzzle flash, tracers, shell casings, smoke, impact sparks ----
    const MUZZLE = new THREE.Vector3(0, -0.625, 0.075);   // Weapon-bone local (barrel = -Y)
    const EJECT  = new THREE.Vector3(-0.04, -0.13, 0.1);
    const fx = new THREE.Group(); scene.add(fx);
    const ADD = { transparent: true, blending: THREE.AdditiveBlending, depthWrite: false, fog: false };
    function cvsTex(draw) { const c = document.createElement('canvas'); c.width = c.height = 128; draw(c.getContext('2d')); const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; return t; }
    const starTex = cvsTex(g => {
      g.translate(64, 64); g.globalCompositeOperation = 'lighter';
      const r = g.createRadialGradient(0, 0, 0, 0, 0, 30); r.addColorStop(0, 'rgba(255,255,240,1)'); r.addColorStop(0.4, 'rgba(255,190,90,.8)'); r.addColorStop(1, 'rgba(255,120,20,0)');
      g.fillStyle = r; g.beginPath(); g.arc(0, 0, 30, 0, 7); g.fill();
      [[0,62,7],[Math.PI/2,62,7],[Math.PI/4,38,4],[-Math.PI/4,38,4]].forEach(([a,len,w]) => { g.save(); g.rotate(a); const l = g.createLinearGradient(-len,0,len,0); l.addColorStop(0,'rgba(255,140,30,0)'); l.addColorStop(0.5,'rgba(255,245,210,1)'); l.addColorStop(1,'rgba(255,140,30,0)'); g.fillStyle = l; g.beginPath(); g.moveTo(-len,0); g.lineTo(0,-w); g.lineTo(len,0); g.lineTo(0,w); g.fill(); g.restore(); });
    });
    const puffTex = cvsTex(g => { const r = g.createRadialGradient(64,64,0,64,64,62); r.addColorStop(0,'rgba(255,255,255,1)'); r.addColorStop(0.5,'rgba(255,255,255,.45)'); r.addColorStop(1,'rgba(255,255,255,0)'); g.fillStyle = r; g.fillRect(0,0,128,128); });
    const flashA = new THREE.Sprite(new THREE.SpriteMaterial({ map: starTex, color: 0xffe0a0, ...ADD }));
    const flashB = new THREE.Sprite(new THREE.SpriteMaterial({ map: starTex, color: 0xffb060, ...ADD }));
    flashA.visible = flashB.visible = false; fx.add(flashA, flashB);
    const flashLight = new THREE.PointLight(0xffa850, 0, 1.4, 2); fx.add(flashLight);
    let flashAge = 1; const FLASH_LIFE = 0.05;
    function pool(n, make) { const items = []; for (let i = 0; i < n; i++) { const o = make(); o.visible = false; fx.add(o); items.push({ o, age: 0, life: 1, v: new THREE.Vector3(), w: new THREE.Vector3(), d: 0 }); } let i = 0; return { items, get() { const it = items[i]; i = (i + 1) % n; it.age = 0; it.o.visible = true; return it; } }; }
    const tracers = pool(16, () => new THREE.Mesh(new THREE.BoxGeometry(0.014, 0.014, 0.9).translate(0, 0, -0.45), new THREE.MeshBasicMaterial({ color: 0xffd890, ...ADD })));
    const casings = pool(40, () => new THREE.Mesh(new THREE.CylinderGeometry(0.0065, 0.0065, 0.032, 6).rotateZ(Math.PI / 2), new THREE.MeshStandardMaterial({ color: 0xd4a640, metalness: 0.85, roughness: 0.3, emissive: 0x3a2600, transparent: true })));
    const smokes = pool(24, () => new THREE.Sprite(new THREE.SpriteMaterial({ map: puffTex, color: 0xb9c0c6, transparent: true, depthWrite: false, opacity: 0 })));
    const sparks = pool(90, () => new THREE.Mesh(new THREE.BoxGeometry(0.008, 0.008, 0.07).translate(0, 0, -0.035), new THREE.MeshBasicMaterial({ color: 0xffb050, ...ADD })));
    const _p = new THREE.Vector3(), _d = new THREE.Vector3(), _q = new THREE.Quaternion(), _z = new THREE.Vector3(0, 0, 1), _t = new THREE.Vector3();
    function muzzleFrame(pos, dir, q = _q) { soldier.updateMatrixWorld(true); weaponBone.getWorldQuaternion(q); weaponBone.localToWorld(pos.copy(MUZZLE)); dir.set(0, -1, 0).applyQuaternion(q).normalize(); }
    function impact(p) { for (let i = 0; i < 9; i++) { const s = sparks.get(); s.life = 0.25 + Math.random() * 0.25; s.o.position.copy(p); s.v.set(Math.random() - 0.5, Math.random() * 0.9 + 0.3, Math.random() - 0.5).normalize().multiplyScalar(2 + Math.random() * 4); } }
    function fireVFX() {
      if (!weaponBone) return;
      const pos = new THREE.Vector3(), dir = new THREE.Vector3(), q = new THREE.Quaternion();
      muzzleFrame(pos, dir, q);
      flashAge = 0; flashA.material.rotation = Math.random() * Math.PI; flashB.material.rotation = Math.random() * Math.PI;
      const tr = tracers.get(); tr.d = 0; tr.v.copy(dir).multiplyScalar(70); tr.o.position.copy(pos); tr.o.quaternion.setFromUnitVectors(_z, _d.copy(tr.v).normalize()); tr.o.scale.set(1, 1, 0.01);
      const c = casings.get(); c.life = 3; weaponBone.localToWorld(c.o.position.copy(EJECT)); c.v.set(-1, 0.25, 0.75).applyQuaternion(q).normalize().multiplyScalar(2 + Math.random()); c.w.set(Math.random()*30-15, Math.random()*30-15, Math.random()*30-15); c.o.quaternion.copy(q); c.o.material.opacity = 1;
      for (let i = 0; i < 2; i++) { const s = smokes.get(); s.life = 0.8 + Math.random() * 0.4; s.o.position.copy(pos).addScaledVector(dir, 0.06 + i * 0.08); s.v.copy(dir).multiplyScalar(0.5 + Math.random() * 0.4).add(_t.set(0, 0.18, 0)); s.o.material.rotation = Math.random() * 6; }
    }
    function updateFX(dt) {
      flashAge += dt; const on = flashAge < FLASH_LIFE;
      flashA.visible = flashB.visible = on; flashLight.intensity = on ? 1.4 * (1 - flashAge / FLASH_LIFE) : 0;
      if (on && weaponBone) { muzzleFrame(_p, _d); const k = 1 - flashAge / FLASH_LIFE * 0.5; flashA.position.copy(_p).addScaledVector(_d, 0.05); flashA.scale.setScalar(0.32 * k); flashB.position.copy(_p).addScaledVector(_d, 0.15); flashB.scale.setScalar(0.18 * k); flashLight.position.copy(_p).addScaledVector(_d, 0.3); }
      for (const t of tracers.items) if (t.o.visible) { const step = t.v.length() * dt; t.o.position.addScaledVector(t.v, dt); t.d += step; t.o.scale.z = Math.min(1, t.d / 0.9); if (t.o.position.y <= 0) { t.o.position.y = 0; impact(t.o.position); t.o.visible = false; } else if (t.d > 24) { impact(t.o.position); t.o.visible = false; } }
      for (const c of casings.items) if (c.o.visible) { c.age += dt; c.v.y -= 9.8 * dt; c.o.position.addScaledVector(c.v, dt); c.o.rotation.x += c.w.x * dt; c.o.rotation.y += c.w.y * dt; c.o.rotation.z += c.w.z * dt; if (c.o.position.y < 0.0065) { c.o.position.y = 0.0065; if (c.v.y < 0) { c.v.y *= -0.38; c.v.x *= 0.55; c.v.z *= 0.55; c.w.multiplyScalar(0.5); if (Math.abs(c.v.y) < 0.15) c.v.y = 0; } } c.o.material.opacity = Math.min(1, (c.life - c.age) / 0.8); if (c.age > c.life) c.o.visible = false; }
      for (const s of smokes.items) if (s.o.visible) { s.age += dt; const u = s.age / s.life; s.v.multiplyScalar(Math.exp(-2.5 * dt)); s.o.position.addScaledVector(s.v, dt); s.o.scale.setScalar(0.07 + 0.4 * Math.sqrt(u)); s.o.material.opacity = 0.32 * (1 - u) * Math.min(1, u * 8); if (u >= 1) s.o.visible = false; }
      for (const s of sparks.items) if (s.o.visible) { s.age += dt; s.v.y -= 9.8 * dt; s.o.position.addScaledVector(s.v, dt); if (s.o.position.y < 0) { s.o.position.y = 0; s.v.y *= -0.3; } s.o.quaternion.setFromUnitVectors(_z, _d.copy(s.v).normalize()); s.o.material.opacity = 1 - s.age / s.life; if (s.age > s.life) s.o.visible = false; }
    }
    // Spawn a shot on each baked beat of whichever firing clip is playing.
    let firingName = null, shotCount = 0;
    function syncShots() {
      if (!current) return;
      const name = current.getClip ? current.getClip().name : null;
      const meta = META[name];
      if (!meta || !meta.shots) { firingName = null; shotCount = 0; return; }
      if (name !== firingName) { firingName = name; shotCount = 0; }
      let fired = 0; for (let i = 0; i < meta.shots.length; i++) if (current.time + 1e-4 >= meta.shots[i]) fired++;
      while (shotCount < fired) { shotCount++; fireVFX(); }
      if (meta.shots.length && current.time < meta.shots[0] + 0.02 && shotCount >= meta.shots.length) shotCount = 0;
    }

    // --- crossfade helper: blend from the current clip to the next ---
    function play(name, fade = 0.2) {
      const next = actions[name];
      if (!next || (next === current && next.isRunning())) return;
      const ts = (META[name] && META[name].timeScale) || 1;
      next.reset().setEffectiveWeight(1).setEffectiveTimeScale(ts).play();
      if (current) current.crossFadeTo(next, fade, false);   // warp=false: keeps timeScale in r160
      current = next;
    }

    // --- keys ---
    const keys = {};
    const heading = new THREE.Vector3();
    function oneShot(name) { busy = true; play(name, 0.1); }
    addEventListener('keydown', (e) => {
      if (keys[e.code]) return;        // ignore auto-repeat
      keys[e.code] = true;
      if (e.code === 'Space') oneShot(keys.KeyF ? 'JumpFire' : 'Jump');
      if (e.code === 'KeyR')  oneShot('Reload');
    });
    addEventListener('keyup', (e) => { keys[e.code] = false; });

    // Pick the clip from the keys: movement x firing x standing. Fire-on-the-move
    // uses the baked combo clips so the aim stays forward.
    function pickClip() {
      const moving = keys.KeyW || keys.KeyA || keys.KeyS || keys.KeyD;
      const run = keys.ShiftLeft || keys.ShiftRight, fire = keys.KeyF;
      if (!moving) return fire ? 'Fire' : 'Idle';
      if (fire) return run ? 'RunFire' : 'WalkFire';
      return run ? 'Run' : 'Walk';
    }

    // Move the soldier across the ground at the active clip's baked speed, and
    // face him to his movement direction (camera-relative WASD).
    const fwd = new THREE.Vector3(), right = new THREE.Vector3(), move = new THREE.Vector3();
    function updateLocomotion(dt) {
      if (busy) return;
      const name = pickClip();
      play(name);
      const meta = META[name] || {};
      if (!meta.speed) return;
      const f = (keys.KeyW ? 1 : 0) + (keys.KeyS ? -1 : 0);
      const r = (keys.KeyD ? 1 : 0) + (keys.KeyA ? -1 : 0);
      if (f === 0 && r === 0) return;
      camera.getWorldDirection(fwd); fwd.y = 0; fwd.normalize();
      right.set(fwd.z, 0, -fwd.x);
      move.set(0, 0, 0).addScaledVector(fwd, f).addScaledVector(right, r).normalize();
      soldier.position.addScaledVector(move, meta.speed * dt);
      soldier.rotation.y = Math.atan2(move.x, move.z);
    }

    // Keep the camera orbiting the soldier as he walks around.
    function cameraFollow() {
      if (!soldier) return;
      const dx = soldier.position.x - controls.target.x, dz = soldier.position.z - controls.target.z;
      if (dx * dx + dz * dz > 1e-8) { controls.target.x += dx; controls.target.z += dz; camera.position.x += dx; camera.position.z += dz; }
    }

    // --- render loop ---
    renderer.setAnimationLoop(() => {
      const dt = clock.getDelta();
      if (mixer) { updateLocomotion(dt); mixer.update(dt); syncShots(); updateFX(dt); }
      controls.update();
      cameraFollow();
      renderer.render(scene, camera);
    });

    addEventListener('resize', () => {
      camera.aspect = innerWidth / innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(innerWidth, innerHeight);
    });
  </script>
</body>
</html>

Tips For Working With Grok Bot

Iterate in small requests. One change per message is easier to check and easier to undo. "He feels slow. Please speed up the animations."

Ask for versioned files. Ask for v2, v3 and so on, so old downloads don't get mixed up with new ones. "Save this as v3 so I keep the old one."

Keep builds lean. Only ask for what you need right now — smaller builds use less of your usage. "Just update the HTML page this time, no new previews."

Describe what looks wrong. Plain words work — say what you see, not how to fix it. "When he turns, he spins like he's on a turntable."

PREFER A FRIENDLIER MODEL?

The companion tutorial builds a rigged, animated capybara in Three.js with Grok Bot — same no-code, prompt-driven workflow, taken from text to a downloadable GLB and a YouTube Short.

Rigged 3D capybara model animated in Three.js

See the Rigged Capybara Tutorial

BUILD A PLAYABLE GAME CHARACTERWITH GROK BOT + THREE.JS