Ubuntu
399 lines
15 KiB
HTML
399 lines
15 KiB
HTML
<!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>
|