Melonjs 3d
Use this skill for anything 3D or 2.5D in melonJS, Camera3d, Mesh, InstancedMesh...
Install
npx skills add melonjs/melonJS --skill melonjs-3d -g -a claude-code -y- Repository
- melonjs/melonJS6.4k
- Category
- Media
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
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.
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.
