数字档案馆元宇宙应用本质是三维可视化档案管理系统，核心架构分为三个层次：数据层、服务层和表现层。
采用PostgreSQL 15作为主数据库，安装命令：
``` sudo apt update sudo apt install postgresql-15 ```创建档案数据库和用户：
``` sudo -u postgres psql CREATE DATABASE digital_archive; CREATE USER archive_admin WITH PASSWORD 'YourSecurePassword123'; GRANT ALL PRIVILEGES ON DATABASE digital_archive TO archive_admin; \q ```档案元数据表结构：
``` CREATE TABLE archive_metadata ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), title VARCHAR(500) NOT NULL, description TEXT, create_date DATE, archive_type VARCHAR(50), file_path VARCHAR(1000), metadata_json JSONB, spatial_position_x FLOAT, spatial_position_y FLOAT, spatial_position_z FLOAT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); ```后端采用Node.js + Express框架，前端使用Three.js进行3D渲染，通信使用WebSocket实时同步。
安装Node.js环境：
``` curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - sudo apt-get install -y nodejs node --version 验证安装，应显示v18.x.x ```创建项目目录并初始化：
``` mkdir archive-metaverse && cd archive-metaverse npm init -y npm install express three socket.io pg ```创建基础Three.js场景文件scene.js：
``` import as THREE from 'three'; export function createArchiveScene() { const scene = new THREE.Scene(); scene.background = new THREE.Color(0xf0f0f0); // 添加环境光 const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); // 添加定向光 const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(10, 20, 15); scene.add(directionalLight); // 创建档案展示墙 const wallGeometry = new THREE.BoxGeometry(50, 20, 0.5); const wallMaterial = new THREE.MeshPhongMaterial({ color: 0x8B7355 }); const archiveWall = new THREE.Mesh(wallGeometry, wallMaterial); archiveWall.position.set(0, 10, -10); scene.add(archiveWall); return scene; } ```创建档案文档的3D表示模型，在models/ArchiveDocument.js中：
``` export class ArchiveDocument { constructor(title, position, size = { width: 2, height: 3, depth: 0.1 }) { this.title = title; this.mesh = this.createMesh(size); this.mesh.position.copy(position); this.addLabel(title); } createMesh(size) { const geometry = new THREE.BoxGeometry(size.width, size.height, size.depth); const material = new THREE.MeshPhongMaterial({ color: 0xffffff, transparent: true, opacity: 0.9 }); return new THREE.Mesh(geometry, material); } addLabel(text) { const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = 256; canvas.height = 128; context.fillStyle = '333333'; context.font = '24px Arial'; context.textAlign = 'center'; context.fillText(text, 128, 64); const texture = new THREE.CanvasTexture(canvas); const labelMaterial = new THREE.SpriteMaterial({ map: texture }); const sprite = new THREE.Sprite(labelMaterial); sprite.scale.set(4, 2, 1); sprite.position.set(0, 2, 0.6); this.mesh.add(sprite); } } ```创建config/database.js配置文件：
``` const { Pool } = require('pg'); const pool = new Pool({ user: 'archive_admin', host: 'localhost', database: 'digital_archive', password: 'YourSecurePassword123', port: 5432, }); module.exports = { query: (text, params) => pool.query(text, params), }; ```
创建server.js实现数据实时同步：
``` const express = require('express'); const http = require('http'); const socketIo = require('socket.io'); const db = require('./config/database'); const app = express(); const server = http.createServer(app); const io = socketIo(server, { cors: { origin: "http://localhost:3000", methods: ["GET", "POST"] } }); // 档案数据获取接口 app.get('/api/archives', async (req, res) => { try { const result = await db.query( 'SELECT id, title, description, spatial_position_x, spatial_position_y, spatial_position_z FROM archive_metadata ORDER BY create_date DESC' ); res.json(result.rows); } catch (err) { res.status(500).json({ error: err.message }); } }); // WebSocket连接处理 io.on('connection', (socket) => { console.log('客户端连接成功'); // 档案位置更新 socket.on('update_position', async (data) => { try { await db.query( 'UPDATE archive_metadata SET spatial_position_x = $1, spatial_position_y = $2, spatial_position_z = $3 WHERE id = $4', [data.x, data.y, data.z, data.id] ); // 广播给其他用户 socket.broadcast.emit('position_updated', data); } catch (err) { socket.emit('error', err.message); } }); // 新档案添加 socket.on('add_archive', async (data) => { try { const result = await db.query( 'INSERT INTO archive_metadata (title, description, archive_type, spatial_position_x, spatial_position_y, spatial_position_z) VALUES ($1, $2, $3, $4, $5, $6) RETURNING id', [data.title, data.description, data.type, data.x, data.y, data.z] ); const newArchive = { ...data, id: result.rows[0].id }; io.emit('archive_added', newArchive); } catch (err) { socket.emit('error', err.message); } }); }); server.listen(3001, () => { console.log('服务器运行在 http://localhost:3001'); }); ```实现鼠标点击选择档案功能，在interaction/ArchivePicker.js中：
``` import as THREE from 'three'; export class ArchivePicker { constructor(camera, scene) { this.camera = camera; this.scene = scene; this.raycaster = new THREE.Raycaster(); this.mouse = new THREE.Vector2(); this.selectedArchive = null; document.addEventListener('click', this.onDocumentClick.bind(this)); } onDocumentClick(event) { // 计算鼠标在归一化设备坐标中的位置 this.mouse.x = (event.clientX / window.innerWidth) 2 - 1; this.mouse.y = -(event.clientY / window.innerHeight) 2 + 1; // 更新射线 this.raycaster.setFromCamera(this.mouse, this.camera); // 计算与射线相交的物体 const archives = this.getArchiveMeshes(); const intersects = this.raycaster.intersectObjects(archives); if (intersects.length > 0) { const selected = intersects[0].object; this.showArchiveDetails(selected.userData.archiveInfo); } } getArchiveMeshes() { const archives = []; this.scene.traverse((object) => { if (object.userData && object.userData.isArchive) { archives.push(object); } }); return archives; } showArchiveDetails(archiveInfo) { // 创建详情弹窗 const modal = document.createElement('div'); modal.style.cssText = ` position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); z-index: 1000; min-width: 300px; `; modal.innerHTML = `${archiveInfo.description || '暂无描述'}
创建时间: ${archiveInfo.create_date}
`; document.body.appendChild(modal); } } ```实现第一人称视角导航，在controls/FirstPersonControls.js中：
``` export class FirstPersonControls { constructor(camera, domElement) { this.camera = camera; this.domElement = domElement; this.moveSpeed = 5.0; this.lookSpeed = 0.002; this.moveState = { forward: 0, back: 0, left: 0, right: 0 }; this.mouseX = 0; this.mouseY = 0; this.bindEvents(); this.lockPointer(); } lockPointer() { this.domElement.requestPointerLock = this.domElement.requestPointerLock || this.domElement.mozRequestPointerLock; this.domElement.requestPointerLock(); } bindEvents() { // 键盘控制移动 document.addEventListener('keydown', (event) => { switch(event.code) { case 'KeyW': this.moveState.forward = 1; break; case 'KeyS': this.moveState.back = 1; break; case 'KeyA': this.moveState.left = 1; break; case 'KeyD': this.moveState.right = 1; break; } }); document.addEventListener('keyup', (event) => { switch(event.code) { case 'KeyW': this.moveState.forward = 0; break; case 'KeyS': this.moveState.back = 0; break; case 'KeyA': this.moveState.left = 0; break; case 'KeyD': this.moveState.right = 0; break; } }); // 鼠标控制视角 document.addEventListener('mousemove', (event) => { if (document.pointerLockElement === this.domElement) { this.mouseX += event.movementX this.lookSpeed; this.mouseY += event.movementY this.lookSpeed; this.mouseY = Math.max(-Math.PI/2, Math.min(Math.PI/2, this.mouseY)); } }); } update(deltaTime) { // 更新相机旋转 this.camera.rotation.x = -this.mouseY; this.camera.rotation.y = -this.mouseX; // 计算移动向量 const forwardVector = new THREE.Vector3(0, 0, -1); const rightVector = new THREE.Vector3(1, 0, 0); forwardVector.applyEuler(this.camera.rotation); rightVector.applyEuler(this.camera.rotation); // 应用移动 const moveDistance = this.moveSpeed deltaTime; if (this.moveState.forward) { this.camera.position.add(forwardVector.clone().multiplyScalar(moveDistance)); } if (this.moveState.back) { this.camera.position.add(forwardVector.clone().multiplyScalar(-moveDistance)); } if (this.moveState.left) { this.camera.position.add(rightVector.clone().multiplyScalar(-moveDistance)); } if (this.moveState.right) { this.camera.position.add(rightVector.clone().multiplyScalar(moveDistance)); } } } ```创建Nginx配置文件/etc/nginx/sites-available/archive-metaverse：
``` server { listen 80; server_name your-domain.com; location / { root /var/www/archive-metaverse/dist; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://localhost:3001; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } location /socket.io/ { proxy_pass http://localhost:3001; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "Upgrade"; proxy_set_header Host $host; } } ```启用站点配置：
``` sudo ln -s /etc/nginx/sites-available/archive-metaverse /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl reload nginx ```创建webpack生产配置webpack.prod.js：
``` const TerserPlugin = require('terser-webpack-plugin'); const CompressionPlugin = require('compression-webpack-plugin'); module.exports = { mode: 'production', optimization: { minimize: true, minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: true, }, }, })], splitChunks: { chunks: 'all', cacheGroups: { threejs: { test: /[\\/]node_modules[\\/]three[\\/]/, name: 'threejs', chunks: 'all', }, }, }, }, plugins: [ new CompressionPlugin({ algorithm: 'gzip', test: /\.(js|css|html|svg)$/, threshold: 10240, minRatio: 0.8, }), ], }; ```执行以下SQL创建性能优化索引：
``` -- 空间位置查询索引 CREATE INDEX idx_archive_spatial ON archive_metadata USING gist (point(spatial_position_x, spatial_position_y)); -- 时间范围查询索引 CREATE INDEX idx_archive_date ON archive_metadata (create_date DESC); -- 全文搜索索引 CREATE INDEX idx_archive_search ON archive_metadata USING gin(to_tsvector('english', title || ' ' || description)); ```启动完整系统：
``` 启动数据库 sudo systemctl start postgresql 启动后端服务 cd archive-metaverse node server.js 构建前端 npm run build 前端服务运行在 http://localhost:3000 后端API运行在 http://localhost:3001 ```
微信咨询
电话联系
QQ客服
微信咨询一对一服务