人工智能程序设计 课件 第8章 基于3D高斯泼溅的三维重建系统

ROBOTICS&AUTONOMOUSSYSTEMS基于3D高斯泼溅的三维重建系统3DGaussianSplatting理论与实践3DGS&Reconstruction目录CONTENTS

01

02

03

04系统架构与结构设计传统三维重建基础与几何推导3DGS算法与底层原理Flask后端路由与前端交互Python重塑现实——三维重建技术的应用

05实践结果与总结课程介绍近五年承担的国家级重大重点项目情况系统架构与结构设计

01（一）系统功能设计系统建设目标实现基于3DGaussianSplatting技术的高效三维建图系统。实现网页端（Web）高精度重建与交互。采用前后端分离架构，实现低延迟跨终端展示。标准PLY文件展示多视角图片云端重建直接读取标准PLY格式文件。前端高效解析点坐标、颜色、法向量。浏览器内高性能渲染与交互展示。无需插件，跨终端查看。批量上传物体图片后端进行3DGS建重建生成的全新高精度模型传回前端渲染Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况系统架构与结构设计

01（二）系统架构设计一、前后端分离架构的核心优势1.开发解耦与独立部署2.跨平台兼容与扩展性3.现代Web生态对接前端专注用户体验与交互设计。后端专注业务逻辑与重建算法核心后端API服务支持多种客户端。Web客户端适配主流浏览器。利用成熟的前端框架与UI库。整合WebGL和Three.js资源成熟且平台兼容的Web标准。提供丰富的UI交互控制。异步请求与进度展示。功能强大的WebGL3D渲染库。轻松处理PLY点云数据。提供相机控制、场景交互与动画。轻量级且强大的微型网络框架。专注于API设计与数据分发。轻松对接底层Python重建算法。前端Web渲染Flask后端二、系统选型方案与考量Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况系统架构与结构设计

01一、用户交互层二、服务处理层三、可视化展示层数据流渲染流提供用户操作界面（WebUI）批量图片上传与PLY

文件读取入口控制参数设置（如Alpha阈值、SH

级别）异步进度反馈展示Flask后端核心逻辑与RESTfulAPI

服务处理文件上传请求（/upload）触发底层

3DGS

算法重建（/synthesize）动态进度监控(/progress)与模型下发(/render）利用

Three.js

框架进行

3D渲染加载并通过

GPU

展示

PLY点云数据相机交互控制（旋转、缩放、移动）动态调整材质与渲染效果Python重塑现实——三维重建技术的应用（二）系统架构设计课程介绍近五年承担的国家级重大重点项目情况系统架构与结构设计

01一、用户交互层二、服务处理层前端后端前端职责后端职责API调用用户操作界面

(WebUI)批量图片上传与

PLY

读取入口控制参数设置与交互Three.js模型渲染环境初始化FlaskRESTfulAPI服务文件存储管理

(/upload)触发3DGS算法重建

(/synthesize)动态进度监控与模型下发数据获取、参数控制、模型加载展示文件存储、算法调度、状态监控、数据下发数据交换边界

Python重塑现实——三维重建技术的应用（二）系统架构设计课程介绍近五年承担的国家级重大重点项目情况系统架构与结构设计

01输入与交互层

路由层（APICall）算法处理与渲染层A.PLY数据直读用户选择本地PLY文件前端Three.js直接解析B.图片序列上传用户选择多张场景照片异步Fetch请求提交A.PLY数据直读PLY数据下发1.Flask‘/upload’接收与保存2.Flask‘/synthesize‘

触发重建3.Flask‘/render‘点云分发3DGaussianSplatting

重建核心SfM初始化损失函数计算Adam优化迭代4.Three.js三维场景展示(WebGL)Python重塑现实——三维重建技术的应用（二）系统架构设计课程介绍近五年承担的国家级重大重点项目情况（一）三维重建应用传统三维重建基础与几何推导

021)室内服务

3)AR世界2)自动驾驶4)农林采摘Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况（二）相机投影模型从二维图像（像素）到三维世界（空间）的桥梁（1）系统需要通过多视角图像求解相机的六自由度位姿（2）只有把二维像素点转换成三维空间点，才能构建出真实环境地图。

综上所述，机器人需要根据二维观测图像还原成三维点云以计算位姿、构建地图，具体投影原理如右图所示。三维点云（世界坐标系）相机内参相似三角形二维像素（像素坐标系）重要参数意义：相机坐标系下的三维空间点P(Xc,Yc,Zc)像素坐标系下的二维成像点p(u,v)传统三维重建基础与几何推导

02Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

02（二）相机投影模型相机投影公式即核心参数详细拆解世界坐标系下的齐次坐标相机内参矩阵像素坐标系下的齐次坐标传统三维重建基础与几何推导Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

02（三）特征提取什么是特征点？定义：特征点是图像中一些具有代表性、不易受光照/视角变化影响的像素点（如角点、边缘点、明暗交界点）。组成部分：一个完整的特征点由两部分组成：关键点：该点在图像中的二维位置坐标(u,v)描述子：一个数学向量，用来描述这个点周围像素的特征算法名称特征点类型计算速度旋转/尺度不变性SIFT传统经典慢(极耗CPU)极强(高精度)SURFSIFT加速版中等较强ORBSLAM首选极快(实时性好)具有旋转不变性，无尺度不变性传统三维重建基础与几何推导Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

02（四）ORB特征提取ORB=OrientedFAST

+RotatedBRIEF1.关键点检测1.1尺度空间与金字塔检测1.2Fast角点检测优化FAST检测level2level1level0图像金字塔解决尺度问题快速过滤检查十字方向FAST角点集合1.3计算强度形心方向强度形心方向矢量有方向的关键点质心2.特征描述2.1基本BRIEF描述子比较点对256位二进制描述子2.2RotatedBRIEF旋转修正对象匹配与识别根据θ旋转点对H(d1,d2)=2位不同将二进制测试旋转θ角2.3贪婪学习优化选择不相关和高方差的测试对输出特征点和描述子传统三维重建基础与几何推导Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

02（五）特征匹配什么是特征匹配？特征匹配旨在将检测到的特征从一张图像匹配到另一张图像，比较不同图像中的关键属性以找到相似之处。核心算法：汉明距离技术特点：针对ORB

二进制描述子，利用异或位运算统计不同位数。距离量度快速最近邻(FLANN)：

构建高维空间的

KD树进行近似最近邻搜索。大幅提升海量特征点下的匹配效率。搜索策略比例测试：计算最佳匹配与次佳匹配的距离比值。若在阈值内则保留，从而有效剔除因纹理重复导致的模糊错配。结果筛选传统三维重建基础与几何推导Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

02（六）三角测量传统三维重建基础与几何推导几何关系示意图三角测量原理计算过程示意相机1C1(R1,t1)相机2C2(R2,t2)p1(u1,v1)p2(u2,v2)zf1f2(1)深度Z的计算根据相似三角形关系：其中：f:相机焦距B:基线长度d:视差，d=|u1-u2|B(2)三维坐标计算设主点坐标为(cx,cy),焦距为f①特征匹配②视差计算③深度计算④三维点求解Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

02（七）重投影误差传统三维重建基础与几何推导重投影误差是指：三维点通过相机投影后在图像平面上的预测位置与实际观测位置之间的像素距离。P(X,Y,Z)p1.obsp1.pjojp2.pjojp2.obse1e2重投影误差设三维点P投影到第i个相机平面上：​·pobs：实际观测到的图像点·ppjoj：计算得到的投影点​总重投影误差：N：三维点的数量Mj:第j个三维点在图像中

的观测次数误差可视化①观测点pobs②投影点pproj③误差epobs：观测点pproj：

投影点ei:重投影误差向量Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

02（八）BundleAjustment优化传统三维重建基础与几何推导BundleAdjustment(束调整)示意图BundleAdjustment是一种非线性优化方法，用于同时优化相机参数（内参、外参）和三维点位置，使得所有观测的重投影误差最小。图例相机位置三维点实际观测点重投影点重投影误差观测射线优化前优化后c1c1相机参数和三维点位置存在误差重投影点(×)与实际观测点(●)偏差较大整体重投影误差较大同时优化相机参数和三维点位置重投影点与实际观测点几乎重合整体重投影误差最小优化目标变量优化方法效果Ri,ti:第i个相机的旋转,平移Xj:第j个三维点的空间坐标通常使用非线性最小二乘法求解。提高三维重建精度减小累积误差Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

033DGS算法与底层原理（一）三维高斯泼溅(3DGaussianSplatting)从传统孤立无色点到连续各向异性高斯分布一、传统：SfM稀疏点云二、飞跃：各向异性高斯球仅存储几何位置

(XYZ)缺乏外观纹理信息离散点之间无平滑连接渲染：简单的几何

