Create a shared 3D scene that renders in the browser.

A 3D world requires four things: a Scene (the container for everything), a Camera (the viewer's eyes), a Renderer (draws the scene to the screen), and an Animation Loop (redraws every frame). This architecture is identical for both games.
Ami — Combat Risk Engine

Scene = Manhattan prototype. Flat ground plane, gray color. This is the foundation of the world your player will explore.
Ida — Economic Growth Engine

Scene = 14-lot block prototype. Flat ground plane, green color. This is the land your player will build on.

Install Three.js via CDN script tag in your HTML:

<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>

Create the Scene, Camera, and Renderer:

const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);

Add a ground plane:

const ground = new THREE.Mesh( new THREE.PlaneGeometry(50, 50), new THREE.MeshStandardMaterial({ color: 0x808080 }) // gray for Ami, 0x00aa00 green for Ida ); ground.rotation.x = -Math.PI / 2; scene.add(ground);

Add a directional light:

const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(10, 20, 10); scene.add(light);

Position the camera and create the animation loop:

camera.position.set(0, 20, 20); camera.lookAt(0, 0, 0); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate();
  • Add Three.js via CDN script tag
  • Create Scene + PerspectiveCamera + WebGLRenderer
  • Add PlaneGeometry as ground plane
  • Add basic directional light
  • Create animation loop
  • Position camera above and angled downward
    •
    Checkpoint

    Page loads. You see a flat plane in 3D. Camera is positioned above looking down.

    No textures. No models. No details. Just a plane and a light.

    Forgetting to append renderer.domElement to the document — the scene exists but nothing appears on screen.

    Camera pointing wrong direction — if you don't set position and lookAt, the camera may face empty space.

    Forgetting the animation loop — the scene appears frozen because it only renders once.

    This is the first visual moment. Let them enjoy seeing 3D. Explain that the animation loop is why games run continuously — it redraws 60 times per second. Even though nothing moves yet, the loop is already running.