A modern 3D JavaScript library for creating interactive graphics and visualizations
npm install 9th.js

![Build Status]()
![Coverage]()
![TypeScript]()
A modern, high-performance 3D JavaScript library for creating interactive graphics, visualizations, and games. Built from the ground up with WebGL, TypeScript, and modern web standards.
``bash`
npm install 9th.jsor
yarn add 9th.jsor
pnpm add 9th.js
`javascript
import {
Engine,
Scene,
Renderer,
PerspectiveCamera,
BoxGeometry,
MeshStandardMaterial,
Mesh,
DirectionalLight,
AmbientLight
} from '9th.js';
// Initialize engine
const canvas = document.getElementById('canvas');
const engine = new Engine(canvas, { antialias: true });
const scene = new Scene();
const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new Renderer();
// Setup camera
camera.setPosition(0, 2, 5);
camera.lookAt(0, 0, 0);
// Add lighting
const ambientLight = new AmbientLight(0x404040, 0.4);
const directionalLight = new DirectionalLight(0xffffff, 1);
directionalLight.setPosition(5, 5, 5);
scene.add(ambientLight, directionalLight);
// Create a 3D object
const geometry = new BoxGeometry(2, 2, 2);
const material = new MeshStandardMaterial({
color: '#ff6b6b',
metalness: 0.5,
roughness: 0.2
});
const cube = new Mesh(geometry, material);
scene.add(cube);
// Animation loop
function animate() {
requestAnimationFrame(animate);
// Rotate cube
cube.rotation.y += 0.01;
cube.rotation.x += 0.005;
renderer.render(scene, camera);
}
animate();
`
#### 🌱 Beginner Examples
- Hello World - Basic setup
- Basic Shapes - Primitive objects
- Scene & Camera - Core components
- Materials - Material basics
- Lighting - Light your scene
#### 🚀 Intermediate Examples
- Advanced Lighting - Complex lighting
- Custom Shaders - Shader programming
- Skeletal Animation - Character animation
- Particle Systems - Particle effects
- Post-Processing - Visual effects
#### 💎 Advanced Examples
- Game Engine - Complete game framework
- Molecular Visualization - Scientific visualization
- VR Experience - Virtual reality
- Weather System - Complex particle systems
#### 🎮 Specialized Examples
- Games - 2D/3D game examples
- Scientific Visualization - Research applications
- Educational Tools - Interactive learning
- Architecture & CAD - Architectural visualization
- Showcase & Product Configurators - Commercial applications
`typescript`
// Import specific modules for tree-shaking
import { Engine } from '9th.js/core';
import { PerspectiveCamera } from '9th.js/cameras';
import { BoxGeometry } from '9th.js/geometry';
import { MeshStandardMaterial } from '9th.js/materials';
import { DirectionalLight } from '9th.js/lights';
import { GLTFLoader } from '9th.js/loaders';
- @9thjs/core - Engine, Scene, Renderer, Events
- @9thjs/cameras - Camera types and controls
- @9thjs/geometry - Geometric primitives and utilities
- @9thjs/materials - PBR, custom, and utility materials
- @9thjs/lights - All light types and lighting utilities
- @9thjs/loaders - Asset loading (models, textures, audio)
- @9thjs/animation - Animation systems and keyframes
- @9thjs/particles - Particle systems and effects
- @9thjs/physics - Physics simulation and collision detection
- @9thjs/rendering - Post-processing and advanced rendering
`bashInstall dependencies
npm install
$3
`bash
Run all tests
npm testWatch mode
npm run test:watchCoverage report
npm run test:coverageCI testing
npm run test:ci
`$3
`bash
Lint code
npm run lintFix lint issues
npm run lint:fixFormat code
npm run formatType checking
npm run type-check
`$3
`bash
Generate documentation
npm run docsDevelopment server for docs
npm run docs:devBuild all documentation
npm run docs:build-all
`🎯 Use Cases
$3
- 2D/3D games with physics and animation
- VR/AR experiences with WebXR support
- Real-time strategy and simulation games$3
- Molecular modeling and visualization
- Data visualization and exploration
- Mathematical function plotting
- Educational tools and simulations$3
- Product configurators and 3D catalogs
- Architectural visualization and walkthroughs
- Training simulators and virtual environments
- E-commerce 3D product displays$3
- Interactive art installations
- Music visualization and audio-reactive content
- Generative art and procedural content
- Digital art galleries and exhibitions📊 Performance
9th.js is optimized for performance with several key features:
- Efficient rendering pipeline - Minimizes draw calls and GPU state changes
- Automatic culling - Frustum culling and occlusion culling
- Level-of-detail (LOD) - Automatic geometry simplification based on distance
- Texture atlasing - Combines textures to reduce binding calls
- Geometry instancing - Renders thousands of similar objects efficiently
- Worker-based physics - Offloads physics calculations to Web Workers
$3
- Scene size: 10,000+ objects at 60 FPS
- Particle count: 100,000+ particles on modern hardware
- Model complexity: 1M+ vertices with proper LOD
- Bundle size: <100KB minified + gzipped (core)
🌟 Ecosystem
$3
- 9th.js Studio - Visual editor for 3D scenes
- Shader Playground - Interactive shader development
- Model Optimizer - Tool for optimizing 3D assets
- Performance Profiler - Visual performance analysis$3
- GitHub Repository
- Documentation Website
- Examples Gallery
- Discord Community
- Twitter Updates🤝 Contributing
We welcome contributions! Please see our Contributing Guide for details.
$3
1. Fork the repository
2. Clone your fork
3. Install dependencies: npm install`MIT License - see LICENSE file for details.
- Inspired by Three.js and other great 3D libraries
- Built with modern web standards and best practices
- Community feedback and contributions
- Open source dependencies and tools
- 📧 Email: hei@digitalcloud.no
- 💬 Discord: Join our community
- 🐛 Issues: GitHub Issues
- 📖 Documentation: Full Documentation
---
Website •
Documentation •
Examples •
Discord •
Twitter
Made with ❤️ by the 9th.js team