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