# Melonjs 3d

Use this skill for anything 3D or 2.5D in melonJS, Camera3d, Mesh, InstancedMesh...

- Repository: https://github.com/melonjs/melonJS (6430 stars)
- Category: Media
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add melonjs/melonJS --skill melonjs-3d -g -a claude-code -y`
Codex: `npx skills add melonjs/melonJS --skill melonjs-3d -g -a codex -y`
Cursor: `npx skills add melonjs/melonJS --skill melonjs-3d -g -a cursor -y`
Gemini CLI: `npx skills add melonjs/melonJS --skill melonjs-3d -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add melonjs/melonJS`

## Description

Use this skill for anything 3D or 2.5D in melonJS, Camera3d, Mesh, InstancedMesh, Sprite3d billboards, Light3d, ground shadows, glTF/GLB scenes, and depth sorting. Covers the Y-down/+Z-forward convention that is the inverse of OpenGL, the cameraClass opt-in, clip planes, and what does not work on the Canvas fallback. Triggers on: Camera3d, Mesh, InstancedMesh, Sprite3d, Trail3d, ribbon, exhaust trail, Light3d, billboard, glTF, glb, 3D, 2.5D, depth, cameraClass, fov, setClipPlanes, setFog, fog, distance fog, height fog, heightFalloff, transparent, transparency, alpha, blendMode, fade, castGroundShadow, lit, setBasis, getBasis, lookAt, up vector, gimbal, slerp, great circle, turn a direction.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 3D and 2.5D in melonJS

> melonJS is a 2D engine that grew a real 3D tier: perspective cameras, meshes,
> instancing, glTF scenes and 3D lights. Most of what a model "knows" about 3D
> graphics comes from the OpenGL convention, and **melonJS's is the inverse**.
> Read the conventions section before writing any 3D code.

## Coordinate conventions, the inverse of OpenGL

This is the single most important thing on this page.

| | melonJS | OpenGL convention |
|---|---|---|
| vertical | **Y-down**, higher `y` is *lower* on screen | Y-up |
| depth | **+Z forward**, higher `z` is *farther* away | −Z forward |

`Camera3d` exposes three rotation angles: `camera.pitch`
(X, look up/down), `camera.yaw` (Y, look left/right) and `camera.roll` (Z, bank
the horizon). The view is `R(yaw) ∘ R(pitch) ∘ R(roll)` inverted, and the frustum
planes come off that same matrix, so culling follows a banked view.

The basis those angles produce is **readable and writable**: `getBasis(right,
up, forward)` reads it, `setBasis(right, up, forward)` poses the camera from
one.

`camera.rotate()` is NOT the way to bank a 3D camera. It writes the inherited
`currentTransform`, which a 3D view never reads, so the call is silently inert.
Set `roll`. (On a `Camera2d` it is the other way round: roll IS that transform's
rotation, which is why `worldToLocal` / `localToWorld` compensate for it.)

The payoff is that 2D code translates directly, anywhere you used `pos.x` /
`pos.y`, add `pos.z` and the maths still holds. The cost is that every
OpenGL-shaped instinct is backwards.

**Consequence that bites immediately:** "behind everything" is the *largest*
depth when the camera looks along +Z. Put a backdrop on the wrong side and it
either paints over the whole scene (it is nearer than everything else) or
disappears without trace (it falls in front of the near plane and the GPU clips
it). Which sign means "far" depends on which side the camera sits, so check the
camera before picking a backdrop depth.

The rest: https://github.com/melonjs/melonJS/blob/HEAD/packages/melonjs/skills/melonjs-3d/SKILL.md