Discord | Bluesky | 𝕏

PixiJS 3D

Combine 2D and 3D in one place, the PixiJS way.

• 🚀 WebGL2 & WebGPU Renderers
• 🧩 A 3D View You Add to the Stage Like a Sprite
• 📦 glTF Models, with Draco and meshopt Compression
• 🎨 PBR, Phong and Toon Materials
• 💡 Lights and Shadows
• 🏃 Skinned and Morph-Target Animation
• ✨ Particles
• 🪄 Post-Processing Effects such as Bloom and Ambient Occlusion
• ✋ Pointer Events on 3D Objects

Setup

It's easy to get started with PixiJS 3D! Just use our PixiJS Create CLI and get set up in just one command:

npm create pixi.js@latest
Copy

or to add it to an existing project:

npm install pixi.js @pixi/3d
Copy

@pixi/3d needs pixi.js 8.23.0 or later. Installation covers the CDN build.

Usage

import { CubeGeometry, DirectionalLight, Material3D, Mesh3D, View3D } from '@pixi/3d';
import { OrbitCamera } from '@pixi/3d/extras';
import { Application } from 'pixi.js';

(async () => {
  // Create a new application
  const app = new Application();

  await app.init({ preference: 'webgpu', background: '#1a1a2e', resizeTo: window, antialias: true });
  document.body.appendChild(app.canvas);

  // A View3D draws a 3D scene; its environment lights it from above and below
  const view3d = new View3D({ autoResize: true, environment: { skyColor: 0xc9d6ff, groundColor: 0x3a2f45 } });

  app.stage.addChild(view3d);

  // A red cube, and a sun shining on it
  const cube = new Mesh3D({ geometry: new CubeGeometry(), material: new Material3D({ baseColor: 0xdd4444 }) });
  const sun = new DirectionalLight({ intensity: 3 });

  sun.position.set(-3, 5, 2);
  view3d.root.addChild(cube, sun);
  sun.lookAt(cube.position);

  // Move the camera back; drag to orbit it around the cube
  view3d.camera.position.set(0, 1.5, 4);
  new OrbitCamera({ view: view3d });

  // Spin the cube
  app.ticker.add((time) => {
    cube.rotation.y += 0.01 * time.deltaTime;
  });
})();
Copy

The Quick start builds a scene step by step, and the Introduction points to the guide for each part.

TypeScript

PixiJS 3D ships its own type declarations. Like PixiJS, they depend on the WebGPU types, and where those come from depends on your TypeScript version.

TypeScript 5: no WebGPU types are built in, so pixi.js adds @webgpu/types for you. No additional setup required.

TypeScript 6 and 7: the WebGPU types are built into the "dom" library, but some releases leave parts out, such as GPUTextureUsage. Use @types/web, which has the full set, in place of "dom". Remove @webgpu/types from types if it's there, since it conflicts with the built-in types.

npm install --save-dev @types/web
Copy

{
  "compilerOptions": {
    "lib": ["esnext"],
    "types": ["@types/web"]
  }
}
Copy

The types for @pixi/3d/extras come through the package's exports, so use a moduleResolution that reads them, such as "bundler".

Contribute

Read the Contributing Guide before submitting changes.

License

This content is released under the MIT License.

PixiJS Sponsors

We're passionate about making PixiJS the best graphics library possible. Our dedication comes from our love for the project and community.

If you'd like to support our efforts, please consider becoming a sponsor.