<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>球の三角形化と線分交差判定</title>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        .container {
            position: relative;
            width: 600px;
            height: 500px;
        }
        canvas {
            display: block;
            background-color: white;
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
        }
        .controls {
            position: absolute;
            top: 5px;
            left: 10px;
            background: rgba(255, 255, 255, 0.3);
            padding: 2px;
            border-radius: 2px;
        }
        .controls button {
            margin: 2px;
            padding: 2px 10px;
        }
        .info {
            position: absolute;
            bottom: 2px;
            left: 10px;
            background: rgba(255, 255, 255, 0.5);
            padding: 5px;
            border-radius: 2px;
        }
    </style>

</head>
<body>
    <div class="container">
        <canvas id="renderCanvas" width="600" height="480"></canvas>
        <div class="controls">
            <button id="resetLine">線分をリセット</button>
            <button id="randomLine">ランダムな線分</button>
            <div>
                <label for="subdivisions">球の分割数: </label>
                <input type="range" id="subdivisions" min="1" max="5" value="3" step="1">
                <span id="subdivValue">3</span>
            </div>
            <div>
                <label>表示モード: </label>
                <select id="displayMode">
                    <option value="solid">半透明表示</option>
                    <option value="wireframe">ワイヤーフレーム</option>
                </select>
            </div>
            <div>
                <label>交差判定方法: </label>
                <select id="intersectionMethod">
                    <option value="triangle">三角形ベース</option>
                    <option value="sphere">球の方程式</option>
                </select>
            </div>
            <div>
                <label>交点情報: </label>
                <input type="checkbox" id="debugMode" checked>
            </div>
        </div>
        <div class="info">
            <div id="intersectionInfo">交差判定: なし</div>
            <div id="triangleCount">三角形数: 0</div>
            <div id="debugInfo" style="font-size: 0.8em; margin-top: 5px;"></div>
        </div>
    </div>

    <script>
        // グローバル変数
        let canvas, ctx;
        let sphereCenter = [0, 0, 0];
        let sphereRadius = 1.0;
        let lineStart = [-2, 0.5, 0.5];
        let lineEnd = [2, -0.5, -0.5];
        let cameraPosition = [0, 0, 7]; // カメラ距離をさらに遠くに調整
        let triangles = [];
        let intersectedTriangles = [];
        let isDragging = false;
        let lastMouseX, lastMouseY;
        let rotationX = 0, rotationY = 0;
        let subdivisionLevel = 3;
        let displayMode = 'solid'; // 表示モード（solid/wireframe）
        let intersectionMethod = 'triangle'; // 交差判定方法（triangle/sphere）
        let debugEnabled = true; // デバッグモード

        // 初期化関数
        function init() {
            canvas = document.getElementById('renderCanvas');
            ctx = canvas.getContext('2d');
            
            // キャンバスサイズをウィンドウに合わせる
            resizeCanvas();
            window.addEventListener('resize', resizeCanvas);
            
            // マウス操作イベント
            canvas.addEventListener('mousedown', onMouseDown);
            canvas.addEventListener('mousemove', onMouseMove);
            canvas.addEventListener('mouseup', onMouseUp);
            canvas.addEventListener('mouseleave', onMouseUp);
            
            // ボタンイベント
            document.getElementById('resetLine').addEventListener('click', resetLine);
            document.getElementById('randomLine').addEventListener('click', createRandomLine);
            
            // スライダーイベント
            const subdivSlider = document.getElementById('subdivisions');
            subdivSlider.addEventListener('input', function() {
                subdivisionLevel = parseInt(this.value);
                document.getElementById('subdivValue').textContent = subdivisionLevel;
                createSphereTriangles();
                checkIntersection();
                render();
            });
            
            // 表示モード選択
            const displayModeSelect = document.getElementById('displayMode');
            displayModeSelect.addEventListener('change', function() {
                displayMode = this.value;
                render();
            });
            
            // 交差判定方法選択
            const intersectionMethodSelect = document.getElementById('intersectionMethod');
            intersectionMethodSelect.addEventListener('change', function() {
                intersectionMethod = this.value;
                checkIntersection();
                render();
            });
            
            // デバッグモード切り替え
            const debugModeCheckbox = document.getElementById('debugMode');
            debugModeCheckbox.addEventListener('change', function() {
                debugEnabled = this.checked;
                checkIntersection();
                render();
            });
            
            // デバッグ情報を表示
            if (debugEnabled) {
                console.log("初期化");
                console.log("球の中心:", sphereCenter);
                console.log("球の半径:", sphereRadius);
                console.log("線分の始点:", lineStart);
                console.log("線分の終点:", lineEnd);
            }
            
            // 球の三角形を作成
            createSphereTriangles();
            
            // 交差判定
            checkIntersection();
            
            // 描画開始
            render();
        }

        // キャンバスリサイズ
        function resizeCanvas() {
            // 固定サイズ（600×480）を使用
            if (!canvas.width || !canvas.height) {
                canvas.width = 600;
                canvas.height = 480;
            }
            render();
        }

        // 球を三角形化する関数
        function createSphereTriangles() {
            triangles = [];
            
            // 正二十面体の頂点（黄金比に基づく）
            const phi = (1 + Math.sqrt(5)) / 2;
            const vertices = [
                [-1, phi, 0], [1, phi, 0], [-1, -phi, 0], [1, -phi, 0],
                [0, -1, phi], [0, 1, phi], [0, -1, -phi], [0, 1, -phi],
                [phi, 0, -1], [phi, 0, 1], [-phi, 0, -1], [-phi, 0, 1]
            ];
            
            // 正二十面体の面（三角形）
            const faces = [
                [0, 11, 5], [0, 5, 1], [0, 1, 7], [0, 7, 10], [0, 10, 11],
                [1, 5, 9], [5, 11, 4], [11, 10, 2], [10, 7, 6], [7, 1, 8],
                [3, 9, 4], [3, 4, 2], [3, 2, 6], [3, 6, 8], [3, 8, 9],
                [4, 9, 5], [2, 4, 11], [6, 2, 10], [8, 6, 7], [9, 8, 1]
            ];
            
            // 初期三角形を作成
            let initialTriangles = [];
            for (const face of faces) {
                initialTriangles.push([
                    normalizeVertex(vertices[face[0]]),
                    normalizeVertex(vertices[face[1]]),
                    normalizeVertex(vertices[face[2]])
                ]);
            }
            
            // 指定レベルまで分割
            triangles = initialTriangles;
            for (let i = 0; i < subdivisionLevel; i++) {
                triangles = subdivideTriangles(triangles);
            }
            
            // 三角形数を表示
            document.getElementById('triangleCount').textContent = `三角形数: ${triangles.length}`;
        }
        
        // 頂点を正規化（単位球上に配置）
        function normalizeVertex(vertex) {
            const length = Math.sqrt(vertex[0] * vertex[0] + vertex[1] * vertex[1] + vertex[2] * vertex[2]);
            return [
                sphereRadius * vertex[0] / length + sphereCenter[0],
                sphereRadius * vertex[1] / length + sphereCenter[1],
                sphereRadius * vertex[2] / length + sphereCenter[2]
            ];
        }
        
        // 三角形を分割する関数
        function subdivideTriangles(triangles) {
            const newTriangles = [];
            
            for (const triangle of triangles) {
                // 辺の中点を計算
                const midAB = midpoint(triangle[0], triangle[1]);
                const midBC = midpoint(triangle[1], triangle[2]);
                const midCA = midpoint(triangle[2], triangle[0]);
                
                // 中点を正規化（単位球上に配置）
                const normMidAB = normalizeVertex(midAB);
                const normMidBC = normalizeVertex(midBC);
                const normMidCA = normalizeVertex(midCA);
                
                // 4つの新しい三角形を作成
                newTriangles.push([triangle[0], normMidAB, normMidCA]);
                newTriangles.push([triangle[1], normMidBC, normMidAB]);
                newTriangles.push([triangle[2], normMidCA, normMidBC]);
                newTriangles.push([normMidAB, normMidBC, normMidCA]);
            }
            
            return newTriangles;
        }
        
        // 2点間の中点を計算
        function midpoint(v1, v2) {
            return [
                (v1[0] + v2[0]) / 2,
                (v1[1] + v2[1]) / 2,
                (v1[2] + v2[2]) / 2
            ];
        }
        
        // 線分と三角形の交差判定
        function checkIntersection() {
            intersectedTriangles = [];
            const debugInfo = document.getElementById('debugInfo');
            
            if (intersectionMethod === 'triangle') {
                // 三角形ベースの交差判定
                for (let i = 0; i < triangles.length; i++) {
                    if (lineIntersectsTriangle(lineStart, lineEnd, triangles[i])) {
                        intersectedTriangles.push(i);
                    }
                }
                
                if (debugEnabled) {
                    debugInfo.textContent = `三角形ベース判定: ${intersectedTriangles.length}個の三角形と交差`;
                } else {
                    debugInfo.textContent = '';
                }
            } else {
                // 球の方程式による交差判定
                const hasSphereIntersection = lineIntersectsSphere(lineStart, lineEnd, sphereCenter, sphereRadius);
                const intersectionPoints = findSphereLineIntersections(lineStart, lineEnd, sphereCenter, sphereRadius);
                
                let debugStr = `球判定: ${hasSphereIntersection ? '交差あり' : '交差なし'}, `;
                debugStr += `交点数: ${intersectionPoints.length}`;
                
                if (hasSphereIntersection && intersectionPoints.length > 0) {

                    debugStr += ', 交点:';
                    for (const point of intersectionPoints) {
                        debugStr += ` (${point[0].toFixed(2)}, ${point[1].toFixed(2)}, ${point[2].toFixed(2)})`;
                        
//nis
/*
　　　　　　　　　　　　const projectedPoint = project(point);
                        // 球本体
                        ctx.beginPath();
                        ctx.arc(projectedPoint.x, projectedPoint.y, 4, 0, Math.PI * 2);
                        ctx.fillStyle = 'rgba(255, 255, 0, 0.9)';
                        ctx.fill();
*/
                        // 各交点に最も近い三角形を見つける
                        const closestTriangles = findClosestTriangles(point);
                        
                        // 見つかった三角形を交差リストに追加
                        for (const triIdx of closestTriangles) {
                            if (!intersectedTriangles.includes(triIdx)) {
                                intersectedTriangles.push(triIdx);
                            }
                        }
                    }
                }
                
                if (debugEnabled) {
                    debugInfo.textContent = debugStr;
                } else {
                    debugInfo.textContent = '';
                }
            }
            
            // 交差情報を表示
            const infoElement = document.getElementById('intersectionInfo');
            if (intersectedTriangles.length > 0) {
               if(intersectedTriangles.length<3)
                infoElement.textContent = `交差判定: ${intersectedTriangles.length}個の三角形と交差`;
                infoElement.style.color = 'red';
            } else {
                infoElement.textContent = '交差判定: 交差なし';
                infoElement.style.color = 'black';
            }
        }
        
        // 交点に最も近い三角形を見つける関数
        function findClosestTriangles(point) {
            // 最も近い三角形のインデックス
            let closest = [];
            let minDist = Infinity;
            
            for (let i = 0; i < triangles.length; i++) {
                // 交点と三角形の各頂点との距離を計算
                const v1Dist = distance(point, triangles[i][0]);
                const v2Dist = distance(point, triangles[i][1]);
                const v3Dist = distance(point, triangles[i][2]);
                
                // 三角形への最小距離
                const dist = Math.min(v1Dist, v2Dist, v3Dist);
                
                // 最小値を更新
                if (dist < minDist) {
                    minDist = dist;
                    closest = [i];
                } else if (Math.abs(dist - minDist) < 1e-4) {
                    // ほぼ同じ距離なら追加
                    closest.push(i);
                }
            }
            
            // 隣接する三角形も含める
            const withNeighbors = [...closest];
            
            for (const centerIdx of closest) {
                for (let i = 0; i < triangles.length; i++) {
                    if (i !== centerIdx && !withNeighbors.includes(i)) {
                        // 三角形の頂点が共有されているかチェック
                        if (trianglesShareVertex(triangles[i], triangles[centerIdx])) {
                            withNeighbors.push(i);
                        }
                    }
                }
            }
            
            return withNeighbors;
        }
        
        // 二つの三角形が頂点を共有しているかチェック
        function trianglesShareVertex(tri1, tri2) {
            for (let i = 0; i < 3; i++) {
                for (let j = 0; j < 3; j++) {
                    if (vertexEqual(tri1[i], tri2[j])) {
                        return true;
                    }
                }
            }
            return false;
        }
        
        // 線分と三角形の交差判定関数
        function lineIntersectsTriangle(lineStart, lineEnd, triangle) {
            // 三角形の頂点
            const v0 = triangle[0];
            const v1 = triangle[1];
            const v2 = triangle[2];
            
            // 三角形の法線ベクトルを計算
            const edge1 = [v1[0] - v0[0], v1[1] - v0[1], v1[2] - v0[2]];
            const edge2 = [v2[0] - v0[0], v2[1] - v0[1], v2[2] - v0[2]];
            const normal = crossProduct(edge1, edge2);
            
            // 線分のベクトル
            const direction = [
                lineEnd[0] - lineStart[0],
                lineEnd[1] - lineStart[1],
                lineEnd[2] - lineStart[2]
            ];
            
            // 線分と平面の平行チェック
            const dotNormalDirection = dotProduct(normal, direction);
            if (Math.abs(dotNormalDirection) < 1e-6) {
                return false; // 平行なので交差なし
            }
            
            // 線分と平面の交点のパラメータtを計算
            const d = dotProduct(normal, [v0[0], v0[1], v0[2]]);
            const t = (d - dotProduct(normal, lineStart)) / dotNormalDirection;
            
            // 線分の範囲外なら交差なし
            if (t < 0 || t > 1) {
                return false;
            }
            
            // 交点の座標
            const intersection = [
                lineStart[0] + t * direction[0],
                lineStart[1] + t * direction[1],
                lineStart[2] + t * direction[2]
            ];
            
            // 交点が三角形の内部にあるかチェック
            return pointInTriangle(intersection, v0, v1, v2);
        }
        
        // 線分と球の交差判定
        function lineIntersectsSphere(lineStart, lineEnd, sphereCenter, sphereRadius) {
            // 線分のベクトル
            const lineDir = [
                lineEnd[0] - lineStart[0],
                lineEnd[1] - lineStart[1],
                lineEnd[2] - lineStart[2]
            ];
            
            // 始点から球中心へのベクトル
            const lineToSphere = [
                sphereCenter[0] - lineStart[0],
                sphereCenter[1] - lineStart[1],
                sphereCenter[2] - lineStart[2]
            ];
            
            // 係数計算
            const a = dotProduct(lineDir, lineDir);
            const b = -2 * dotProduct(lineDir, lineToSphere);
            const c = dotProduct(lineToSphere, lineToSphere) - sphereRadius * sphereRadius;
            
            // 判別式
            const discriminant = b * b - 4 * a * c;
            
            if (discriminant < 0) {
                // 交点なし
                return false;
            }
            
            // 2次方程式の解（交点のパラメータt）
            const t1 = (-b + Math.sqrt(discriminant)) / (2 * a);
            const t2 = (-b - Math.sqrt(discriminant)) / (2 * a);
            
            // t1, t2のいずれかが[0,1]の範囲内にあれば交差している
            return (t1 >= 0 && t1 <= 1) || (t2 >= 0 && t2 <= 1);
        }
        
        // 線分と球の交点を求める関数
        function findSphereLineIntersections(lineStart, lineEnd, sphereCenter, sphereRadius) {
            // 線分のベクトル
            const lineDir = [
                lineEnd[0] - lineStart[0],
                lineEnd[1] - lineStart[1],
                lineEnd[2] - lineStart[2]
            ];
            
            // 始点から球中心へのベクトル
            const lineToSphere = [
                sphereCenter[0] - lineStart[0],
                sphereCenter[1] - lineStart[1],
                sphereCenter[2] - lineStart[2]
            ];
            
            // 係数計算
            const a = dotProduct(lineDir, lineDir);
            const b = -2 * dotProduct(lineDir, lineToSphere);
            const c = dotProduct(lineToSphere, lineToSphere) - sphereRadius * sphereRadius;
            
            // 判別式
            const discriminant = b * b - 4 * a * c;
            
            if (discriminant < 0) {
                // 交点なし
                return [];
            } 
            
            const intersections = [];
            
            // 2次方程式の解（交点のパラメータt）
            const t1 = (-b + Math.sqrt(discriminant)) / (2 * a);
            const t2 = (-b - Math.sqrt(discriminant)) / (2 * a);
            
            // t1が[0,1]の範囲内なら交点として追加
            if (t1 >= 0 && t1 <= 1) {
                intersections.push([
                    lineStart[0] + t1 * lineDir[0],
                    lineStart[1] + t1 * lineDir[1],
                    lineStart[2] + t1 * lineDir[2]
                ]);
            }
            
            // t2が[0,1]の範囲内なら交点として追加
            if (t2 >= 0 && t2 <= 1) {
                intersections.push([
                    lineStart[0] + t2 * lineDir[0],
                    lineStart[1] + t2 * lineDir[1],
                    lineStart[2] + t2 * lineDir[2]
                ]);
            }
            
            return intersections;
        }
        
        // ベクトルの内積
        function dotProduct(v1, v2) {
            return v1[0] * v2[0] + v1[1] * v2[1] + v1[2] * v2[2];
        }
        
        // ベクトルの外積
        function crossProduct(v1, v2) {
            return [
                v1[1] * v2[2] - v1[2] * v2[1],
                v1[2] * v2[0] - v1[0] * v2[2],
                v1[0] * v2[1] - v1[1] * v2[0]
            ];
        }
        
        // 点が三角形の内部にあるかチェック（重心座標法）
        function pointInTriangle(p, v0, v1, v2) {
            // 辺ベクトル
            const e0 = [v1[0] - v0[0], v1[1] - v0[1], v1[2] - v0[2]];
            const e1 = [v2[0] - v0[0], v2[1] - v0[1], v2[2] - v0[2]];
            const e2 = [p[0] - v0[0], p[1] - v0[1], p[2] - v0[2]];
            
            // 内積計算
            const d00 = dotProduct(e0, e0);
            const d01 = dotProduct(e0, e1);
            const d11 = dotProduct(e1, e1);
            const d20 = dotProduct(e2, e0);
            const d21 = dotProduct(e2, e1);
            
            // 重心座標の分母
            const denom = d00 * d11 - d01 * d01;
            
            // 重心座標を計算
            const v = (d11 * d20 - d01 * d21) / denom;
            const w = (d00 * d21 - d01 * d20) / denom;
            const u = 1.0 - v - w;
            
            // 全ての重心座標が0以上1以下なら内部
            return v >= 0 && w >= 0 && u >= 0;
        }
        
        // 3D座標を2Dキャンバス座標に変換
        function project(point3D) {
            // 回転行列を適用
            const rotatedX = 
                point3D[0] * Math.cos(rotationY) - 
                point3D[2] * Math.sin(rotationY);
            const rotatedZ = 
                point3D[0] * Math.sin(rotationY) + 
                point3D[2] * Math.cos(rotationY);
            const rotatedY = 
                point3D[1] * Math.cos(rotationX) + 
                rotatedZ * Math.sin(rotationX);
            const finalZ = 
                -point3D[1] * Math.sin(rotationX) + 
                rotatedZ * Math.cos(rotationX);
                
            // 透視投影
            const scale = 70; // スケールを小さくして遠くから見るように調整
            const focalLength = 12; // フォーカス長を20に変更
            const depth = focalLength / (focalLength + finalZ - cameraPosition[2]);
            
            return {
                x: canvas.width / 2 + rotatedX * depth * scale,
                y: canvas.height / 2 + rotatedY * depth * scale,
                depth: depth
            };
        }
        
        // 描画関数
        function render() {
            // キャンバスをクリア
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 三角形をデプスソート
            const sortedTriangles = [];
            for (let i = 0; i < triangles.length; i++) {
                const centroid = [
                    (triangles[i][0][0] + triangles[i][1][0] + triangles[i][2][0]) / 3,
                    (triangles[i][0][1] + triangles[i][1][1] + triangles[i][2][1]) / 3,
                    (triangles[i][0][2] + triangles[i][1][2] + triangles[i][2][2]) / 3
                ];
                
                // 回転を考慮した深度
                const rotatedZ = 
                    centroid[0] * Math.sin(rotationY) + 
                    centroid[2] * Math.cos(rotationY);
                const finalZ = 
                    -centroid[1] * Math.sin(rotationX) + 
                    rotatedZ * Math.cos(rotationX);
                
                sortedTriangles.push({
                    index: i,
                    depth: finalZ,
                    triangle: triangles[i]
                });
            }
            
            // 奥から手前に描画
            sortedTriangles.sort((a, b) => a.depth - b.depth);
            
            // 三角形を描画
            for (const item of sortedTriangles) {
                const isIntersected = intersectedTriangles.includes(item.index);
                
                // 頂点を投影
                const p0 = project(item.triangle[0]);
                const p1 = project(item.triangle[1]);
                const p2 = project(item.triangle[2]);
                
                // 三角形を描画
                ctx.beginPath();
                ctx.moveTo(p0.x, p0.y);
                ctx.lineTo(p1.x, p1.y);
                ctx.lineTo(p2.x, p2.y);
                ctx.closePath();
                
                // 表示モードに応じて描画
                if (displayMode === 'solid') {
                    // 半透明表示
                    if (isIntersected) {
                        ctx.fillStyle = 'rgba(255, 0, 0, 0.2)';
//                        ctx.fillStyle = 'rgba(255, 0, 0, 0.7)';
                    } else {
                        // 深度に応じた色
                        const depth = item.depth + 3; // -3〜3 → 0〜6
                        const normalizedDepth = Math.max(0, Math.min(1, depth / 6));
                        const blueValue = Math.floor(100 + 155 * normalizedDepth);
//                        ctx.fillStyle = `rgba(100, 100, ${blueValue}, 0.2)`;
                        ctx.fillStyle = `rgba(100, 100, ${blueValue}, 0.3)`;
                    }
                    ctx.fill();
                }
                
                // ワイヤーフレームの線
                if (isIntersected) {
                   if(intersectedTriangles.length<3){
                    ctx.strokeStyle = 'red';
                    ctx.lineWidth = 2;
                   }
                } else {
                    // 深度に応じた色
                    const depth = item.depth + 3; // -3〜3 → 0〜6
                    const normalizedDepth = Math.max(0, Math.min(1, depth / 6));
                    const value = Math.floor(50 + 150 * normalizedDepth);
                    ctx.strokeStyle = `rgb(${value}, ${value}, 255)`;
                    ctx.lineWidth = 0.5;
                }
                ctx.stroke();
            }
            
            // 線分を描画
            const startPoint = project(lineStart);
            const endPoint = project(lineEnd);
            
            ctx.beginPath();
            ctx.moveTo(startPoint.x, startPoint.y);
            ctx.lineTo(endPoint.x, endPoint.y);
            ctx.strokeStyle = 'green';
            ctx.lineWidth = 3;
            ctx.stroke();
            
            // 線分の端点を描画
            ctx.fillStyle = 'black';
            ctx.beginPath();
            ctx.arc(startPoint.x, startPoint.y, 5, 0, Math.PI * 2);
            ctx.fill();
            
            ctx.fillStyle = 'red';
            ctx.beginPath();
            ctx.arc(endPoint.x, endPoint.y, 5, 0, Math.PI * 2);
            ctx.fill();
            
            // 交点を描画（デバッグモード時）
            if (debugEnabled && intersectionMethod === 'sphere') {
                const intersectionPoints = findSphereLineIntersections(lineStart, lineEnd, sphereCenter, sphereRadius);
                
                if (intersectionPoints.length > 0) {
                    ctx.fillStyle = 'yellow';
                    
                    for (const point of intersectionPoints) {
                        const projectedPoint = project(point);
                        
                        ctx.beginPath();
                        ctx.beginPath();
                        ctx.arc(projectedPoint.x, projectedPoint.y, 7, 0, Math.PI * 2);
                        ctx.fill();
                        
                        ctx.strokeStyle = 'black';
                        ctx.lineWidth = 1;
                        ctx.stroke();
                    }
                }
            }
        }
        
        // マウスイベント処理
        function onMouseDown(e) {
            isDragging = true;
            lastMouseX = e.clientX;
            lastMouseY = e.clientY;
        }
        
        function onMouseMove(e) {
            if (!isDragging) return;
            
            const deltaX = e.clientX - lastMouseX;
            const deltaY = e.clientY - lastMouseY;
            
            rotationY += deltaX * 0.01;
            rotationX += deltaY * 0.01;
            
            lastMouseX = e.clientX;
            lastMouseY = e.clientY;
            
            render();
        }
        
        function onMouseUp() {
            isDragging = false;
        }
        
        // 線分をリセット
        function resetLine() {
            lineStart = [-2, 0.5, 0.5];
            lineEnd = [2, -0.5, -0.5];
            checkIntersection();
            render();
        }
        
        // ランダムな線分を作成
        function createRandomLine() {
            // 球体を交差する確率を高めるために、球の近くを通る線分を生成
            
            // 方法1: 球を通過する可能性が高い直線を生成
            const useMethod = Math.random() > 0.5 ? 1 : 2;
            
            if (useMethod === 1) {
                // 球の半径の少し外側から始まる線分
                const factor = 2.5;
                
                // ランダムな方向ベクトル
                const dx = Math.random() * 2 - 1;
                const dy = Math.random() * 2 - 1;
                const dz = Math.random() * 2 - 1;
                
                // 正規化
                const length = Math.sqrt(dx*dx + dy*dy + dz*dz);
                const nx = dx / length;
                const ny = dy / length;
                const nz = dz / length;
                
                // 球の中心から外側に向かうベクトル
                lineStart = [
                    sphereCenter[0] + nx * sphereRadius * factor,
                    sphereCenter[1] + ny * sphereRadius * factor,
                    sphereCenter[2] + nz * sphereRadius * factor
                ];
                
                // 反対側の終点
                lineEnd = [
                    sphereCenter[0] - nx * sphereRadius * factor,
                    sphereCenter[1] - ny * sphereRadius * factor,
                    sphereCenter[2] - nz * sphereRadius * factor
                ];
            } else {
                // 方法2: 球から少し離れた点から球の方向に向かう線分
                const dist = sphereRadius * 3;
                
                // 始点: 球の中心から離れた点
                lineStart = [
                    (Math.random() * 2 - 1) * dist,
                    (Math.random() * 2 - 1) * dist,
                    (Math.random() * 2 - 1) * dist
                ];
                
                // 終点: 球の近くの点
                const targetPoint = [
                    sphereCenter[0] + (Math.random() * 2 - 1) * sphereRadius * 1.5,
                    sphereCenter[1] + (Math.random() * 2 - 1) * sphereRadius * 1.5,
                    sphereCenter[2] + (Math.random() * 2 - 1) * sphereRadius * 1.5
                ];
                
                // 少しだけランダムに方向をずらす
                lineEnd = [
                    targetPoint[0] + (Math.random() * 0.4 - 0.2),
                    targetPoint[1] + (Math.random() * 0.4 - 0.2),
                    targetPoint[2] + (Math.random() * 0.4 - 0.2)
                ];
            }
            
            if (debugEnabled) {
                console.log("新しい線分:", lineStart, "->", lineEnd);
            }
            
            checkIntersection();
            render();
        }
        
        // 二点間の距離を計算
        function distance(p1, p2) {
            return Math.sqrt(
                (p1[0] - p2[0]) * (p1[0] - p2[0]) +
                (p1[1] - p2[1]) * (p1[1] - p2[1]) +
                (p1[2] - p2[2]) * (p1[2] - p2[2])
            );
        }
        
        // 頂点が同じかどうかをチェック（浮動小数点の誤差を考慮）
        function vertexEqual(v1, v2) {
            const epsilon = 1e-6;
            return (
                Math.abs(v1[0] - v2[0]) < epsilon &&
                Math.abs(v1[1] - v2[1]) < epsilon &&
                Math.abs(v1[2] - v2[2]) < epsilon
            );
        }
        
        // 初期化
        window.onload = init;
    </script>
