WEB端三维可视化（threejs）01

前言

记录一下学习笔记

一、初识

一年前从网上爬了个web端的三维demo，从此接触到了一个新的方向——webgl。第一次尝试自己写三维用的webgl，各种顶点信息、坐标定位，烦不胜烦。

后续又各种搜索引擎，cesiumjs、 babylonjs、unity、threejs等等，比较下来就选择了three。

说一下原因：
cesiumjs：注重地形，支持模型文件格式只有gltf。
babylonjs：比较针对游戏交互，支持碰撞引擎、物理引擎、音频引擎、优化引擎等等。
unity：对unity软件有一定的操作经验，并且具有使用C#编写脚本的能力(unityscript编写脚本除外，us和传统js不同，要针对性注意和学习，刚开始我也是以为自己会js就可以写了，结果直接掉坑里，爬不出来那种坑，而且是一坑套一坑)，针对这个说一下，因为本来首选的是unity，因为unity细节渲染比较到位，而且导入导出模型文件也比较方便。
threejs：应用比较广泛，不单单支持webgl，同时也支持SVG、canvas和CSS3D渲染，可以说【可繁可简】，并且考虑到BS项目上会有跟多交互用到大量canvas展示一些信息，所以就选择了three。

其他的就不一一叙述了，相比较之下，比较推荐这四个。

OK！记录一下流程吧，后边方便我粘代码用，万一不小心把git和本地文件清空了，至少还有个CSDN。

这第一篇就从搭建开始吧。

二、nodejs

额，这个感觉就不用多说了，开发BS前端，如果在不知道这个，趁早回去赶紧学一遍
直接搜索nodejs

下载适配自己电脑的版本，无脑安装即可。安装完成后控制台输入：npm -v

如果自己没有代理访问npm的国外库速度慢，记得更换淘宝镜像。
首先安装nrm

控制台输入：nrm ls 查看npm的仓库，默认选中的应该都是 npm。

控制台输入：nrm use taobao 来切换要使用的仓库。

三、引入threejs库

不论是用原生HTML写，或者是vue都可以使用 npm install three 引入，默认引入的是最新版本。

如果要指定版本号，后边加上 @版本。

threejs包的结构，js文件夹下一般写原生用就可以直接用，jsm文件夹下用es语法 import 引入即可

//原生html
<script type="text/javascript" src="three/build/three.js"></script>

//es
import * as THREE from '../build/three.module.js';

//vue
import * as THREE from 'three'

到这基本上前期大体就结束了，其实没有什么东西，只不过安装一个threejs库，导入到项目应用即可。