Cross-academy build · 5 substantial stages

Build a measured 3D game scene

Create a compact courtyard with an original GLB asset, camera controls, lighting, animation and simple collision. Connect Blender export choices to browser rendering cost and recovery behavior.

This is a project brief and local evidence notebook. Implement the project in your own development repository using synthetic data. Checklists and the review question record self-review; LearnLab does not execute these project files, inspect a live database, grade the implementation or certify security. Starter snippets are deliberately partial. Link actual commands, outputs, revisions and screenshots to your notes. Publishing requires a separate deliberate release decision.

Skills this project brings together

Implementation stage · self-review

1. Make the scene/camera contract visible

Start with primitive geometry before loading any assets. Place a floor, one landmark and a movable object in a documented coordinate system. Keep camera, render size and frame update responsibilities explicit.

Acceptance criteria

Mark an item only after you have reviewed the corresponding implementation and evidence. These are your declarations, not automated test results.

Document world units, up axis, object origins and the camera's near/far range.Render a visible primitive with a suitable material/light combination and a clear background.Update renderer size and camera projection when the viewport changes.Provide a readable fallback when WebGL initialization is unavailable; never report a black canvas as successful rendering.

Concrete tests to run

A known cube at the scene origin appears in front of the camera within the clipping range.
Move it outside the range and explain the disappearance, then restore it.
Resize from 390×844 to 1366×768 without stretching the scene or covering controls.
Simulate unavailable rendering support and verify a useful text fallback.

Failure to watch for

For a black scene, check camera direction/clipping, mesh visibility, material and lighting as separate hypotheses before replacing the asset pipeline.

Open the partial starter

function resizeScene(renderer, camera, width, height) {
  if (width < 1 || height < 1) return;
  renderer.setSize(width, height, false);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
}
// Call with your measured container dimensions.

This fragment frames the next design decision. It is not a finished implementation.

Your evidence notebook

Decisions, commands, observed results, and remaining gaps

Back up your work →

This notebook stores text and review declarations. It does not execute files, grade a capstone, grant mastery, or publish an application. Up to 50 recent learning drafts are retained; export a backup for longer-term work.