UvTe

UvTe is a high-performance, mathematics-driven 3D rendering component library for React. It bypasses the massive bundle sizes and overhead of WebGL frameworks like Three.js by utilizing pure trigonometric functions and orthographic projection to render 3D geometric nodes directly into 2D SVG paths.

Key Features

• Zero WebGL Dependencies: Render complex 3D shapes without a canvas context.
• High Performance: Achieves 60fps through continuous requestAnimationFrame loops and direct DOM reference mutations, bypassing standard React state reconciliation.
• Mathematical Precision: Supports complex geometric configurations including Spheres, Tori, Helices, and Mobius strips.
• Highly Customizable: Full control over rotation speeds, point density, coloring, and interactive culling.

Installation

Since UvTe is built primarily as an internal architecture or copy-paste component suite, you can incorporate the core mathematical engine directly into your project.

npm install uvte-3d

(Note: Ensure your environment supports React 18+ and standard SVG manipulation).

Basic Usage

The following example demonstrates how to render a basic spinning Mobius strip using the UvTe component.

import { UvTe } from 'uvte-3d';

export function App() {
  return (
    <div style={{ width: 400, height: 400 }}>
      <UvTe 
        state="composing" 
        shape="mobius" 
        size={300} 
        color={[0.6, 1.0, 0.0]} 
        speed={1.0} 
      />
    </div>
  );
}

Architecture Overview

The rendering process is split into two layers:

1. The Mathematical Engine: Generates arrays of [x, y, z] coordinates representing the nodes of the chosen shape.
2. The Presentation Layer: Projects those 3D coordinates onto a 2D plane (x, y) dynamically using sine and cosine rotational matrices, and updates the SVG elements.

For a deeper dive into the architectural decisions and mathematical proofs behind the orthographic projections, please review the local /docs route of this repository.

License

UvTe is distributed under the MIT License. See the LICENSE file for more information.