球を三角形メッシュ化、マウス左クリックで見る方向、<br>
表示モード:「半透明表示」と「ワイヤーフレーム」を選択<br>
交点計算；「三角形ベース」または「球の方程式」の交差判定方法。「三角形ベース」の方法では個々の三角形と線分の交差を直接計算し、「球の方程式」の方法では球全体と線分の交差を計算した後に関連する三角形を特定します。
<br>

<div>
<!--
<p>
線分と球の交差判定関数 (lineIntersectsSphere) の修正:

ベクトルの正規化ステップを取り除き、元の方向ベクトルを直接使用
球と線の交差を求める2次方程式を正しく構築
判別式に基づいて交差判定を行い、パラメータtが[0,1]の範囲内にあるかをチェック


こちらも正規化のステップを取り除き、元の方向ベクトルを直接使用
交点のパラメータt1, t2が線分の範囲内（0から1）にあるかを確認
交点座標を直接配列形式で返すよう変更



これらの修正により、球の方程式を使った交差判定が正しく機能するようになりました。「三角形ベース」と「球の方程式」の両方の交差判定方法を選択して比較できます。
両方の判定方法には違いがあります：

三角形ベース：球面を離散的な三角形の集合として扱い、それぞれの三角形と線分の交差を個別に判定します
球の方程式：球を連続的な数学的オブジェクトとして扱い、線分と球の交差を解析的に計算した後、交点に最も近い三角形を見つけます