Points

材质存储位置、协方差、不透明度、颜色协方差描述各向异性形状拉伸与旋转球谐函数描述视角外观信息渲染：通过可微光栅化实现连续、高保真渲染Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

033DGS算法与底层原理（二）高斯表示-3D高斯表示参数详情(一)均值μ(Mean)参数说明：3D中心位置意义：定义高斯函数在空间中的核心位置(二)协方差Σ(Covariance-椭球体形状)参数说明：椭球体的三个半径与旋转意义：定义高斯函数的空间分布范围和形状(三)不透明度α(Opacity)参数说明：范围∈[0,1]的标量意义：定义高斯函数的光学透明度(四)球谐函数SH(SphericalHarmonics)参数说明：SH系数矩阵意义：用于随视角变化而改变颜色表现，支持视点相关效果Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

033DGS算法与底层原理（二）高斯表示一、位置均值μ二、形状与旋转：协方差矩阵XZY定义高斯球在空间中的中心位置μ=(x,y,z)旋转矩阵缩放矩阵Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

033DGS算法与底层原理（二）高斯表示一、位置：均值μ二、形状与旋转：协方差矩阵一、颜色：球谐函数SH二、不透明度：α数学公式拟合视角相关的外观特征控制高斯分布在渲染时的混合比例。在可微光栅化时，高α值代表不透明物体，低α值代表透明部分或空气点，用于精细处理物体边缘。Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

033DGS算法与底层原理（三）高斯参数代码PythonPython重塑现实——三维重建技术的应用classGaussianModel:def__init__(self,sh_degree,optimizer_type="default"):self.active_sh_degree=0self.max_sh_degree=sh_degreeself._xyz=torch.empty(0)#1.位置：均值μ(XYZ坐标张量)self._features_dc=torch.empty(0)self._features_rest=torch.empty(0)#2.颜色：SH首阶及高阶系数(视角相关色)self._scaling=torch.empty(0)#3.协方差分量：缩放矩阵S(对数尺度)self._rotation=torch.empty(0)#3.协方差分量：旋转矩阵R(四元数)self._opacity=torch.empty(0)#4.不透明度：Alpha(α属性张量)课程介绍近五年承担的国家级重大重点项目情况

033DGS算法与底层原理（四）从图像序列到三维点云过程A:特征提取与匹配批量读取不同视角的二维照片。包含初步深度信息概念。提取稳定几何特征点（Keypoints）暴力匹配或FLANN匹配器。恢复物体的初始3D

几何结构。数据作为3DGS训练输入。输入:多视角图像序列过程B:三角测量输出:3D稀疏点云最小化重投影误差

对极平面约束与三角测量计算Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

033DGS算法与底层原理（五）代码剖析：COLMAP3D点云属性一、位置：均值μ二、形状与旋转：协方差矩阵Python若干图片3D点云ColmapPython重塑现实——三维重建技术的应用defread_points3D_binary(path_to_model_file):withopen(path_to_model_file,"rb")asfid:

num_points=read_next_bytes(fid,8,"Q")[0]

xyzs=np.empty((num_points,3))rgbs=np.empty((num_points,3))errors=np.empty((num_points,1))forp_idinrange(num_points):binary_point_line_properties=read_next_bytes(fid,num_bytes=43,format_char_sequence="QdddBBBd")xyzs[p_id]=np.array(binary_point_line_properties[1:4])rgbs[p_id]=np.array(binary_point_line_properties[4:7])errors[p_id]=np.array(binary_point_line_properties[7])returnxyzs,rgbs,errors课程介绍近五年承担的国家级重大重点项目情况

033DGS算法与底层原理（六）代码剖析：三维高斯模型的属性初始化一、位置：均值μPython点云形式三维高斯分布Python重塑现实——三维重建技术的应用defcreate_from_pcd(self,pcd:BasicPointCloud,spatial_lr_scale:float):self.spatial_lr_scale=spatial_lr_scalefused_point_cloud=to_tensor_and_cuda(pcd.points)fused_color=RGB2SH(to_tensor_and_cuda(pcd.colors))features=allocate_empty_sh_feature_matrix(num_points=len(pcd.points))features[:,:3,0]=fused_color#确立高斯表示的基础颜色features[:,3:,1:]=0.0#高阶残差系数（视角相关色）初始置零

dist2=compute_nearest_neighbor_squared_distance(pcd.points)scales=torch.log(torch.sqrt(dist2))

