a

particle-lab/27-stanford-models/index.html

@@ -0,0 +1,416 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>27 - 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-name {
+            position: absolute;
+            top: 25px; right: 30px;
+            color: #00d4ff;
+            font-size: 16px;
+            font-weight: bold;
+        }
+        #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);
+            max-width: 400px;
+        }
+        #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;
+        }
+        #code-panel {
+            position: absolute;
+            top: 80px; right: 30px;
+            width: 380px;
+            background: rgba(0,0,0,0.9);
+            border: 1px solid rgba(0,212,255,0.3);
+            border-radius: 10px;
+            padding: 15px;
+            pointer-events: auto;
+            font-family: 'Consolas', 'Monaco', monospace;
+            font-size: 11px;
+            color: #00d4ff;
+            max-height: 60vh;
+            overflow-y: auto;
+        }
+        #code-panel h3 {
+            color: #fff;
+            margin-bottom: 10px;
+            font-size: 13px;
+        }
+        #code-panel pre {
+            background: rgba(0,0,0,0.5);
+            padding: 10px;
+            border-radius: 5px;
+            overflow-x: auto;
+            color: #0f0;
+            line-height: 1.5;
+        }
+        #code-panel .comment { color: #888; }
+        #code-panel .keyword { color: #ff6b9d; }
+        #code-panel .string { color: #ffd700; }
+        #info {
+            position: absolute;
+            bottom: 30px; right: 30px;
+            color: #888;
+            font-size: 12px;
+            text-align: right;
+        }
+        .loader {
+            color: #00d4ff;
+        }
+    </style>
+</head>
+<body>
+    <div id="canvas-container"></div>
+    <div id="ui">
+        <div id="title">27 - Stanford 3D Models</div>
+        <div id="model-name">Stanford Bunny (Demo)</div>
+        
+        <div id="controls">
+            <div><strong>模型选择:</strong></div>
+            <button onclick="showModel('bunny')" class="active" id="btn-bunny">🐰 Bunny</button>
+            <button onclick="showModel('dragon')" id="btn-dragon">🐉 Dragon</button>
+            <button onclick="showModel('buddha')" id="btn-buddha">🧘 Buddha</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('points')" id="btn-points">点云模式</button>
+        </div>
+        
+        <div id="code-panel">
+            <h3>📦 PLY 加载代码示例</h3>
+            <pre><span class="comment">// 1. 引入 PLYLoader</span>
+<span class="keyword">import</span> { PLYLoader } <span class="keyword">from</span> <span class="string">'three/examples/jsm/loaders/PLYLoader'</span>;
+
+<span class="comment">// 2. 创建加载器</span>
+<span class="keyword">const</span> loader = <span class="keyword">new</span> PLYLoader();
+
+<span class="comment">// 3. 加载斯坦福兔子模型</span>
+loader.load(<span class="string">'stanford-bunny.ply'</span>, <span class="keyword">function</span>(geometry) {
+    
+    <span class="comment">// 计算法线（用于光照）</span>
+    geometry.computeVertexNormals();
+    
+    <span class="comment">// 居中模型</span>
+    geometry.center();
+    
+    <span class="comment">// 创建材质</span>
+    <span class="keyword">const</span> material = <span class="keyword">new</span> THREE.MeshNormalMaterial();
+    
+    <span class="comment">// 创建网格</span>
+    <span class="keyword">const</span> mesh = <span class="keyword">new</span> THREE.Mesh(geometry, material);
+    
+    <span class="comment">// 调整大小和位置</span>
+    mesh.scale.set(8, 8, 8);
+    mesh.position.y = -0.8;
+    
+    <span class="comment">// 添加到场景</span>
+    scene.add(mesh);
+});
+
+<span class="comment">// PLY 格式特点:</span>
+<span class="comment">// - 多边形文件格式 (Polygon File Format)</span>
+<span class="comment">// - 支持点云和网格</span>
+<span class="comment">// - 文本/二进制两种格式</span>
+<span class="comment">// - 包含顶点坐标 + 面片索引</span></pre>
+            
+            <h3 style="margin-top: 15px;">🔍 数据来源</h3>
+            <p style="color: #aaa; line-height: 1.6;">
+                <strong>Stanford 3D Scanning Repository</strong><br>
+                官网: graphics.stanford.edu/data/3Dscanrep/<br><br>
+                
+                经典模型:<br>
+                • <span style="color: #ffd700">Bunny</span> - 陶瓷兔子, 69,451 三角形<br>
+                • <span style="color: #ffd700">Dragon</span> - 龙雕像, 871,414 三角形<br>
+                • <span style="color: #ffd700">Buddha</span> - 佛像, 1,087,716 三角形<br>
+                • <span style="color: #ffd700">Lucy</span> - 天使像, 28,055,742 三角形<br><br>
+                
+                扫描设备: Cyberware 3030 MS 激光扫描仪
+            </p>
+        </div>
+        
+        <div id="info">
+            当前演示: 简化版 Stanford Bunny<br>
+            鼠标拖拽旋转 | 滚轮缩放 | 右键平移
+        </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>
+        // ========== 场景设置 ==========
+        const scene = new THREE.Scene();
+        scene.background = new THREE.Color(0x0a0a0a);
+        scene.fog = new THREE.Fog(0x0a0a0a, 5, 20);
+
+        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
+        camera.position.set(4, 3, 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.autoRotate = true;
+        controls.autoRotateSpeed = 0.8;
+
+        // 灯光
+        const ambientLight = new THREE.AmbientLight(0x404040, 0.4);
+        scene.add(ambientLight);
+
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+        directionalLight.position.set(5, 10, 7);
+        scene.add(directionalLight);
+
+        const pointLight = new THREE.PointLight(0x00d4ff, 0.5, 20);
+        pointLight.position.set(-3, 2, 3);
+        scene.add(pointLight);
+
+        // ========== 材质 ==========
+        function createMaterial(type) {
+            switch(type) {
+                case 'wireframe':
+                    return new THREE.MeshBasicMaterial({
+                        color: 0x00d4ff,
+                        wireframe: true,
+                        transparent: true,
+                        opacity: 0.6
+                    });
+                case 'points':
+                    return new THREE.PointsMaterial({
+                        color: 0xffd700,
+                        size: 0.05,
+                        transparent: true,
+                        opacity: 0.8
+                    });
+                case 'normal':
+                default:
+                    return new THREE.MeshNormalMaterial({
+                        flatShading: false
+                    });
+            }
+        }
+
+        // ========== 创建简化版 Bunny 几何体 ==========
+        function createBunnyGeometry() {
+            // 使用球体变形模拟兔子形状
+            const geometry = new THREE.SphereGeometry(1, 32, 32);
+            const positions = geometry.attributes.position.array;
+            
+            for (let i = 0; i < positions.length; i += 3) {
+                const x = positions[i];
+                const y = positions[i + 1];
+                const z = positions[i + 2];
+                
+                // 变形为兔子形状
+                let scaleX = 1, scaleY = 1, scaleZ = 1;
+                
+                // 身体（下半部分拉长）
+                if (y < 0) {
+                    scaleX = 0.8;
+                    scaleY = 0.7;
+                    scaleZ = 1.2;
+                }
+                // 头部（上半部分）
+                else {
+                    scaleX = 0.7;
+                    scaleY = 0.9;
+                    scaleZ = 0.8;
+                }
+                
+                // 添加耳朵（顶部突出）
+                if (y > 0.6 && Math.abs(x) < 0.4) {
+                    positions[i + 1] = y + 0.8;
+                }
+                
+                positions[i] = x * scaleX;
+                positions[i + 1] = y * scaleY - 0.3;
+                positions[i + 2] = z * scaleZ;
+            }
+            
+            geometry.computeVertexNormals();
+            return geometry;
+        }
+
+        // ========== 创建 Dragon 几何体 ==========
+        function createDragonGeometry() {
+            const geometry = new THREE.IcosahedronGeometry(1, 2);
+            const positions = geometry.attributes.position.array;
+            
+            // 添加噪声变形
+            for (let i = 0; i < positions.length; i += 3) {
+                const x = positions[i];
+                const y = positions[i + 1];
+                const z = positions[i + 2];
+                
+                const noise = Math.sin(x * 5) * Math.cos(y * 5) * Math.sin(z * 5) * 0.2;
+                const scale = 1 + noise;
+                
+                positions[i] = x * scale * 1.5;
+                positions[i + 1] = y * scale * 0.8;
+                positions[i + 2] = z * scale * 1.2;
+            }
+            
+            geometry.computeVertexNormals();
+            return geometry;
+        }
+
+        // ========== 创建 Buddha 几何体 ==========
+        function createBuddhaGeometry() {
+            const geometry = new THREE.CylinderGeometry(0.3, 1, 2, 16, 4);
+            const positions = geometry.attributes.position.array;
+            
+            for (let i = 0; i < positions.length; i += 3) {
+                const y = positions[i + 1];
+                // 身体形状调整
+                if (y > 0.5) {
+                    positions[i] *= 0.6;  // 头部缩小
+                } else if (y < -0.5) {
+                    positions[i] *= 0.8;  // 底座
+                } else {
+                    positions[i] *= 1.3;  // 身体加宽
+                }
+            }
+            
+            geometry.computeVertexNormals();
+            return geometry;
+        }
+
+        // ========== 模型管理 ==========
+        let currentMesh = null;
+        let currentMaterial = 'normal';
+
+        const geometries = {
+            bunny: createBunnyGeometry(),
+            dragon: createDragonGeometry(),
+            buddha: createBuddhaGeometry()
+        };
+
+        function showModel(name) {
+            // 更新按钮
+            document.querySelectorAll('#controls button').forEach(btn => {
+                if (btn.id.startsWith('btn-') && !btn.id.includes('normal') && !btn.id.includes('wireframe') && !btn.id.includes('points')) {
+                    btn.classList.remove('active');
+                }
+            });
+            document.getElementById(`btn-${name}`).classList.add('active');
+            
+            // 更新名称
+            const names = { bunny: 'Stanford Bunny', dragon: 'Stanford Dragon', buddha: 'Happy Buddha' };
+            document.getElementById('model-name').textContent = names[name];
+
+            // 移除旧模型
+            if (currentMesh) {
+                scene.remove(currentMesh);
+            }
+
+            // 创建新模型
+            const geometry = geometries[name];
+            const material = createMaterial(currentMaterial);
+            
+            if (currentMaterial === 'points') {
+                currentMesh = new THREE.Points(geometry, material);
+            } else {
+                currentMesh = new THREE.Mesh(geometry, material);
+            }
+            
+            // 调整大小
+            const scales = { bunny: 1.5, dragon: 1.3, buddha: 1.2 };
+            currentMesh.scale.set(scales[name], scales[name], scales[name]);
+            
+            scene.add(currentMesh);
+        }
+
+        function setMaterial(type) {
+            currentMaterial = type;
+            
+            // 更新按钮
+            ['normal', 'wireframe', 'points'].forEach(t => {
+                document.getElementById(`btn-${t}`).classList.add('active');
+            });
+            
+            // 重新加载当前模型
+            const activeModel = document.querySelector('#controls button.active[id^="btn-"]:not([id*="normal"]):not([id*="wireframe"]):not([id*="points"])');
+            const modelName = activeModel.id.replace('btn-', '');
+            showModel(modelName);
+        }
+
+        // ========== 地面网格 ==========
+        const gridHelper = new THREE.GridHelper(10, 20, 0x333333, 0x222222);
+        gridHelper.position.y = -1.5;
+        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);
+        }
+
+        // 初始化
+        showModel('bunny');
+        animate();
+    </script>
+</body>
+</html>