nanocode/particle-lab/28-real-stanford-models/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>28 - Real Stanford 3D Models</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            overflow: hidden;
            background: #0a0a0a;
            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;
        }
        #model-info {
            position: absolute;
            top: 25px; right: 30px;
            color: #00d4ff;
            font-size: 14px;
            text-align: right;
        }
        #model-info .name {
            font-size: 18px;
            font-weight: bold;
            color: #fff;
        }
        #controls {
            position: absolute;
            bottom: 30px; left: 30px;
            pointer-events: auto;
            background: rgba(0,0,0,0.8);
            padding: 15px 20px;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.1);
        }
        #controls button {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            color: #fff;
            padding: 8px 16px;
            margin: 5px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 12px;
        }
        #controls button:hover {
            background: rgba(0,212,255,0.3);
            border-color: #00d4ff;
        }
        #controls button.active {
            background: rgba(0,212,255,0.5);
            border-color: #00d4ff;
        }
        #loading {
            position: fixed;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            color: #00d4ff;
            font-size: 24px;
            z-index: 100;
            text-align: center;
        }
        #loading .progress {
            font-size: 14px;
            color: #888;
            margin-top: 10px;
        }
        #stats {
            position: absolute;
            bottom: 30px; right: 30px;
            color: #888;
            font-size: 12px;
            text-align: right;
            background: rgba(0,0,0,0.7);
            padding: 15px;
            border-radius: 8px;
        }
        #stats .value {
            color: #fff;
            font-size: 14px;
        }
        .error {
            color: #ff6b6b !important;
        }
    </style>
