崖城风骨 · 一座千年古城的数字化重生

// js/spirit.js - 环形可视化核心逻辑 
const dimensionData = { 
shape: { 
name: '形', 
title: '古城格局', 
subtitle: '空间载体', 
color: '#8B4513', 
description: '古城独特的城池格局、街巷肌理、空间布局，是崖州文化最直观的物质载体。', 
features: ['城池形制', '街巷肌理', '空间布局'] 
}, 
tech: { 
name: '技', 
title: '营造技艺', 
subtitle: '匠心智慧', 
color: '#D2691E', 
description: '传统营造技艺、材料工艺、装饰美学，是古人因地制宜、顺势而为的建造智慧。', 
features: ['榫卯工艺', '雕刻技法', '建筑智慧'] 
}, 
people: { 
name: '人', 
title: '历史人物', 
subtitle: '人文底蕴', 
color: '#CD853F', 
description: '历代名臣谪贤、本土先民、商旅百姓在崖州生活耕耘、兴教兴城。', 
features: ['名臣谪贤', '本土先民', '商旅百姓'] 
}, 
soul: { 
name: '魂', 
title: '崖城之魂', 
subtitle: '精神内核', 
color: '#C9A961', 
description: '形、技、人三者共同凝练崖城精神内核。' 
} 
}; 
// 状态管理 
const State = { 
activeDimensions: new Set(), 

activateDimension(dim) { 
this.activeDimensions.add(dim); 
this.updateUI(); 

const beam = document.querySelector(`.energy-beam.beam-${dim}`); 
if (beam) { 
beam.classList.add('active'); 
this.createBeamParticles(dim); 
} 

this.checkCompletion(); 
}, 

checkCompletion() { 
if (this.activeDimensions.size === 3) { 
document.querySelector('.center-soul').classList.add('glowing'); 
} 
} 
}; 

// js/model-viewer.js - Three.js模型查看器 
class ModelViewer { 
constructor() { 
this.container = document.getElementById('model-viewer'); 
this.scene = null; 
this.camera = null; 
this.renderer = null; 
this.controls = null; 
this.init(); 
} 

init() { 
// 场景 
this.scene = new THREE.Scene(); 

// 相机 
this.camera = new THREE.PerspectiveCamera( 
45, 
this.container.clientWidth / this.container.clientHeight, 
0.1, 
1000 
); 
this.camera.position.set(4, 3.2, 4); 

// 渲染器 
this.renderer = new THREE.WebGLRenderer({ 
antialias: true, 
alpha: true 
}); 
this.renderer.setSize(this.container.clientWidth, this.container.clientHeight); 
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); 
this.renderer.shadowMap.enabled = true; 
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; 

// 控制器 
this.controls = new OrbitControls(this.camera, this.renderer.domElement); 
this.controls.enableDamping = true; 
this.controls.dampingFactor = 0.05; 
this.controls.autoRotate = true; 

// 灯光系统 
this.setupLights(); 

// 加载模型 
this.loadModel(); 
} 

setupLights() { 
// 环境光 
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4); 
this.scene.add(ambientLight); 

// 主光源 
const mainLight = new THREE.DirectionalLight(0xfff8f0, 1.2); 
mainLight.position.set(5, 10, 5); 
mainLight.castShadow = true; 
this.scene.add(mainLight); 

// 补光 + 轮廓光 
// ... 
} 
} 

// api-server.js - AI服务端实现 
const SYSTEM_PROMPT = `你是"崖城智查"，崖州古城建筑文化数字图鉴的智能助手。 

【背景知识】 
崖州古城位于海南省三亚市崖州区，是海南岛历史最悠久的古城之一： 
- 始建于南北朝时期，历经隋、唐、宋、元、明、清六个朝代 
- 明代洪武十七年(1384年)扩建为千户所城，形成"城中有城"的防御体系 
- 城墙周长约2.5公里，设有东、南、西、北四个城门 

【你的职责】 
1. 回答用户关于崖州古城历史、建筑、文化、人物的问题 
2. 提供专业、准确、有深度的历史文化解答 
3. 用中文回答，语言风格典雅庄重`; 

async function callDeepseekAPI(messages) { 
const apiUrl = new URL('/v1/chat/completions', DEEPSEEK_BASE_URL); 

const postData = JSON.stringify({ 
model: 'deepseek-chat', 
messages: messages, 
temperature: 0.7, 
max_tokens: 800, 
stream: false 
}); 

const options = { 
hostname: apiUrl.hostname, 
port: apiUrl.port || 443, 
path: apiUrl.pathname, 
method: 'POST', 
headers: { 
'Content-Type': 'application/json', 
'Authorization': `Bearer ${DEEPSEEK_API_KEY}` 
} 
}; 

// HTTPS请求处理 
// ... 
} 

// js/people-interactions.js - 关系图谱实现 
const RelationGraph = { 
canvas: null, 
ctx: null, 
nodes: [], 
edges: [], 

nodeData: [ 
{ id: 'hanyuan', name: '韩瑗', era: '唐', x: 0.2, y: 0.3, color: '#8B4513', size: 28 }, 
{ id: 'luduoxun', name: '卢多逊', era: '宋', x: 0.55, y: 0.25, color: '#D2691E', size: 28 }, 
{ id: 'zhaoding', name: '赵鼎', era: '宋', x: 0.7, y: 0.4, color: '#D2691E', size: 28 }, 
// ... 更多节点 
], 

edgeData: [ 
{ from: 'hanyuan', to: 'cuiyuanzong', label: '同为唐相贬崖州', strength: 0.8 }, 
{ from: 'luduoxun', to: 'zhaoding', label: '水南村文脉', strength: 0.8 }, 
// ... 更多边 
], 

animate() { 
this.animationId = requestAnimationFrame(() => this.animate()); 

// 物理模拟：节点相互排斥、边有引力 
this.nodes.forEach(node => { 
// 计算受力 
// ... 

// 更新位置 
node.px += node.vx; 
node.py += node.vy; 
}); 

// 绘制 
this.render(); 
}, 

render() { 
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); 

// 绘制边 
this.edges.forEach(edge => { 
this.ctx.beginPath(); 
this.ctx.moveTo(edge.fromNode.px, edge.fromNode.py); 
this.ctx.lineTo(edge.toNode.px, edge.toNode.py); 
this.ctx.strokeStyle = 'rgba(139, 69, 19, 0.3)'; 
this.ctx.stroke(); 
}); 

// 绘制节点 
this.nodes.forEach(node => { 
this.ctx.beginPath(); 
this.ctx.arc(node.px, node.py, node.size, 0, Math.PI * 2); 
this.ctx.fillStyle = node.color; 
this.ctx.fill(); 

// 绘制文字 
this.ctx.fillStyle = '#fff'; 
this.ctx.font = '14px Noto Sans SC'; 
this.ctx.textAlign = 'center'; 
this.ctx.fillText(node.name, node.px, node.py + 4); 
}); 
} 
};