Advanced Three.js Clone

A custom JavaScript library inspired by Three.js with advanced rendering capabilities, built from scratch with modern WebGL features.

Features

🎯 Core Features

• Scene Management: Complete scene graph with Object3D hierarchy
• Camera System: Perspective and Orthographic cameras with full control
• Advanced WebGL Renderer: High-performance rendering with state management
• Material System: Basic and Phong materials with full lighting support
• Geometry System: Box and Sphere geometries with BufferGeometry support
• Lighting System: Directional, Point, Spot, and Ambient lights
• Math Utilities: Vector3, Matrix4, Quaternion, Euler, and more

🚀 Advanced Features

• WebGL State Management: Efficient state caching and management
• Shader Compilation: Automatic shader compilation and caching
• Capability Detection: Automatic WebGL extension detection
• Memory Management: Proper resource cleanup and disposal
• Performance Monitoring: Built-in render statistics

Installation

npm install advanced-three-js

Quick Start

import { 
  Scene, 
  PerspectiveCamera, 
  WebGLRenderer, 
  BoxGeometry, 
  MeshPhongMaterial,
  DirectionalLight,
  Mesh
} from 'advanced-three-js';

// Create scene
const scene = new Scene();
const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new WebGLRenderer();

// Set renderer size
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create geometry and material
const geometry = new BoxGeometry(1, 1, 1);
const material = new MeshPhongMaterial({ color: 0x00ff00 });

// Create mesh
const cube = new Mesh(geometry, material);
scene.add(cube);

// Add lighting
const light = new DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

// Render loop
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

Demo

Run the demo server to see the library in action:

node server.js

Then open http://localhost:4821 in your browser to see:

• 3 spinning cubes with different colors
• Dynamic lighting (sun + point light on center cube)
• Interactive camera controls (drag to rotate, scroll to zoom)
• Sky blue background

API Reference

Core Classes

Scene

const scene = new Scene();
scene.background = new Color(0x87CEEB); // Sky blue

Camera

const camera = new PerspectiveCamera(fov, aspect, near, far);
camera.position.set(5, 5, 5);
camera.lookAt(0, 0, 0);

WebGLRenderer

const renderer = new WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
renderer.setClearColor(0x000000);

Materials

MeshBasicMaterial

const material = new MeshBasicMaterial({ 
  color: 0xff0000,
  wireframe: false 
});

MeshPhongMaterial

const material = new MeshPhongMaterial({ 
  color: 0xff0000,
  shininess: 30,
  specular: 0x111111
});

Geometries

BoxGeometry

const geometry = new BoxGeometry(width, height, depth);

SphereGeometry

const geometry = new SphereGeometry(radius, widthSegments, heightSegments);

Lights

DirectionalLight (Sun)

const light = new DirectionalLight(0xffffff, 1);
light.position.set(10, 10, 5);

PointLight

const light = new PointLight(0xffff00, 1, 100, 2);
light.position.set(0, 2, 0);

AmbientLight

const light = new AmbientLight(0x404040, 0.3);

Building

npm run build

This will create:

• dist/advanced-three-js.js - UMD build
• dist/advanced-three-js.esm.js - ES module build
• dist/advanced-three-js.min.js - Minified UMD build

Development

npm run dev    # Watch mode
npm run serve  # Start demo server
npm run lint   # Lint code
npm test       # Run tests

Browser Support

• Chrome 9+
• Firefox 4+
• Safari 5.1+
• Edge 12+
• Internet Explorer 11+

License

MIT License - see LICENSE file for details.

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Acknowledgments

• Inspired by Three.js by Mr.doob
• Built with modern JavaScript and WebGL
• Designed for performance and ease of use