nanocode/particle-lab/30-stanford-dragon/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>30 - Stanford Dragon</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: 20px;
            letter-spacing: 2px;
        }
        #title span {
            color: #00d4ff;
            font-size: 14px;
        }
        #model-info {
            position: absolute;
            top: 25px; right: 30px;
            color: #00d4ff;
            text-align: right;
        }
        #model-info .name {
            font-size: 24px;
            font-weight: bold;
            color: #fff;
        }
        #model-info .stats {
            font-size: 12px;
            color: #888;
            margin-top: 5px;
        }
        #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;
        }
        #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;
        }
        #loading {
            position: fixed;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            color: #00d4ff;
            font-size: 24px;
            text-align: center;
            z-index: 100;
        }
        #loading .progress {
            font-size: 14px;
            color: #666;
            margin-top: 10px;
        }
        #quality-selector {
            position: absolute;
            top: 80px; left: 30px;
            pointer-events: auto;
        }
        #quality-selector button {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            color: #888;
            padding: 5px 12px;
            margin-right: 5px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
        }
        #quality-selector button:hover {
            color: #fff;
            border-color: #00d4ff;
        }
        #quality-selector button.active {
            color: #00d4ff;
            border-color: #00d4ff;
        }
    </style>
</head>
<body>
    <div id="loading">
        <div>🐉 加载 Dragon...</div>
        <div class="progress" id="loading-text">初始化</div>
    </div>
    
    <div id="canvas-container"></div>
    
    <div id="ui">
        <div id="title">30 - Stanford Dragon <span>🐉</span></div>
        
        <div id="quality-selector">
            <button onclick="loadQuality('res4')" id="btn-res4">极简 (351KB)</button>
            <button onclick="loadQuality('res3')" class="active" id="btn-res3">低质量 (1.6MB)</button>
            <button onclick="loadQuality('res2')" id="btn-res2">中等 (7MB)</button>
            <button onclick="loadQuality('full')" id="btn-full">完整 (33MB)</button>
        </div>
        
        <div id="model-info">
            <div class="name">Stanford Dragon</div>
            <div class="stats">
                顶点: <span id="vertex-count">-</span> | 
                面数: <span id="face-count">-</span><br>
                文件: <span id="file-info">dragon_vrip_res3.ply</span>
            </div>
        </div>
        
        <div id="controls">
            <div style="color: #00d4ff; margin-bottom: 10px; font-size: 13px;">🎨 渲染模式</div>
            <button onclick="setMode('standard')" class="active" id="btn-standard">标准材质</button>
            <button onclick="setMode('normal')" id="btn-normal">法线着色</button>
            <button onclick="setMode('wireframe')" id="btn-wireframe">线框模式</button>
            <button onclick="setMode('points')" id="btn-points">顶点云</button>
            <button onclick="setMode('matcap')" id="btn-matcap">金属光泽</button>
        </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, 8);

        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 100);
        camera.position.set(0, 0.1, 0.6);

        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, 0);

        // 灯光
        const ambientLight = new THREE.AmbientLight(0x404040, 0.4);
        scene.add(ambientLight);

        const mainLight = new THREE.DirectionalLight(0xffffff, 1);
        mainLight.position.set(1, 2, 1);
        mainLight.castShadow = true;
        scene.add(mainLight);

        const rimLight = new THREE.DirectionalLight(0x00d4ff, 0.5);
        rimLight.position.set(-1, 0.5, -1);
        scene.add(rimLight);

        // ========== 材质 ==========
        const materials = {
            standard: () => new THREE.MeshStandardMaterial({
                color: 0xcc8866,
                metalness: 0.2,
                roughness: 0.6
            }),
            normal: () => new THREE.MeshNormalMaterial(),
            wireframe: () => new THREE.MeshBasicMaterial({
                color: 0x00ff88,
                wireframe: true,
                transparent: true,
                opacity: 0.4
            }),
            points: () => new THREE.PointsMaterial({
                color: 0xffaa00,
                size: 0.005,
                transparent: true,
                opacity: 0.8
            }),
            matcap: () => new THREE.MeshStandardMaterial({
                color: 0xffd700,
                metalness: 0.9,
                roughness: 0.1
            })
        };

        // ========== 模型配置 ==========
        const modelConfigs = {
            res4: { file: 'dragon_vrip_res4.ply', size: '351KB', scale: 0.5 },
            res3: { file: 'dragon_vrip_res3.ply', size: '1.6MB', scale: 0.5 },
            res2: { file: 'dragon_vrip_res2.ply', size: '7MB', scale: 0.5 },
            full: { file: 'dragon_vrip.ply', size: '33MB', scale: 0.5 }
        };

        let currentMesh = null;
        let currentMode = 'standard';
        let currentQuality = 'res3';
        const loader = new THREE.PLYLoader();

        // ========== 加载质量级别 ==========
        function loadQuality(quality) {
            currentQuality = quality;
            const config = modelConfigs[quality];
            
            // 更新按钮
            document.querySelectorAll('#quality-selector button').forEach(btn => {
                btn.classList.remove('active');
            });
            document.getElementById(`btn-${quality}`).classList.add('active');
            document.getElementById('file-info').textContent = `${config.file} (${config.size})`;
            
            // 显示加载
            document.getElementById('loading').style.display = 'block';
            document.getElementById('loading-text').textContent = `加载 ${config.size}...`;
            
            // 移除旧模型
            if (currentMesh) {
                scene.remove(currentMesh);
                currentMesh.geometry.dispose();
                currentMesh.material.dispose();
            }
            
            // 加载
            loader.load(
                `../../stanfordRecon/dragon_recon/${config.file}`,
                function(geometry) {
                    geometry.computeVertexNormals();
                    
                    const material = materials[currentMode]();
                    currentMesh = new THREE.Mesh(geometry, material);
                    currentMesh.scale.set(config.scale, config.scale, config.scale);
                    
                    // 居中
                    geometry.center();
                    currentMesh.castShadow = true;
                    currentMesh.receiveShadow = true;
                    
                    scene.add(currentMesh);
                    
                    // 更新统计
                    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';
                },
                function(progress) {
                    if (progress.lengthComputable) {
                        const pct = Math.round(progress.loaded / progress.total * 100);
                        document.getElementById('loading-text').textContent = 
                            `${config.size} - ${pct}%`;
                    }
                },
                function(error) {
                    console.error(error);
                    document.getElementById('loading-text').textContent = '加载失败，请重试';
                }
            );
        }

        // ========== 切换渲染模式 ==========
        function setMode(mode) {
            currentMode = mode;
            
            document.querySelectorAll('#controls button').forEach(btn => {
                btn.classList.remove('active');
            });
            document.getElementById(`btn-${mode}`).classList.add('active');
            
            if (currentMesh) {
                currentMesh.material.dispose();
                currentMesh.material = materials[mode]();
            }
        }

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

        // ========== 窗口调整 ==========
        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);
        }

        // 初始化
        loadQuality('res3');
        animate();
    </script>
</body>
</html>