主页/项目集/Threejs+React古建筑三维拆解
Threejs+React古建筑三维拆解新项目ZYBK Pro 打开预览

项目简介

基于 React + Three.js(R3F)的中国古建筑互动科普站,以清承德普陀宗乘之庙主殿「万法归一殿」为原型,支持整体浏览、构件讲解与五层爆炸拆解。

殿宇为汉藏交融的木构金顶建筑:重檐攒尖、鎏金屋面,可对照台基、殿身、腰檐、斗拱、屋面自下而上的营造层次,边拆边学。适用于文博科普、教学演示,以及爆炸视图、构件高亮等 Three.js 互动参考。

功能清单

  • 整体浏览:拖拽旋转、滚轮缩放,自由查看殿宇外观与空间层次
  • 五层爆炸拆解:滑杆控制爆炸程度;台基 → 殿身 → 腰檐 → 斗拱 → 屋面径向散开,并可收拢为平面构件清单
  • 快捷视图:复位 / 分离 / 清单一键切换拆解状态
  • 构件点选科普:左侧模块或直接点击 3D 模型,阅读台基、柱网、门框、墙体、斗栱、梁架、屋面等营造知识
  • 图文导览:右侧配套构件导览图,对照模型理解结构与装饰
  • 殿宇介绍面板:时代背景、建筑形制与历史典故(如乾隆接见土尔扈特部)
  • 场景 keep-alive:整体页与拆解页切换时 WebGL 画布常驻,切换更流畅
  • 轻量模型:GLB 经 Draco / WebP / 减面压缩,便于 Web 端加载

项目截图