thehardwarestore.ai

React Three Fiber (R3F) is a React renderer for three.js, enabling declarative construction of 3D scenes using JSX. It provides a `<Canvas>` component that bootstraps a WebGL renderer, a custom React reconciler that bridges React's component lifecycle with three.js objects, and a rich set of hooks (`useFrame`, `useThree`, `useLoader`) for imperative control. The architecture follows a monorepo pattern with three packages: the core fiber library (web and React Native), a test renderer for unit testing 3D components, and an ESLint plugin enforcing performance rules. The core library abstracts WebGL details, handles pointer events with raycasting, manages the render loop, and supports advanced features like portals, Suspense for async assets, and context bridging. It is a foundational tool for building interactive 3D applications in the browser or on mobile via Expo. The codebase demonstrates high craftsmanship with clean abstractions, extensive test coverage, and a modular design that separates concerns across reconciler, event system, state management, and rendering utilities.

Chili3D is a web-based 3D CAD application for online model design and editing. It features a modular TypeScript architecture with core packages for foundations, application logic, UI, Three.js rendering, and WebAssembly bindings to OpenCASCADE for CAD operations. The system uses a command pattern with decorators for UI actions, a transaction system for undo/redo, and a plugin architecture for extensibility. Key capabilities include primitive shape creation, Boolean operations, extrusion/revolve/sweep/loft, snapping, measurement tools, document management with IndexedDB persistence, and import/export of STEP, IGES, STL, and BREP formats. The UI implements an Office-style ribbon interface with property panels and hierarchical scene tree. The application is actively maintained with recent commits and demonstrates strong engineering practices in its reactive primitives, plugin system, and serialization framework.

glTF-Transform is a comprehensive SDK and CLI tool for processing, optimizing, and inspecting glTF/GLB 3D assets. It provides a rich property graph model (Document) for reading, editing, and writing glTF files, with full support for the glTF 2.0 specification and dozens of official extensions (KHR_materials_*, EXT_meshopt_compression, etc.). The library includes a broad set of transforms (compression, quantization, deduplication, welding, palette optimization, texture compression, etc.) that can be composed into custom pipelines. A command-line interface wraps all transforms for batch processing, and a viewer package provides real-time Three.js integration. Built as a monorepo with packages for core, extensions, functions, CLI, view, and docs, it demonstrates strong software engineering practices: property-graph architecture, extension system, observer patterns, and comprehensive unit/integration tests. Designed for both scripting in Node.js/Deno/Web and direct use from the command line.

This is a monorepo centered on `@google/model-viewer`, a production web component that renders glTF/GLB 3D models in the browser using Three.js and Lit. The core package provides a `<model-viewer>` custom element with a rich feature surface: WebXR/Scene Viewer/Quick Look AR, animation controls, camera orbit/perspective controls, environment lighting, hotspots/annotations, a mutable scene-graph API, lazy loading, and post-processing via a companion `model-viewer-effects` package. In addition to the library itself, the repo contains `space-opera`, a Redux + Lit-based interactive editor for configuring model-viewer snippets and editing glTF materials, plus a full documentation/examples site and render-fidelity tooling that performs golden-image screenshot comparisons across renderers. Although the dominant character is an application/library monorepo, it also includes research-grade visual fidelity workflows and color science work around tone mapping.

This is a production-grade single-page web application for picking and converting colors in the OKLCH and LCH color spaces. It provides interactive 2D charts (WebGL2-accelerated), sliders, numeric inputs, and a 3D gamut model (three.js) to explore and select colors. The app supports sRGB, Display P3, and Rec.2020 gamuts, and can parse and output a wide variety of color formats (hex, rgb, hsl, oklch, lch, lab, linear RGB, Figma P3 hex, etc.). State management is handled by nanostores with persistent settings in localStorage, and the URL hash is used for shareable color states. The codebase is well-structured with clear separation between core color logic (lib/), reactive stores (stores/), and UI components (view/). It includes a comprehensive test suite and CI/CD pipelines for deployment to Firebase Hosting. The architecture is a monolith frontend with no backend, built with Vite, TypeScript, PostCSS, and Pug templates.