rots=allocate_empty_quaternion_matrix(num_points)rots[:,0]=1opacities=self.inverse_opacity_activation(0.1)课程介绍近五年承担的国家级重大重点项目情况

033DGS算法与底层原理（七）Splatting渲染一、位置：均值μ3D高斯投影图像平面1.3D高斯表示2.投影到图像平面3.Splatting(渲染)4.得到图像场景由一组3D高斯Gi表示:数学形式为：位置投影协方差投影按高斯分布splat到像素上，并按深度进行alpha混合计算完成，得到最终图像Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

033DGS算法与底层原理（八）前向投影与反向传播一、位置：均值μ二、形状与旋转：协方差矩阵前向渲染loss真值

通过前向渲染过程，将这些三维高斯椭球体投影至二维图像平面。渲染出的图像将与真实值（GroundTruth）进行比较，计算重投影误差（Loss）。利用该误差，系统可以通过可微渲染的反向传播机制对高斯球的各项数学属性进行迭代优化。优化后的参数将实时传回高斯表示层，从而在不断循环中实现更稠密、更精确、视角相关的连续高斯点云重建和高保真渲染Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

033DGS算法与底层原理（九）代码剖析：核心训练循环与损失函数一、位置：均值μ二、形状与旋转：协方差矩阵Python相机投影与前向渲染2D渲染视图误差Loss计算2D渲染视图真实观测Python重塑现实——三维重建技术的应用while

训练循环:#1.前向渲染(ForwardRendering)

渲染图像=render(相机,

高斯模型)#2.获取真实值图像(GroundTruth)

真实图像=加载真实图像(相机_ID)#3.计算重投影误差(CompositeLoss)#L1像素损失与SSIM结构相似度加权

L11=计算L11损失(渲染图像,

真实图像)loss=(1.0-lambda_dssim)*L11+lambda_dssim*(1.0-ssim(渲染图像,

真实图像))#4.反向传播(BackwardPass)

loss.backward()#5.修改高斯分布参数(ParameterStep)#根据梯度动态修改属性高斯模型.optimizer.step()#6.梯度清零高斯模型.optimizer.zero_grad()课程介绍近五年承担的国家级重大重点项目情况

033DGS算法与底层原理（十）高斯点云自适应控制与致密化重建不足重建过度克隆分裂...优化继续Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

033DGS算法与底层原理增密流程初始化高斯稀疏高斯集合与真实图像对比计算误差渲染并计算误差选择增密区域误差较高区域被选中执行增密操作分裂或克隆高斯增密后高斯集合高斯数量增加表达能力提升Python重塑现实——三维重建技术的应用（十）高斯点云自适应控制与致密化课程介绍近五年承担的国家级重大重点项目情况

033DGS算法与底层原理增密策略增密效果基于误差的增密分裂(Split)克隆(Clone)筛选(Prune)高斯数量低高Python重塑现实——三维重建技术的应用（十）高斯点云自适应控制与致密化课程介绍近五年承担的国家级重大重点项目情况

033DGS算法与底层原理（十一）3DGS算法总结一、位置：均值μ二、形状与旋转：协方差矩阵位姿Colmap点云可微渲染模块世界坐标系相机坐标系像平面投影初始化可学习高斯参数中心点位置xyz球谐函数feature_dc,feature_rest尺度scaling旋转位移rotation/trans不透明度opacity可微光栅化自适应点云控制优化图像损失优化Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

04Flask后端路由与前端交互（一）Flask框架简介Flask框架介绍基于Python的微框架轻量级和模块化快速开发与扩展性核心：Werkzeug，Jinja2扩展：数据库,身份验证核心代码极简，注重核心功能迅速构建原型，按需添加适用于从简单到复杂的大型应用Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

04Flask后端路由与前端交互1.装饰器路由机制2.最小可行性应用代码范例客户端响应处理函数URL@app.route(‘/装饰器’)处理函数装饰器将URL路径绑定到Python函数。使用@app.route()装饰视图函数。框架处理URL匹配和请求分发。fromflaskimportFlaskapp=Flask(__name__)@app.route(‘/’)defhello_world():return‘HelloFlask’if__name__==‘__main__’:app.run()导入Flask类创建Flask实例定义主页路由启动应用服务Python重塑现实——三维重建技术的应用（一）Flask框架简介课程介绍近五年承担的国家级重大重点项目情况

