learn threejs (最小化例子）
参考来源
https://www.youtube.com/watch?v=gbTnojWE78k&t=803s
https://github.com/00-joe-js/playground-of-huge-potential
最小化场景例子
https://github.com/chunleili/threejsMinimal
运行方法：
git clone之后
VS code 打开文件夹
安装
npm install
运行
npm run dev
打开浏览器：
http://localhost:3000/
控制：鼠标右键平移，鼠标左键旋转
提示：可以用win+上下左右来分屏显示代码和浏览器，方便调试
提示：可以使用VS Code插件 colonize来自动为js添加分号（快捷键alt+enter）
为场景添加物体
打开代码src/index.ts
添加一个box(屏幕中间青色的那个板子）
//add box
const boxGeo = new BoxGeometry(150,15,150);
const boxMat = new MeshBasicMaterial({color:0x00ffff});
const box = new Mesh(boxGeo, boxMat);
scene.add(box);
box.position.y += 100;
解释：首先添加BoxGeometry，其次添加MeshBasicMaterial，最后把它们绑定一起，添加Mesh。然后在scene中添加这个box。最后调整box的高度。
所有threejs场景中的物体均是Geometry+Material 的组合，或者称之为Mesh。以后就用Mesh来指代threejs中的一个物体。
照猫画虎，再添加一个ball2
//add ball2
const ball2Geo = new SphereGeometry(100);
const ball2Mat = new MeshBasicMaterial({color:0xff0000, wireframe:true});
const ball2 = new Mesh(ball2Geo, ball2Mat);
scene.add(ball2);
ball2.position.y += 200;
ball2.position.x += 10;
这次唯一不同在于增加了wireframe:true选项。Material就相当于一个蒙皮（skin），wireframe就是暴露出骨架。