From cd7fbd8dccfcd72231166a4a30980351b2e5395b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 10 Sep 2025 17:06:17 +0000
Subject: [PATCH 1/2] Initial plan


From b2b4d592540111e493bfb5d960b5cf6497781aba Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 10 Sep 2025 17:12:04 +0000
Subject: [PATCH 2/2] Add basic three.js wireframe tutorials with HTML5 Canvas
 and Three.js implementations

Co-authored-by: griffinhampton <194532452+griffinhampton@users.noreply.github.com>
---
 README.md              |  45 +++++++++++-
 index.html             | 105 ++++++++++++++++++++++++++++
 threejs-wireframe.html | 130 +++++++++++++++++++++++++++++++++++
 wireframe.html         | 152 +++++++++++++++++++++++++++++++++++++++++
 4 files changed, 431 insertions(+), 1 deletion(-)
 create mode 100644 index.html
 create mode 100644 threejs-wireframe.html
 create mode 100644 wireframe.html
diff --git a/README.md b/README.md
index 2150f30..1bd1810 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,45 @@
 # three.js-tutorial
-learning 3d rendering
+Learning 3D rendering with interactive wireframe examples
+
+## Wireframe Tutorials
+
+This repository contains basic three.js wireframe tutorials demonstrating 3D graphics concepts.
+
+### 🎯 [View Live Demos](index.html)
+
+#### 1. HTML5 Canvas Wireframe (`wireframe.html`)
+- **Pure JavaScript implementation** - No external dependencies
+- **3D Mathematics** - Demonstrates rotation matrices and perspective projection
+- **Interactive Animation** - Rotating wireframe cube with vertex visualization
+- **Educational Value** - Shows fundamental 3D rendering concepts
+
+#### 2. Three.js Wireframe (`threejs-wireframe.html`)
+- **Three.js Library** - Professional 3D graphics framework
+- **Multiple Geometries** - Rotating cube and sphere wireframes
+- **WebGL Rendering** - Hardware-accelerated graphics
+- **Advanced Features** - Proper camera controls and optimizations
+
+## Getting Started
+
+1. Clone the repository
+2. Start a local web server: `python3 -m http.server 8000`
+3. Open `http://localhost:8000` in your browser
+4. Click on any demo to see the wireframe in action
+
+## What You'll Learn
+
+- Basic 3D coordinate systems and transformations
+- Wireframe rendering techniques
+- Animation loops and frame timing
+- Camera and perspective projection
+- Vertex and edge representation
+- Both pure JavaScript and Three.js approaches
+
+## Files Structure
+
+```
+├── index.html              # Main tutorial landing page
+├── wireframe.html           # HTML5 Canvas wireframe demo
+├── threejs-wireframe.html   # Three.js wireframe demo
+└── README.md               # This documentation
+```
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e4a175a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Three.js Tutorial Collection</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 20px;
+            background-color: #1a1a1a;
+            color: white;
+            font-family: Arial, sans-serif;
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        h1 {
+            color: #00ff00;
+            text-align: center;
+        }
+        .tutorial-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+            margin-top: 30px;
+        }
+        .tutorial-card {
+            background-color: #2a2a2a;
+            border: 1px solid #444;
+            border-radius: 8px;
+            padding: 20px;
+            transition: transform 0.3s ease;
+        }
+        .tutorial-card:hover {
+            transform: translateY(-5px);
+            border-color: #00ff00;
+        }
+        .tutorial-title {
+            color: #00ff00;
+            margin-bottom: 10px;
+        }
+        .tutorial-description {
+            color: #ccc;
+            margin-bottom: 15px;
+        }
+        .tutorial-link {
+            display: inline-block;
+            background-color: #00ff00;
+            color: #000;
+            padding: 8px 16px;
+            text-decoration: none;
+            border-radius: 4px;
+            font-weight: bold;
+            transition: background-color 0.3s ease;
+        }
+        .tutorial-link:hover {
+            background-color: #00cc00;
+        }
+        .tech-stack {
+            margin-top: 10px;
+            font-size: 12px;
+            color: #888;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Three.js Tutorial Collection</h1>
+        <p style="text-align: center; color: #ccc;">
+            Learning 3D rendering with interactive wireframe examples
+        </p>
+        
+        <div class="tutorial-grid">
+            <div class="tutorial-card">
+                <h3 class="tutorial-title">HTML5 Canvas Wireframe</h3>
+                <p class="tutorial-description">
+                    A basic 3D wireframe cube implemented using HTML5 Canvas and pure JavaScript. 
+                    This example demonstrates fundamental 3D mathematics including rotation matrices 
+                    and perspective projection without external dependencies.
+                </p>
+                <a href="wireframe.html" class="tutorial-link">View Demo</a>
+                <div class="tech-stack">Tech: HTML5 Canvas, JavaScript, 3D Math</div>
+            </div>
+            
+            <div class="tutorial-card">
+                <h3 class="tutorial-title">Three.js Wireframe</h3>
+                <p class="tutorial-description">
+                    An advanced wireframe example using the Three.js library. Features both a 
+                    rotating cube and sphere with proper 3D rendering, camera controls, and 
+                    optimized performance using WebGL.
+                </p>
+                <a href="threejs-wireframe.html" class="tutorial-link">View Demo</a>
+                <div class="tech-stack">Tech: Three.js, WebGL, ES6 Modules</div>
+            </div>
+        </div>
+        
+        <div style="margin-top: 40px; text-align: center; color: #666;">
+            <p>More tutorials coming soon...</p>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/threejs-wireframe.html b/threejs-wireframe.html
new file mode 100644
index 0000000..44baa7e
--- /dev/null
+++ b/threejs-wireframe.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Three.js Wireframe Tutorial</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            background-color: #000;
+            overflow: hidden;
+            font-family: Arial, sans-serif;
+        }
+        canvas {
+            display: block;
+        }
+        .info {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            color: white;
+            font-size: 14px;
+            z-index: 100;
+        }
+        .fallback {
+            color: red;
+            text-align: center;
+            margin-top: 50px;
+        }
+    </style>
+</head>
+<body>
+    <div class="info">
+        <h3>Three.js Wireframe Tutorial</h3>
+        <p>Rotating wireframe cube and sphere</p>
+    </div>
+    
+    <div id="fallback" class="fallback" style="display: none;">
+        <h3>Three.js Library Not Available</h3>
+        <p>Please check the <a href="wireframe.html" style="color: #00ff00;">HTML5 Canvas version</a> instead.</p>
+    </div>
+    
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://unpkg.com/three@0.155.0/build/three.module.js",
+                "three/addons/": "https://unpkg.com/three@0.155.0/examples/jsm/"
+            }
+        }
+    </script>
+    
+    <script type="module">
+        try {
+            // Import Three.js
+            import * as THREE from 'three';
+            
+            // Scene setup
+            const scene = new THREE.Scene();
+            
+            // Camera setup
+            const camera = new THREE.PerspectiveCamera(
+                75, // field of view
+                window.innerWidth / window.innerHeight, // aspect ratio
+                0.1, // near clipping plane
+                1000 // far clipping plane
+            );
+            
+            // Renderer setup
+            const renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.setClearColor(0x000000, 1); // black background
+            document.body.appendChild(renderer.domElement);
+            
+            // Create wireframe cube geometry
+            const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
+            const cubeMaterial = new THREE.MeshBasicMaterial({
+                color: 0x00ff00, // green color
+                wireframe: true
+            });
+            const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
+            cube.position.x = -2;
+            scene.add(cube);
+            
+            // Create wireframe sphere geometry
+            const sphereGeometry = new THREE.SphereGeometry(1, 16, 12);
+            const sphereMaterial = new THREE.MeshBasicMaterial({
+                color: 0x0088ff, // blue color
+                wireframe: true
+            });
+            const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
+            sphere.position.x = 2;
+            scene.add(sphere);
+            
+            // Position camera
+            camera.position.z = 6;
+            
+            // Animation function
+            function animate() {
+                requestAnimationFrame(animate);
+                
+                // Rotate the objects
+                cube.rotation.x += 0.01;
+                cube.rotation.y += 0.01;
+                
+                sphere.rotation.x += 0.008;
+                sphere.rotation.y += 0.012;
+                
+                // Render the scene
+                renderer.render(scene, camera);
+            }
+            
+            // Handle window resize
+            window.addEventListener('resize', () => {
+                camera.aspect = window.innerWidth / window.innerHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(window.innerWidth, window.innerHeight);
+            });
+            
+            // Start animation
+            animate();
+            
+        } catch (error) {
+            console.error('Three.js failed to load:', error);
+            document.getElementById('fallback').style.display = 'block';
+            document.querySelector('.info').style.display = 'none';
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/wireframe.html b/wireframe.html
new file mode 100644
index 0000000..0851e5f
--- /dev/null
+++ b/wireframe.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Basic 3D Wireframe Tutorial</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            background-color: #000;
+            overflow: hidden;
+            font-family: Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+        canvas {
+            border: 1px solid #333;
+        }
+        .info {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            color: white;
+            font-size: 14px;
+            z-index: 100;
+        }
+    </style>
+</head>
+<body>
+    <div class="info">
+        <h3>Basic 3D Wireframe Tutorial</h3>
+        <p>Rotating wireframe cube (HTML5 Canvas)</p>
+    </div>
+    
+    <canvas id="canvas" width="800" height="600"></canvas>
+    
+    <script>
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        // Canvas dimensions
+        const width = canvas.width;
+        const height = canvas.height;
+        const centerX = width / 2;
+        const centerY = height / 2;
+        
+        // 3D cube vertices (8 corners of a cube)
+        const vertices = [
+            [-1, -1, -1], [1, -1, -1], [1, 1, -1], [-1, 1, -1], // back face
+            [-1, -1, 1], [1, -1, 1], [1, 1, 1], [-1, 1, 1]     // front face
+        ];
+        
+        // Cube edges (connecting vertices)
+        const edges = [
+            [0, 1], [1, 2], [2, 3], [3, 0], // back face
+            [4, 5], [5, 6], [6, 7], [7, 4], // front face
+            [0, 4], [1, 5], [2, 6], [3, 7]  // connecting edges
+        ];
+        
+        let rotationX = 0;
+        let rotationY = 0;
+        
+        // 3D to 2D projection function
+        function project(x, y, z) {
+            const scale = 200;
+            const distance = 4;
+            const factor = scale / (distance + z);
+            return {
+                x: centerX + x * factor,
+                y: centerY + y * factor
+            };
+        }
+        
+        // Rotate point around X axis
+        function rotateX(x, y, z, angle) {
+            const cos = Math.cos(angle);
+            const sin = Math.sin(angle);
+            return [x, y * cos - z * sin, y * sin + z * cos];
+        }
+        
+        // Rotate point around Y axis
+        function rotateY(x, y, z, angle) {
+            const cos = Math.cos(angle);
+            const sin = Math.sin(angle);
+            return [x * cos + z * sin, y, -x * sin + z * cos];
+        }
+        
+        // Main render function
+        function render() {
+            // Clear canvas
+            ctx.fillStyle = '#000';
+            ctx.fillRect(0, 0, width, height);
+            
+            // Transform vertices
+            const transformedVertices = vertices.map(vertex => {
+                let [x, y, z] = vertex;
+                
+                // Apply rotations
+                [x, y, z] = rotateX(x, y, z, rotationX);
+                [x, y, z] = rotateY(x, y, z, rotationY);
+                
+                // Project to 2D
+                return project(x, y, z);
+            });
+            
+            // Draw edges
+            ctx.strokeStyle = '#00ff00';
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            
+            edges.forEach(edge => {
+                const [start, end] = edge;
+                const startPoint = transformedVertices[start];
+                const endPoint = transformedVertices[end];
+                
+                ctx.moveTo(startPoint.x, startPoint.y);
+                ctx.lineTo(endPoint.x, endPoint.y);
+            });
+            
+            ctx.stroke();
+            
+            // Draw vertices as small circles
+            ctx.fillStyle = '#00ff00';
+            transformedVertices.forEach(vertex => {
+                ctx.beginPath();
+                ctx.arc(vertex.x, vertex.y, 3, 0, 2 * Math.PI);
+                ctx.fill();
+            });
+        }
+        
+        // Animation loop
+        function animate() {
+            rotationX += 0.01;
+            rotationY += 0.015;
+            
+            render();
+            requestAnimationFrame(animate);
+        }
+        
+        // Start animation
+        animate();
+        
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            // Keep canvas centered
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
