GAMES / 3D

Portable 3D games

The P2LRN 3D environment uses Three.js for the scene and Rapier for the physics, with the Player's own integration layer.

Architecture

native questionnaire→ game compiler→ 3D mechanics→ Three.js→ Rapier→ P2LRN events / score

Educational logic is separated from rendering and physics. Three.js draw; Rapier calculates bodies and collisions; The quiz runtime maintains answers, scores, progress, and attempts.

Available mechanics

ordering-3d

Physical objects that are placed in ordered positions.

matching-3d

Left and right nodes that connect without altering the response model.

classification-3d

Objects that are deposited in categories. It is a native type of the P2LRN questionnaire.

Create and edit 3D games from Studio

In Add content → Games selects 3D game (sort), Relate 3D or Classify 3D. They all use the same Player 3D engine; They are not different engines.

Open the activity in the course tree. In each question, the field Type permite cambiar entre Ordering, Matching and Classification. You can combine questions from the three modalities in the same activity.

Changing the type of a question replaces its specific elements and solutions, because their formats are different. The personalized utterance, tense, and punctuation are preserved; check the new answers before exporting the file .p2lrn. Test the result with Learner view.

Classification question

This example shows the form of a rating question that can be represented within a 3D experience.

questionnaire.json

{
  "id": "classify",
  "type": "classification",
  "prompt": "Classify the items by type.",
  "points": 4,
  "required": true,
  "items": [
    {"id": "dog", "text": "Dog"},
    {"id": "oak", "text": "Oak"}
  ],
  "categories": [
    {"id": "animal", "text": "Animal"},
    {"id": "plant", "text": "Plant"}
  ],
  "solution": {
    "assignments": [
      {"item": "dog", "category": "animal"},
      {"item": "oak", "category": "plant"}
    ]
  }
}

The same type can be resolved with the standard renderer using accessible selectors or with the 3D renderer. The logical answer remains { classifications: { itemId: categoryId } }.

Create a 3D package

If you generate the course by code, add the quiz to the workspace and request the 3D presentation before building the package.

Node.js

import {P2LRNAuthoringWorkspace} from '@p2lrn/toolkit/authoring';

const workspace = P2LRNAuthoringWorkspace.create('./workspace', {
  title: 'Quest 3D portable',
  language: 'en'
});

workspace.addQuestionnaire({
  source: './quest-3d.json',
  key: 'quest-3d',
  title: 'Laboratorio Quest 3D',
  renderer: 'https://p2lrn.org/renderer/questionnaire/3d-order-match'
});

workspace.build('./quest-3d-course.p2lrn', {
  strictProfiles: true
});

Identificador estable

The renderer preserves the historical identifier for compatibility 3d-order-match, although now it also supports classification.

Three.js and Rapier are within the distribution

The Player build fixes and verifies the versions before copying them to dist/vendor/. They are not downloaded from a third-party CDN during gameplay.

Three.js 0.186.1

Scene, camera, lights, materials, raycasting and WebGL.

Rapier 3D 0.21.0

Rigid bodies, colliders, gravity and physical step.

no-physics

Local fallback if the physical engine cannot be initialized; maintains representation and controls.

Logic does not depend on physics

Operations like sorting, connecting, classifying, and ownership live in game-3d-mechanics.js. A change in physical motor does not change the answers or the educational calculation.

separation of concerns

visual interaction
      ↓
{ kind: "classification-set",
  itemId: "dog",
  categoryId: "animal" }
      ↓
questionnaire answer
      ↓
score / progress / complete

Accessibility and alternative mode

The 3D scene is not the only control. Sort, relate, and sort maintain equivalent HTML controls next to the canvas. The learner can complete the same activity without depending exclusively on graphic precision or 3D pointer.

Runnable example

The canonical example contains all three mechanics in a single, strictly validated package.

Open in viewer .p2lrn package Creation code

Limitations

This runtime does not yet declare WebXR/Meta Quest or multiplayer sync as a P2LRN capability. The architecture leaves separate physical and mechanical inputs so they can be added later without linking the format to a specific LMS.

Do you need to integrate a new mechanic?

Contact