Troika is a monorepo for a collection of JavaScript libraries focused on building interactive 3D/2D data visualizations and immersive WebXR experiences using Three.js. The core framework (troika-core) provides a declarative facade system with lifecycle hooks, scene descriptors, event handling, and transitions, enabling developers to describe complex scenes with simple property setters. Higher-level packages (troika-3d, troika-3d-ui, troika-xr) extend this with 3D objects, flexbox-based UI blocks, and XR controller/teleport support. Standalone utilities like troika-three-text and troika-three-utils offer high-quality SDF text rendering and generic shader derivation, while troika-worker-utils offloads heavy computation (e.g., font parsing, layout) to web workers. The repository also includes three-instanced-uniforms-mesh for per-instance uniforms, troika-animation for tweening, and a bespoke flex layout engine built on Yoga. Though primarily an application framework, several packages are reusable libraries for any Three.js project, and the examples showcase data-driven scenes (e.g., globe connections, city grids, animated curves). Architecture is modular (monorepo with Lerna) with peer dependencies on Three.js and optional React integration.

A monorepo providing `@pixiv/three-vrm`, a library for loading, controlling, and rendering VRM (Virtual Reality Model) avatars in three.js. It implements VRM 1.0 and partial VRM 0.0 specifications, handling humanoid bone mapping, facial expressions, eye gaze control (lookAt), first-person mesh culling, spring bone physics simulation, node constraints (aim, roll, rotation), and MToon toon material rendering. The library is structured as a collection of GLTFLoader plugins that parse VRM extensions from `.vrm` files. Core modules include `VRMLoaderPlugin` (orchestrating sub-plugins), `VRMCore` (humanoid, expressions, lookAt, firstPerson), `VRMSpringBoneManager` (verlet physics), `VRMNodeConstraintManager` (topological sort for constraints), and `MToonMaterial`/`MToonNodeMaterial` (custom shader/material for toon rendering). Both WebGL and experimental WebGPU renderers are supported. The codebase includes thorough examples, CI/CD, and compatibility shims for multiple three.js revisions (r123 through r180).

Solar Wanderer is a browser-based 1:1 real-time solar system explorer powered by NASA JPL ephemerides. Built with Three.js 0.165 and Vite 5, it renders the entire solar system at true scale (0.5m to 1e15 km) using a floating-origin world engine, logarithmic depth buffer, and Keplerian orbital mechanics. Users can seamlessly fly through space, walk on planetary surfaces (including real DEM terrain for Earth, Moon, Mars), dive into Earth's oceans, or orbit from a Google Earth-style camera. The application includes a bilingual (Chinese/English) interface with 7-language i18n, search, guided tours, educational facts with NASA sources, mobile touch controls, and shareable URLs. All ephemeris data—planets, 21 moons, 28 TNOs, 4 comets, and ~5400 small bodies—is generated offline via scripts that fetch from NASA JPL and fitted to Horizons state vectors. The architecture is a client-only SPA with modular ES modules; no backend, no registration, no cookies. The codebase demonstrates high craftsmanship in its floating-origin precision, pure-function ephemeris, procedural terrain generation, and real-time atmosphere scattering, though it carries technical debt from a monolithic main.js and incomplete i18n for half its languages.

