How to load a 3D model in Pixi3D?

Pixi3D supports glTF 2.0 models. For PixiJS v5/v6, use the loader API; for v7, use PIXI.Assets.load. Detailed code examples are in the quick guide, including async loading and model setup.

Pixi3D vs Three.js: which is better for web 3D?

Pixi3D is ideal if you're already using PixiJS for 2D and need seamless mixing of 2D/3D. Three.js is a more feature-rich standalone 3D engine with a larger community, better for pure 3D applications.

Can I use custom shaders in Pixi3D?

Yes, Pixi3D allows custom materials and shaders. The custom material sandbox example shows how to create and apply them for effects like unique lighting or textures.

Is Pixi3D good for mobile games?

Yes, it's production-ready and used on hundreds of thousands of mobile devices, but performance may degrade with complex scenes. Optimize by reducing polygon counts and using efficient shadows.

How to mix 2D and 3D elements in Pixi3D?

Add 2D PixiJS containers directly to the same stage as 3D models. Use camera methods like worldToScreen for coordinate conversion, as shown in the quick guide with vignette overlays.

Does Pixi3D support animations from Blender?

Yes, it supports skeletal, morphing, and transformation animations from glTF files exported from Blender. The animation example sandbox demonstrates how to play and control them.

Open-Awesome

Pixi3D

MITTypeScriptv2.5.0

A 3D rendering library for the web built on PixiJS, enabling seamless integration of 3D graphics into existing 2D applications.

Visit Website GitHub

826 stars47 forks0 contributors

What is Pixi3D?

Pixi3D is a 3D rendering library for the web that builds on top of PixiJS, a widely-used 2D rendering engine. It enables developers to add 3D graphics, models, lighting, and animations directly into their existing 2D PixiJS applications, solving the problem of integrating 3D content without switching to a completely different rendering framework.

Target Audience

Web developers and game creators who are already using PixiJS for 2D projects and want to incorporate 3D elements without leaving the PixiJS ecosystem. It's also suitable for interactive media projects, data visualizations, and educational applications requiring mixed 2D/3D rendering.

Value Proposition

Developers choose Pixi3D for its seamless integration with PixiJS, allowing them to leverage existing 2D code and assets while adding 3D capabilities. It offers production-ready performance, compatibility across PixiJS versions, and a straightforward API for loading models, applying materials, and managing lighting.

Overview

The 3D renderer for PixiJS. Seamless integration with 2D applications.

Use Cases

Best For

Adding 3D models and animations to 2D PixiJS games
Creating interactive 3D data visualizations on the web
Building mixed 2D/3D educational or marketing experiences
Prototyping 3D web applications without a full 3D engine
Rendering glTF models in browser-based projects
Enhancing 2D UI with 3D effects and compositing

Not Ideal For

Projects requiring high-performance, pure 3D rendering with thousands of dynamic objects and advanced effects like real-time global illumination.
Applications that need native VR/AR support or cutting-edge rendering techniques such as ray tracing.
Teams starting from scratch with no prior PixiJS experience, looking for a standalone 3D engine with a larger ecosystem.
Enterprise projects demanding extensive third-party integrations or pre-built 3D components out of the box.

Pros & Cons

Pros

Seamless 2D/3D Integration

Built as an extension of PixiJS, allowing direct compositing of 2D and 3D containers in the same scene, as demonstrated with vignette overlays and 3D sprites in the quick guide.

Production-Ready glTF Support

Supports loading glTF 2.0 models with PBR and IBL, and is used in multiple production projects on hundreds of thousands of devices, ensuring reliability.

Custom Shader Flexibility

Enables creation of custom materials and shaders for unique visual effects, shown in the custom material sandbox example with real-time demos.

PixiJS Ecosystem Compatibility

Compatible with PixiJS v5, v6, and v7, making it easy to integrate into existing PixiJS projects without major rewrites.

Cons

PixiJS Version Fragmentation

Requires different import paths for PixiJS v5/v6 vs v7, adding setup overhead and potential confusion during initialization.

Limited Advanced 3D Features

Lacks support for VR/AR, particle systems, or advanced physics simulations, making it less suitable for complex 3D-only applications compared to dedicated engines.

Smaller Community and Resources

Has a smaller ecosystem than libraries like Three.js, resulting in fewer tutorials, plugins, and community-driven assets for quick development.

Frequently Asked Questions

Related Projects

Vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

Stars209,926

Forks33,715

Last commit1 year ago

Bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Stars174,414

Forks78,764

Last commit17 hours ago

electron

:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS

Stars121,856

Forks17,281

Last commit8 hours ago

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

Stars113,152

Forks22,709

Last commit1 month ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub