Vectreal Core is a robust, community-driven, open-source toolkit designed to seamlessly integrate high-performance 3D content into React-based projects.
AGPL-3.0 License
Vectreal Core is a robust, community-driven, open-source toolkit designed to seamlessly integrate high-performance 3D content into React-based projects. Our mission is to empower developers, designers, and creators with comprehensive resources to build stunning, interactive 3D experiences.
The monorepo is orchestrated using NX within an npm workspaces environment, primarily consisting of React.js projects.
This project provides easy-to-use, fully configured components, hooks, and additional tools built on top of Three.js and React Three Fiber.
This monorepo is organized as follows:
vectreal-core/
├── packages/
│ ├── hooks/
│ └── viewer/
├── apps/
│ └── official-website/
├── docker/
├── examples/
└── docs/
@vctrl/hooks: A collection of useful React hooks for loading and interacting with 3D files.
use-load-model: File or directory loading hooks for various approaches (Event based, React Context, direct)
use-optimize-model: Utilizing the gltf-transform js library to optimize models in the browser. May be used standaloe or in conjunction with the use-load-model
hook for convenience.
use-export-model: Export the scene in multiple formats using a minimal API
@vctrl/viewer: A fully type-safe and ready-to-use viewer component for React.
Built with the @vctrl/hooks/use-load-model
hook to dynamically load various model file types.
Supported file formats:
Visit our free online editor toolkit to see Vectreal Core in action. This interactive playground demonstrates the capabilities of our components and provides a hands-on experience for developers.
Clone the repository:
git clone https://github.com/Vectreal/vectreal-core.git
cd vectreal-core
Install dependencies:
npm install
To serve one of the app projects, use the following command:
npx nx serve vectreal/official-website
To see all available targets for a project:
npx nx show project vectreal/official-website --web
The optional
--web
parameter opens a visual overview of all possible commands available for a project.
For more information on working with NX, refer to the official NX documentation.
We welcome contributions from developers passionate about React and Three.js.
To contribute:
Please read our Contributing Guidelines for more details.
Join our Discord community for support, announcements, and discussions about the future of 3D web content.
GNU Affero General Public License
Please refer to the LICENSE file in the package root for licensing information.
Website: Vectreal Core | Vectreal Platform
Discord: Join our server
X/Twitter: @Vectreal
Email: [email protected]