Image-Blaster is a generative 3D asset pipeline and web viewer that transforms a single input image into a fully interactive 3D scene. The system uses Claude AI agents to orchestrate a multi-step workflow: image analysis and object extraction, background removal (plate generation), world generation via World Labs (gaussian splats, colliders, panoramas), 3D object generation via FAL (Hunyuan3D or Meshy), and sound effect generation via ElevenLabs. All generated assets are stored locally with a deterministic indexed naming convention and request metadata for resumability. The frontend is a React 19 + Three.js (R3F) application with physics (Rapier), post-processing (Bloom, DoF, motion blur), splat rendering (SparkJS), and a full scene editor with undo/redo, transform controls, and asset library. The architecture is a monorepo with a Vite dev server that serves assets and provides a CRUD API for scene projects. While the system is primarily an application, it also contains a data pipeline aspect in its asset generation scripts, which follow a consistent lifecycle of submission, polling, download, and metadata writing. The codebase demonstrates strong engineering practices with reusable patterns like the FAL queue wrapper, indexed file resolution, camera gesture hooks, and error boundaries. However, it is heavily dependent on external cloud APIs (FAL, World Labs, ElevenLabs) and Claude agent tooling, with no offline fallback or mock mode.

Reall3dViewer is a high-performance 3D Gaussian Splatting (3DGS) web viewer built on Three.js. It streams and renders large-scale point cloud scenes (up to 150M points) at interactive frame rates across desktop and mobile devices. The viewer supports multiple input formats including PLY, SPLAT, SPX (proprietary high-compression format), SPZ, SOG, and GLB with the KHR_gaussian_splatting extension. Its architecture is event-driven and modular, with a central event system (Events.ts), dedicated loaders for each format, web workers for parallel data fetching and sorting, and a texture management pipeline that handles LOD tile streaming, frustum culling, and adaptive quality levels. Beyond basic viewing, the repository provides a full suite of interactive features: measurement and annotation tools (distance, area, point labels, 3D tags, circle plans), a map viewer (Reall3dMapViewer) with GIS basemap integration, a first-person/third-person player mode with physics (rapier3d), weather effects (rain, snow), audio-driven text overlays, and a fly-through camera path system. The code is published as an npm package (@reall3d/reall3dviewer) and includes comprehensive demo pages with scene configuration JSON files. While primarily an application library, the project also exhibits data/research characteristics through its custom SPX format specifications, advanced compression techniques (WebP, gzip, xz, zstd), and spherical harmonics support up to degree 3. The source code demonstrates high engineering craftsmanship in areas like GLSL shader modularization, WebAssembly integration for format parsing, and efficient web worker communication patterns. However, there are some maintenance risks including a large monolithic event constant file (200+ auto-incremented integers), hardcoded demo URLs, and a build script that embeds worker code as base64, which complicates debugging. No automated tests are present.

Alumnet is a full-stack, AI-powered alumni exhibition and management system designed for school history museums. It consists of three workspaces: a touch-screen kiosk frontend (client) built with Vue 3, Three.js, and Tailwind CSS; an admin dashboard (admin) using Vue 3 and Element Plus; and a backend server (server) built with Express, TypeScript, PostgreSQL (with pgvector), and Qdrant for vector search. The system provides alumni CRUD, AI-powered natural language search via RAG, 3D galaxy visualization, timeline corridor, interactive message boards, video greetings, donation management, and comprehensive admin controls including content audit, backup/restore, and data import. It features JWT authentication with role-based access, privacy data masking, rate limiting, and a layered architecture (routes → services → repositories). The codebase includes extensive testing (unit, integration, property-based with fast-check) and is deployable via Docker Compose or PM2. While primarily an application, it incorporates data engineering patterns through its RAG pipeline and knowledge base management.

This repository is an interactive 3D biology teaching application built with React, TypeScript, Vite, and three.js. It allows users to explore detailed models of biological structures (plant cell, animal cell, white blood cell, neuron, DNA) with rotation, zoom, and informational overlays. The application features a custom model loading system that prioritizes the initially displayed model and preloads others in the background to optimize bandwidth usage. The UI consists of a sidebar for model selection, a central 3D viewing area, and an information panel detailing each model's characteristics. The code demonstrates thoughtful engineering in resource loading, state management, and responsive design, making it suitable for educational contexts.

Three-forcegraph is a reusable JavaScript library for creating 3D force-directed graph visualizations using Three.js. It implements a reactive component that takes graph data (nodes and links) and renders them in 3D space using either d3-force-3d or ngraph.forcelayout for physics simulation. The library provides extensive customization options for node/link appearance, behavior, and layout constraints including DAG modes, directional arrows, and particle effects. Built with the Kapsule pattern for state management, it follows a modular architecture separating core logic, utilities, and Three.js object management. The library handles proper resource disposal to prevent WebGL memory leaks and offers both imperative and declarative APIs for integration into web applications.

gcode-preview is a TypeScript library for rendering 3D-print toolpath previews from G-code files in web applications. It parses G-code command streams, interprets motion and extrusion commands, organizes the resulting paths into layers and tool segments, and renders them as either flat colored lines or volumetric tubes using Three.js. The library is structured as a pipeline of independently testable modules: a line-oriented parser, a stateful interpreter, a job/path model, and a Three.js scene manager. A Vue 3 demo application is included to exercise the library, but the repository is fundamentally a reusable npm package with ESM and UMD builds, unit tests, Firebase-hosted demo infrastructure, and publishing CI.

Gitlantis is a VS Code extension that turns the traditional file explorer into an interactive 3D ocean world. Users control a boat to navigate a seascape where directories appear as lighthouses and files as buoys, making code exploration more engaging. The extension communicates via webview with a React Three Fiber interface, offering features like branch switching, file opening, and settings customization. It also supports a standalone browser mode for demo purposes using sample data. Architecturally, the extension consists of a VS Code extension host that handles workspace and Git operations, and a rich webview application built with React 18, Three.js, React Three Fiber/Drei, and Zustand for state management. The 3D scene includes dynamic ocean tiling, boat physics (using React Three Cannon), collision-based node interaction, a compass, minimap, and ambient audio. The UI layer provides splash screens, loading states, settings modals with multiple tabs, and mobile joystick support. The codebase demonstrates modern frontend practices and creative use of 3D in a developer tool. However, it has several maintainability concerns: many @ts-expect-error comments for Three.js types, hardcoded demo data for browser mode, a complex dual-build setup, and no automated tests. Some components, like the settings modal and the dynamic backdrop, are well-abstracted and potentially reusable in other Three.js projects.

This repository is a C# port of the Three.js 3D library, providing a comprehensive 3D graphics framework for .NET applications. It implements a scene graph architecture with Object3D hierarchy, supporting geometries, materials, cameras, lights, and various loading mechanisms for 3D models and textures. The library offers multiple rendering backends (OpenTK/OpenGL and Silk.NET) and includes extensive example applications demonstrating features like physically-based rendering, post-processing effects, animation systems, and camera controls. The codebase shows good separation of concerns in core mathematical utilities and event systems, though suffers from some duplication between rendering backends and inconsistent patterns in examples.

This repository is a comprehensive frontend visual effects collection and demonstration platform. It contains over 100 self-contained demos and tools covering CSS animations, Canvas 2D/WebGL effects, Three.js 3D scenes, ECharts data visualizations, AI/ML integrations (TensorFlow.js for pose detection and body segmentation, MediaPipe, Tesseract.js OCR), and client-side media processing (image, video, PDF). The architecture is a React 18 single-page application (SPA) using TypeScript, Webpack 5, Ant Design, and react-intl for internationalization. All processing occurs entirely in the browser; there is no backend or persistent data store. The project serves as both a personal portfolio and a learning resource for advanced frontend techniques, but it is not a single-purpose production application. The code quality varies widely: some components demonstrate high craftsmanship (e.g., custom PNG encoder, image manipulation utilities, cross-page communication hook), while many others are boilerplate-heavy duplicates or exploratory demos. No automated tests are present, and the build output includes large minified chunks alongside source code, creating maintenance overhead.