three.js入门应用-展示3d模型
前言：
最近公司计划做一个关于计测方面的案子，希望可以以3d的方式去直观的展示测量目标本体以及测量工位等信息。先后决定从达索，华天sview，HOOPS等web3d方案解决商去选取，经过调研之后发现这三款库价格且比较昂贵，并且有的开发文档全英文，有的不详细，反正就是开发上困难不小，加上开始案子都不重视，导致后面赶进度，发现一堆问题。之后技术总监建议去研究使用three.js。于是被迫去扩充自己的技能包。。。 哈哈
准备：
开始去看threejs的官网以及api，发现真的繁多，于是转而去百度，看别人是怎么用的，去借鉴模仿【搬砖】。总结出一套完整的流程为：
1.引入three.js,
【不使用vue等框架，直接以script 方式引入】
【vue： npm i three => import * as THREE from 'three' 】
2.自己画模型还是引入模型，如果是引入外部模型，就需要去找对应的加载器
以导入外部.mtl模型为例， 就需要用到 ·MTLLoader·
【 】
【import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js', npm安装后，直接引入即可】
3.初始化操作，包括创建场景,创建光源，创建相机，创建渲染器，创建控件对象，加载模型【如果引入外部模型的话】，最后渲染-render
总结如上。
下面是结合vue使用的demo【demo来自 点燃火柴， 导入的STL模型，MTL原理和STL一样通用】:
【不知道是不是 three.js 版本更新的缘故，我直接使用会报错， 百度查阅 需要将场景和scene全局话，不能直接放到 data属性中，这里需要注意！！！】
附上demo展示图：