04Flask后端路由与前端交互前端交互层Flask后端逻辑层算法处理层REST交互方式（基于RESTful）Three.js前端页面Flask框架（1）路由管理定义文件上传路由定义三维模型数据API接口（2）数据处理接收上传文件调用3DGS算法进行三维重建（3）前后端交互3DGaussianSplatting算法返回处理结果更高模块化程度调用算法结果Flask在本系统中的应用Python重塑现实——三维重建技术的应用（一）Flask框架简介课程介绍近五年承担的国家级重大重点项目情况

04Flask后端路由与前端交互（二）Three.js简介Three.js介绍Three.js是一个基于WebGL的JavaScript3D引擎，封装了底层WebGL接口，提供了场景管理、相机控制、几何体创建、材质渲染、光照、动画和交互等功能，帮助开发者快速构建跨平台的3D应用。Three.js架构渲染流程Three.Scene(场景)Camera(相机)Light(光源)Object3D(对象)Renderer(渲染器)MeshLinePoints创建场景Scene添加对象设置相机渲染输出画面示例代码渲染结果Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

04Flask后端路由与前端交互（二）Three.js简介主要特性与WebGL关系丰富的3D对象强大的相机控制光照与材质系统交互与动画跨平台与高性能提供多种几何体、材质、纹理和工具，支持自定义扩展支持透视相机、正交相机、飞行控制器等多种交互方式内置多种光源类型和材质效果，支持PBR和自定义着色器支持鼠标键盘等交互，内置动画系统和运行时更新机制基于WebGL，可在浏览器中高效运行应用层使用Three.js进行开发Three.js引擎层封装WebGLAPI，提供接口WebGLAPI与GPU通信GPU图形渲染与计算Three.js的优势简化WebGL开发跨浏览器兼容性好丰富的社区插件生态快速构建复杂3D场景应用场景Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

04Flask后端路由与前端交互（三）WebGL简介12浏览器WebGLAPI3D

图形WebGL简介WebGL核心特点WebGL（WebGraphicsLibrary）是一种基于JavaScript的Web图形编程接口，允许开发者直接调用GPU硬件加速能力，在浏览器中实现高性能的二维和三维图形渲染。WebGL基于OpenGLES标准，无需安装插件即可运行于现代浏览器。跨平台硬件加速无插件运行实时交互支持主流浏览器ChromeEdgeFirefox利用GPU实时渲染高帧率低延迟基于HTML5标准直接在浏览器执行旋转、平移缩放、动画Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

04Flask后端路由与前端交互34WebGL框架图WebGL在本系统作用PLY点云或模型Three.jsWebGLGPU渲染浏览器显示Python重塑现实——三维重建技术的应用（三）WebGL简介课程介绍近五年承担的国家级重大重点项目情况

04Flask后端路由与前端交互一、位置：均值μ二、形状与旋转：协方差矩阵（四）后端路由设计路由方法描述/uploadPOST接收用户图片文件，将文件存储并启动后端预处理图像/progressGET用于获取图像处理任务的进度信息/synthesizePOST接受指令，将图片做3DGS三维重建/renderGET向前端提供点云数据，供Three.js渲染Python重塑现实——三维重建技术的应用课程介绍近五年承担的国家级重大重点项目情况

04Flask后端路由与前端交互（五）数据规范定义Python重塑现实——三维重建技术的应用输入：图片文件组织形式（1）相机参数数据数据采集：多视图图片序列组织与媒介工程交互媒介定义核心媒介1：多视图图片文件序列存储位置:/input/...关联信息:相机内参...核心媒介2：PLY点云文件组织属性：X,Y,Z,R,G,B文件格式：二进制/文本输入：结构化点云数据课程介绍近五年承担的国家级重大重点项目情况

04Flask后端路由与前端交互（六）前端文件异步上传Python重塑现实——三维重建技术的应用1.前端文件选择交互2.基于FetchAPI的异步POST上传选择PLY点云/图片文件等待上传文件列表-input.ply-frame_0001.jpg-xxx(1)用户点击：触发文件选择器(2)选择PLY/图片：支持多文件选择(3)获取文件引用：在JavaScript中访问文件对象准备FormData对象添加文件数据发起异步请求处理JSON结果THREE.jsconstformData=newFormData();constfiles=document.getElementById('file-input').files;for(leti=0;i<files.length;i++){formData.append('files',files[i]);}asyncfunctionuploadFiles(data){try{constresponse=awaitfetch('/upload',{method:'POST',body:data});constresult=awaitresponse.json();console.log('Success:',result);}catch(error){console.error('Error:',error);}}uploadFiles(formData);课程介绍近五年承担的国家级重大重点项目情况