表示モードも「半透明表示」と「ワイヤーフレーム」の両方を選択できるようになっています。
<p>
球の方程式を使用した交差判定を修正しました。以下の主な変更点があります：

球と線分の交差判定関数の修正:

二次方程式の係数の符号を修正しました（特に b の符号）
交点が存在する場合の交点座標計算を完全に実装しました


交点と三角形の関連付け方法を変更:

pointTriangleDistance 関数を使う代わりに、交点と三角形の頂点間の直接的な距離を計算
最も近い頂点を持つ三角形を特定するシンプルで効果的なアプローチに変更
交点に近い三角形だけでなく、その隣接三角形も交差していると扱うことで自然な見た目に


頂点比較のためのヘルパー関数追加:

distance: 3D空間内の2点間の距離を計算
vertexEqual: 浮動小数点数の誤差を考慮した頂点比較


デバッグ支援機能:

デバッグ情報をコンソールに出力し、問題解決をサポート



これらの変更により、「三角形ベース」と「球の方程式」両方の交差判定方法が正しく動作するようになりました。「三角形ベース」の方法では個々の三角形と線分の交差を直接計算し、「球の方程式」の方法では球全体と線分の交差を計算した後に関連する三角形を特定します。
交差判定方法をセレクトボックスから切り替えて、両方のアプローチの違いを確認できます。また、表示方法も「半透明表示」と「ワイヤーフレーム」から選択できます。
<p>

