a

particle-lab/29-vertex-visualization/index.html

@@ -0,0 +1,398 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>29 - Vertex Visualization</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            overflow: hidden;
+            background: #050505;
+            font-family: 'Segoe UI', Arial, sans-serif;
+        }
+        #canvas-container {
+            position: fixed;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+        }
+        #ui {
+            position: fixed;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+            pointer-events: none;
+            z-index: 10;
+        }
+        #title {
+            position: absolute;
+            top: 25px; left: 30px;
+            color: #fff;
+            font-size: 18px;
+            letter-spacing: 2px;
+        }
+        #controls {
+            position: absolute;
+            bottom: 30px; left: 30px;
+            pointer-events: auto;
+            background: rgba(0,0,0,0.85);
+            padding: 20px;
+            border-radius: 12px;
+            border: 1px solid rgba(0,212,255,0.2);
+        }
+        #controls button {
+            background: rgba(255,255,255,0.08);
+            border: 1px solid rgba(255,255,255,0.15);
+            color: #fff;
+            padding: 10px 18px;
+            margin: 5px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-size: 12px;
+            display: block;
+            width: 160px;
+            text-align: left;
+        }
+        #controls button:hover {
+            background: rgba(0,212,255,0.2);
+            border-color: #00d4ff;
+        }
+        #controls button.active {
+            background: rgba(0,212,255,0.4);
+            border-color: #00d4ff;
+        }
+        #stats {
+            position: absolute;
+            top: 80px; right: 30px;
+            color: #aaa;
+            font-size: 12px;
+            text-align: right;
+            background: rgba(0,0,0,0.7);
+            padding: 15px 20px;
+            border-radius: 8px;
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        #stats .value {
+            color: #00d4ff;
+            font-size: 18px;
+            font-weight: bold;
+        }
+        #stats .label {
+            color: #666;
+            margin-bottom: 5px;
+        }
+        #info {
+            position: absolute;
+            bottom: 30px; right: 30px;
+            color: #666;
+            font-size: 11px;
+            text-align: right;
+        }
+        #loading {
+            position: fixed;
+            top: 50%; left: 50%;
+            transform: translate(-50%, -50%);
+            color: #00d4ff;
+            font-size: 20px;
+            z-index: 100;
+        }
+    </style>
+</head>
+<body>
+    <div id="loading">加载顶点数据...</div>
+    <div id="canvas-container"></div>
+    <div id="ui">
+        <div id="title">29 - Vertex Visualization</div>
+        
+        <div id="controls">
+            <div style="color: #00d4ff; margin-bottom: 10px; font-size: 13px;">📊 可视化模式</div>
+            <button onclick="setMode('mesh')" class="active" id="btn-mesh">🔷 网格表面</button>
+            <button onclick="setMode('points')" id="btn-points">⚪ 顶点云</button>
+            <button onclick="setMode('wireframe')" id="btn-wireframe">📐 线框结构</button>
+            <button onclick="setMode('heatmap')" id="btn-heatmap">🌡️ 高度热力图</button>
+            <button onclick="setMode('normal')" id="btn-normal">➡️ 法线方向</button>
+            <button onclick="setMode('explode')" id="btn-explode">💥 顶点爆炸</button>
+        </div>
+        
+        <div id="stats">
+            <div style="margin-bottom: 15px;">
+                <div class="label">顶点总数</div>
+                <div class="value" id="vertex-count">-</div>
+            </div>
+            <div style="margin-bottom: 15px;">
+                <div class="label">三角面数</div>
+                <div class="value" id="face-count">-</div>
+            </div>
+            <div>
+                <div class="label">当前模式</div>
+                <div class="value" id="current-mode" style="font-size: 14px;">网格表面</div>
+            </div>
+        </div>
+        
+        <div id="info">
+            基于 Stanford Bunny 数据集<br>
+            1,889 顶点 | 3,851 三角面 (低质量)
+        </div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/PLYLoader.js"></script>
+
+    <script>
+        // ========== 场景设置 ==========
+        const scene = new THREE.Scene();
+        scene.background = new THREE.Color(0x050505);
+        scene.fog = new THREE.Fog(0x050505, 0.5, 5);
+
+        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 100);
+        camera.position.set(0.4, 0.3, 0.6);
+
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setPixelRatio(window.devicePixelRatio);
+        document.getElementById('canvas-container').appendChild(renderer.domElement);
+
+        // 控制器
+        const controls = new THREE.OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.05;
+        controls.autoRotate = true;
+        controls.autoRotateSpeed = 0.3;
+        controls.target.set(0, 0.05, 0);
+
+        // 灯光
+        const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
+        scene.add(ambientLight);
+
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+        directionalLight.position.set(1, 2, 1);
+        scene.add(directionalLight);
+
+        // ========== 顶点数据存储 ==========
+        let originalGeometry = null;
+        let currentMesh = null;
+        let currentMode = 'mesh';
+        let animationId = null;
+        let time = 0;
+
+        // ========== 模式配置 ==========
+        const modes = {
+            mesh: {
+                name: '网格表面',
+                create: (geometry) => {
+                    const material = new THREE.MeshStandardMaterial({
+                        color: 0xdddddd,
+                        metalness: 0.1,
+                        roughness: 0.5,
+                        flatShading: false
+                    });
+                    return new THREE.Mesh(geometry, material);
+                }
+            },
+            points: {
+                name: '顶点云',
+                create: (geometry) => {
+                    const material = new THREE.PointsMaterial({
+                        color: 0x00d4ff,
+                        size: 0.008,
+                        transparent: true,
+                        opacity: 0.8,
+                        sizeAttenuation: true
+                    });
+                    return new THREE.Points(geometry, material);
+                }
+            },
+            wireframe: {
+                name: '线框结构',
+                create: (geometry) => {
+                    const material = new THREE.MeshBasicMaterial({
+                        color: 0x00ff88,
+                        wireframe: true,
+                        transparent: true,
+                        opacity: 0.6
+                    });
+                    return new THREE.Mesh(geometry, material);
+                }
+            },
+            heatmap: {
+                name: '高度热力图',
+                create: (geometry) => {
+                    // 根据高度着色
+                    const colors = [];
+                    const positions = geometry.attributes.position.array;
+                    let minY = Infinity, maxY = -Infinity;
+                    
+                    for (let i = 1; i < positions.length; i += 3) {
+                        minY = Math.min(minY, positions[i]);
+                        maxY = Math.max(maxY, positions[i]);
+                    }
+                    
+                    for (let i = 1; i < positions.length; i += 3) {
+                        const y = positions[i];
+                        const t = (y - minY) / (maxY - minY);
+                        // 热力图颜色：蓝->绿->黄->红
+                        const color = new THREE.Color();
+                        color.setHSL(0.7 - t * 0.7, 1, 0.5);
+                        colors.push(color.r, color.g, color.b);
+                    }
+                    
+                    geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
+                    
+                    const material = new THREE.MeshStandardMaterial({
+                        vertexColors: true,
+                        roughness: 0.5,
+                        metalness: 0.1
+                    });
+                    return new THREE.Mesh(geometry, material);
+                }
+            },
+            normal: {
+                name: '法线方向',
+                create: (geometry) => {
+                    // 根据法线方向着色
+                    const colors = [];
+                    const normals = geometry.attributes.normal.array;
+                    
+                    for (let i = 0; i < normals.length; i += 3) {
+                        const nx = normals[i];
+                        const ny = normals[i + 1];
+                        const nz = normals[i + 2];
+                        // 将法线 [-1,1] 映射到颜色 [0,1]
+                        colors.push((nx + 1) * 0.5, (ny + 1) * 0.5, (nz + 1) * 0.5);
+                    }
+                    
+                    geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
+                    
+                    const material = new THREE.MeshStandardMaterial({
+                        vertexColors: true,
+                        roughness: 0.3,
+                        metalness: 0.2
+                    });
+                    return new THREE.Mesh(geometry, material);
+                }
+            },
+            explode: {
+                name: '顶点爆炸',
+                create: (geometry) => {
+                    // 复制几何体用于动画
+                    const material = new THREE.PointsMaterial({
+                        color: 0xffd700,
+                        size: 0.01,
+                        transparent: true,
+                        opacity: 0.9
+                    });
+                    return new THREE.Points(geometry, material);
+                },
+                animate: (mesh, time) => {
+                    if (!mesh || !originalGeometry) return;
+                    const positions = mesh.geometry.attributes.position.array;
+                    const origPositions = originalGeometry.attributes.position.array;
+                    const normals = originalGeometry.attributes.normal.array;
+                    
+                    const explodeFactor = (Math.sin(time * 2) + 1) * 0.15; // 0 到 0.3
+                    
+                    for (let i = 0; i < positions.length; i += 3) {
+                        const nx = normals[i];
+                        const ny = normals[i + 1];
+                        const nz = normals[i + 2];
+                        
+                        positions[i] = origPositions[i] + nx * explodeFactor;
+                        positions[i + 1] = origPositions[i + 1] + ny * explodeFactor;
+                        positions[i + 2] = origPositions[i + 2] + nz * explodeFactor;
+                    }
+                    
+                    mesh.geometry.attributes.position.needsUpdate = true;
+                }
+            }
+        };
+
+        // ========== 切换模式 ==========
+        function setMode(mode) {
+            currentMode = mode;
+            
+            // 更新按钮
+            document.querySelectorAll('#controls button').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            document.getElementById(`btn-${mode}`).classList.add('active');
+            document.getElementById('current-mode').textContent = modes[mode].name;
+            
+            // 移除旧模型
+            if (currentMesh) {
+                scene.remove(currentMesh);
+                if (currentMesh.geometry !== originalGeometry) {
+                    currentMesh.geometry.dispose();
+                }
+                currentMesh.material.dispose();
+            }
+            
+            // 创建新几何体（复制原始数据）
+            const newGeometry = originalGeometry.clone();
+            newGeometry.computeVertexNormals();
+            
+            // 创建新模型
+            currentMesh = modes[mode].create(newGeometry);
+            currentMesh.scale.set(10, 10, 10);
+            currentMesh.position.set(0, -0.05, 0);
+            
+            scene.add(currentMesh);
+        }
+
+        // ========== 加载模型 ==========
+        const loader = new THREE.PLYLoader();
+        loader.load(
+            '../stanford_models/reconstruction/bun_zipper_res3.ply',
+            function(geometry) {
+                geometry.computeVertexNormals();
+                originalGeometry = geometry.clone();
+                
+                // 更新统计
+                document.getElementById('vertex-count').textContent = 
+                    geometry.attributes.position.count.toLocaleString();
+                document.getElementById('face-count').textContent = 
+                    geometry.index ? (geometry.index.count / 3).toLocaleString() : 'N/A';
+                
+                document.getElementById('loading').style.display = 'none';
+                
+                // 初始模式
+                setMode('mesh');
+            },
+            undefined,
+            function(error) {
+                console.error('加载失败:', error);
+                document.getElementById('loading').textContent = '加载失败';
+            }
+        );
+
+        // ========== 网格地面 ==========
+        const gridHelper = new THREE.GridHelper(2, 20, 0x222222, 0x111111);
+        gridHelper.position.y = -0.1;
+        scene.add(gridHelper);
+
+        // ========== 窗口调整 ==========
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+
+        // ========== 动画 ==========
+        function animate() {
+            animationId = requestAnimationFrame(animate);
+            
+            time += 0.01;
+            controls.update();
+            
+            // 特殊模式动画
+            if (modes[currentMode].animate) {
+                modes[currentMode].animate(currentMesh, time);
+            }
+            
+            renderer.render(scene, camera);
+        }
+
+        animate();
+    </script>
+</body>
+</html>