CSC:tactics

A Chinese soccer tactics teaching application with 52 situational challenges, 11 roles, three viewpoints and a 90-minute training plan containing 43 segments.

JavaScriptThree.jsCanvasViteInteractive learning

Open project

Built systemRank 02 of 9 in this field ↗

Why it sits here. The most complete interactive teaching tool: tactical challenges, animated drills, role perspectives, and a rendering fallback.

07 / A pitch. A piano roll. A new perspective.STUDY IN SPACE

THE QUESTION

Can the same tactical idea make sense from eleven positions on the field?

Make a tactical situation understandable from different teammates’ viewpoints, then connect that explanation to practice.

CSC:TACTICS / 4–2–3–1

11 viewpointssame game.

Concept diagram · not performance data

01 / IMPLEMENTATION & CONTRIBUTION

What the work involves

The project combines Chinese teaching content, 52 situational challenges, 11 selectable roles, three viewpoints, and a structured training plan using shared Three.js/Canvas scene logic.

Technical depth

Changing a drill changes scene objects, ball counts, and camera state together. Both renderers need consistent behavior across transitions.

Data and assumptions

52 tactical challenges, 11 roles, eight drills, and 43 training segments. Chinese training content is preserved in the original application.

Screen-based learning is a teaching aid. It is not evidence that a score transfers to match performance.

The project family

soccer

02 / THE EXPERIMENTAL RECORD

What the experiment taught

A two-ball drill changed to a one-ball drill while a stale extra-ball mesh remained. A camera reset rendered before the scene was synchronized.

What changed

Scene meshes are synchronized before the camera reset can trigger a render.

03 / RESULTS

What came out of it

A complete teaching application connects tactical explanations to a 90-minute practice plan with 43 segments. September 2026 verification records 11 Node and 12 browser tests, including both renderers and every training segment.