04Flask后端路由与前端交互（七）后端文件接收保存Python接收文件列表循环处理清理文件名构建路径保存文件Python重塑现实——三维重建技术的应用@app.route('/upload',methods=['POST'])defupload_images():files=request.files.getlist('images[]')#获取多个文件forfileinfiles:iffileandallowed_file(file.filename):#检查文件类型合法性

filename=file.filenamefilepath=os.path.join(UPLOAD_FOLDER,filename)file.save(filepath)#保存文件到指定路径returnrender_template('start.html')#上传成功后返回页面课程介绍近五年承担的国家级重大重点项目情况

04Flask后端路由与前端交互（八）前端点云数据渲染C++JS定义一个路由处理函数向“/router”接口发送请求将响应数据转换为JSON格式请求发生错误时执行输出错误信息到控制台请求成功后，使用数据进行渲染调用initializationViewer初始化视图Python重塑现实——三维重建技术的应用//

渲染点云数据functionrenderPointCloud(){fetch('/render').then(response=>response.json()).then(data=>{//

成功获取数据后，调用第二部分进行渲染initialize3DViewer(data);}).catch(error=>{//

网络错误或解析错误处理

console.error('点云渲染失败:',error);});}课程介绍近五年承担的国家级重大重点项目情况

04Flask后端路由与前端交互（九）3D场景环境搭建C++JSThree.js3D场景设置1.虚拟世界创建2.画布设置3.返回引用场景相机渲染器Canvas设置大小为窗口尺寸场景相机渲染器用于未来的绘制调用访问Python重塑现实——三维重建技术的应用functionsetupEnvironment(){constscene=newTHREE.Scene();constcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/

window.innerHeight,0.1,1000);constrenderer=newTHREE.WebGLRenderer();renderer.setSize(window.innerWidth,window.innerHeight);document.getElementById('render-container').appendChild(renderer.domElement);return{scene,camera,renderer};}课程介绍近五年承担的国家级重大重点项目情况

04Flask后端路由与前端交互（十）前端点云对象构建JS创建几何体和材质创建顶点位置数组填充顶点位置数据设置几何体属性创建并返回点云对象创建

BufferGeometry用于存储几何数据创建PointsMaterial

设置点的颜色和大小根据传入数据的长度，创建一个Float32数组每个点有x,y,z三个坐标遍历传入的data

数组将每个点的坐标依次存入positions数组中将

positions

数组作为'position'属性每个顶点包含3个分量(x,y,z)使用几何体和材质创建对象该对象可直接添加到场景中进行渲染Python重塑现实——三维重建技术的应用functioncreatePointCloud(data){constgeometry=newTHREE.BufferGeometry();constmaterial=newTHREE.PointsMaterial({color:0x888888,size:0.05});constpositions=newFloat32Array(data.length*3);for(leti=0;i<data.length;i++){positions[i*3]=data[i].x;positions[i*3+1]=data[i].y;positions[i*3+2]=data[i].z;}geometry.setAttribute('position',newTHREE.BufferAttribute(positions,3));returnnewTHREE.Points(geometry,material);}课程介绍近五年承担的国家级重大重点项目情况

04Flask后端路由与前端交互（十一）后端三维重建调度PythonPython重塑现实——三维重建技术的应用@app.route('/synthesize',methods=['POST'])defsynthesize():try:subprocess.run(['python3','gaussian-splatting/train.py','-s','gaussian-splatting/data'],check=True)progress['status']=100#三维重建完成，进度为100%returnjsonify({"message":"三维重建完成"})#返回成功信息exceptsubprocess.CalledProcessErrorase:progress['status']=-1#出现错误，设置进度为-1returnjsonify({"error":f"三维重建失败:{str(e)}"}),500#返回错误信息代码说明①@app.route('/synthesize',methods=['POST'])定义/synthesize路由，接受POST请求①subprocess.run()调用3DGS的训练脚本进行三维重建前端如何调用fetch('/synthesize',{method:'POST'}).then(res=>res.json()).then(data=>{});课程介绍近五年承担的国家级重大重点项目情况

04Flask后端路由与前端交互（十二）后端点云数据分发PythonPython重塑现实——三维重建技术的应用@app.route('/render',methods=['GET'])defrender_mo