本案例用到的技能： 1.加载模型 2.相机移动 3.鼠标选中模型 4.在场景中加入新的物体 5.物体沿路径移动 5.第一视角巡视 7.canvas画布自适应-页面窗口改变时模型不变形 首先新建react项目，引入Three，新建一个加载模型的class方法类，用于处理模型相关的操作。 主要思想是将图形组件与前端页面分离，降低图形组件与前端业务逻辑的耦合度。在图形组件中将方法暴露出来，前端页面来调用即可。 图形组件的class方法 初始化及加载模型： 渲染场景 canvas画布自适应窗口变化的方法： 鼠标选中模型的方法 // 鼠标点击时相机移动，即改变相机位置和中心点位置，以显示点击物体的最佳视角 在场景中加入一个新的立方体，并在立方体上加入相机，后面物体沿轨迹移动时调用物体身上的相机，实现以物体的视角展示模型 在场景中加入路径，物体沿着此路径移动 // 立方体沿路径移动和停止的方法，调用时执行 // 调用立方体上面的相机，展示第一视角 前端页面调用 页面中展示模型的canvas、信息div，操作按钮 实例化模型加载方法 // 鼠标移动和点击时将鼠标的位置传过去，在图形组件中转裁剪坐标，以判断是否选中物体 // 点击巡视按钮时调用立方体上的相机，并使立方体沿轨迹移动
1、打开threeJS软件，任意创建一个模型。
2、然后选择模型并单击“选择并均匀缩放”按钮。
3、将光标移动到X轴上，则X轴变为黄色，且光标的形状发生变化。
4、按住回鼠标左键拖动光标，则模型随着光标的移动发生变化，同理，其他轴也是这样的，
5、鼠标放在三角中间，按住鼠标左键拖动光标，则模型在X、Y、Z三个方向同时变化。如图所示
6、第二种模式“选择并非均匀缩放”跟第一种模式是一样的，
7、鼠标左键按住缩放按钮不放，在弹出的工具菜单中选择“选择并挤压缩放”按钮，将鼠标移动到三角形标识上，向内进行缩放操作，可以看到模型外观发生了巨大的变化，如图所示。
8、完成图。
注意事项：
three.js封装了一些3D渲染需求中重要的工具方法与渲染循环。它的教程同样可以在hiwebgl里面找版到。
three.js之于webgl，类似于windows版本的虚幻引擎之于D3D。当然，虚幻引擎的能力范围比three.js大得多。d3.js跟上面两者没有关权系。