デバッグ機能の強化:

デバッグモードのオン/オフ切り替えチェックボックスを追加
交差判定に関する詳細情報を画面に表示
球の方程式による交差点を黄色いマーカーで視覚的に表示


交差判定の改善:

球面上の三角形の検出アルゴリズムを改良
最も近い三角形だけでなく、その隣接三角形も自動的に検出
複数の交点がある場合の処理を強化


ランダム線分生成の改善:

線分が球と交差する確率を高める生成アルゴリズムに変更
2種類の生成方法をランダムに使用（球を貫通する線分と球に向かう線分）


視覚的な改善:

深度に応じたグラデーションカラーで三角形を表示
ワイヤーフレームモードでも深度が視覚的にわかるよう色を調整
交点を黄色いマーカーで強調表示（デバッグモード時）


デプスソートの修正:

回転を考慮した正確な深度計算で、より正確な前後関係の表示



これらの改良により、球と線分の交差判定がより視覚的に確認しやすくなり、球の方程式を使用した判定と三角形ベースの判定の違いを比較できるようになりました。また、デバッグ情報の表示により、交差判定の仕組みを理解する助けになります。
ランダム線分生成機能も改善したので、「ランダムな線分」ボタンを押すことで高確率で球と交差する線分が生成され、交差判定の動作確認がしやすくなっています。
<p>
交点の情報表示

交点の正確な座標を画面上に表示
交点の数に応じた色分け表示


線分のインタラクティブな操作

マウスドラッグで線分の位置を直接調整
キーボード操作による線分の位置微調整


視覚効果のさらなる向上

照明効果の追加
影の表示でより立体的な表現


応用機能

球を複数表示
異なる形状（立方体や円柱など）との交差判定比較
-->
</div>
</body>
</html>