在网页中添加3D模型并通过Mysql更新其位置

前言 

本文以一个简单的3D模型为案例，将多个3D模型并排一列(z轴坐标上)，通过关联Mysql数据库，实现在网页中即时更新模型位置的功能。

原本自己的项目中是要将机械设备运行的实时位置简易的展示在网页上，让管理者能够通过物联网的形式实时观察到设备的运行状态。所以重点是在后端搭建一个接口，将设备运行的数据在Mysql数据库中实时更新，最后通过这些数据实时更新模型位置。

这一年以来通过自学相关知识，反复查阅资料，搭建出了一个基本框架，并运用于工作中。希望自己总结的这些知识经验能帮到同样有这些想法的朋友，创作不易，麻烦转载的朋友注明出处，谢谢。

效果展示

说明：由于不能展示项目的3D数据，只能以一个简单的模型来代替，旨在说明实现的功能。当启动按下后，现实中设备开始运行，并将移动的数据更新到Mysql中，最后展示在网页上。每个模型头上的标签反应了模型Z轴坐标的绝对位置，标签显示的位置与模型实际的位置有10倍的差距，这主要是因为原先我的项目中模型文件太大，导致每次网页加载很慢，故我只能将模型缩小了10倍，所以显示的距离就相应扩大10倍。

思路

模型的搭建，主要是运用three.js-master库来实现，其中模型位置的控制主要是函数mesh.position.set(x,y,z)