</head>
<body>
    <div id="loading">
        <div id="loading-text">加载 PLY 模型...</div>
        <div id="loading-progress" class="progress"></div>
    </div>
    <div id="canvas-container"></div>
    <div id="ui">
        <div id="title">28 - Real Stanford 3D Models</div>
        <div id="model-info">
            <div class="name" id="model-name">Stanford Bunny</div>
            <div id="model-file">bun_zipper.ply</div>
        </div>
        
        <div id="controls">
            <div><strong>模型选择:</strong></div>
            <button onclick="loadModel('bunny_full')" class="active" id="btn-bunny_full">🐰 Bunny (全)</button>
            <button onclick="loadModel('bunny_mid')" id="btn-bunny_mid">🐰 Bunny (中)</button>
            <button onclick="loadModel('bunny_low')" id="btn-bunny_low">🐰 Bunny (低)</button>
            <br><br>
            <div><strong>渲染模式:</strong></div>
            <button onclick="setMaterial('normal')" class="active" id="btn-normal">法线着色</button>
            <button onclick="setMaterial('wireframe')" id="btn-wireframe">线框</button>
            <button onclick="setMaterial('standard')" id="btn-standard">标准材质</button>
        </div>
        
        <div id="stats">
            <div>顶点数: <span class="value" id="vertex-count">-</span></div>
            <div>面数: <span class="value" id="face-count">-</span></div>
            <div>加载时间: <span class="value" id="load-time">-</span></div>
            <br>
            <div style="color:#666">鼠标拖拽旋转 | 滚轮缩放</div>
        </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(0x0a0a0a);
        scene.fog = new THREE.Fog(0x0a0a0a, 0.5, 5);

        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 100);
        camera.position.set(0.3, 0.2, 0.5);

        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.shadowMap.enabled = true;
        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.5;
        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);
        directionalLight.castShadow = true;
        scene.add(directionalLight);

        const pointLight1 = new THREE.PointLight(0x00d4ff, 0.5, 3);
        pointLight1.position.set(-1, 0.5, 1);
        scene.add(pointLight1);

        const pointLight2 = new THREE.PointLight(0xff6b9d, 0.5, 3);
        pointLight2.position.set(1, 0.5, -1);
        scene.add(pointLight2);

        // ========== 材质 ==========
        function createMaterial(type) {
            switch(type) {
                case 'wireframe':
                    return new THREE.MeshBasicMaterial({
                        color: 0x00d4ff,
                        wireframe: true,
                        transparent: true,
                        opacity: 0.5
                    });
                case 'standard':
                    return new THREE.MeshStandardMaterial({
                        color: 0xdddddd,
                        metalness: 0.1,
                        roughness: 0.4,
                        flatShading: false
                    });
                case 'normal':
                default:
                    return new THREE.MeshNormalMaterial({
                        flatShading: false
                    });
            }
        }

        // ========== 模型配置 ==========
        // 注意：这些路径是相对于当前页面的
        const modelConfigs = {
            bunny_full: {
                url: '../stanford_models/reconstruction/bun_zipper.ply',
                scale: 10,
                position: { x: 0, y: -0.05, z: 0 },
                name: 'Stanford Bunny',
                file: 'bun_zipper.ply (35,947 vertices)'
            },
            bunny_mid: {
                url: '../stanford_models/reconstruction/bun_zipper_res2.ply',
                scale: 10,
                position: { x: 0, y: -0.05, z: 0 },
                name: 'Stanford Bunny (Medium)',
                file: 'bun_zipper_res2.ply (8,171 vertices)'
            },
            bunny_low: {
                url: '../stanford_models/reconstruction/bun_zipper_res3.ply',
                scale: 10,
                position: { x: 0, y: -0.05, z: 0 },
                name: 'Stanford Bunny (Low)',
                file: 'bun_zipper_res3.ply (1,889 vertices)'
            }
        };

        // ========== 模型加载 ==========
        let currentMesh = null;
        let currentMaterial = 'normal';
        const loader = new THREE.PLYLoader();

        function loadModel(modelKey) {
            const startTime = performance.now();
            const config = modelConfigs[modelKey];
            
            // 更新 UI
            document.getElementById('loading').style.display = 'block';
            document.getElementById('loading-text').textContent = `加载 ${config.name}...`;
            document.getElementById('loading-progress').textContent = '解析 PLY 格式...';
            
            // 更新按钮状态
            document.querySelectorAll('#controls button').forEach(btn => {
                if (btn.id.startsWith('btn-bunny')) btn.classList.remove('active');
            });
            document.getElementById(`btn-${modelKey}`).classList.add('active');
            
            document.getElementById('model-name').textContent = config.name;
            document.getElementById('model-file').textContent = config.file;
            
            // 移除旧模型
            if (currentMesh) {
                scene.remove(currentMesh);
                currentMesh.geometry.dispose();
            }
            
            // 加载新模型
            loader.load(
                config.url,
                function(geometry) {
                    document.getElementById('loading-progress').textContent = '构建网格...';
                    
                    // 计算法线
                    geometry.computeVertexNormals();
                    
                    // 创建网格
                    const material = createMaterial(currentMaterial);
                    currentMesh = new THREE.Mesh(geometry, material);
                    
                    // 应用变换
                    currentMesh.scale.set(config.scale, config.scale, config.scale);
                    currentMesh.position.set(config.position.x, config.position.y, config.position.z);
                    
                    currentMesh.castShadow = true;
                    currentMesh.receiveShadow = true;
                    
                    scene.add(currentMesh);
                    
                    // 更新统计
                    const loadTime = ((performance.now() - startTime) / 1000).toFixed(2);
                    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('load-time').textContent = loadTime + 's';
                    
                    document.getElementById('loading').style.display = 'none';
                },
                function(progress) {
                    if (progress.lengthComputable) {
                        const percent = Math.round(progress.loaded / progress.total * 100);
                        document.getElementById('loading-progress').textContent = 
                            `下载进度: ${percent}%`;
                    }
                },
                function(error) {
                    console.error('加载失败:', error);
                    document.getElementById('loading-text').textContent = '加载失败!';
                    document.getElementById('loading-progress').textContent = 
                        '请检查文件路径: ' + config.url;
                    document.getElementById('loading').classList.add('error');
                }
            );
        }

        function setMaterial(type) {
            currentMaterial = type;
            
            document.querySelectorAll('#controls button').forEach(btn => {
                if (btn.id.startsWith('btn-') && 
                    (btn.id.includes('normal') || btn.id.includes('wireframe') || btn.id.includes('standard'))) {
                    btn.classList.remove('active');
                }
            });
            document.getElementById(`btn-${type}`).classList.add('active');
            
            if (currentMesh) {
                currentMesh.material.dispose();
                currentMesh.material = createMaterial(type);
            }
        }

        // ========== 网格地面 ==========
        const gridHelper = new THREE.GridHelper(2, 20, 0x333333, 0x222222);
        gridHelper.position.y = -0.1;
        scene.add(gridHelper);

        // ========== 坐标轴 ==========
        const axesHelper = new THREE.AxesHelper(0.2);
        scene.add(axesHelper);

        // ========== 窗口调整 ==========
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        // ========== 动画 ==========
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }

        // 初始化
        loadModel('bunny_full');
        animate();
    </script>
</body>
</html>