threejs底层封装了强大的webGL技术，让开发者们可以开箱即用 （其实也并非开箱即用，还是挺麻烦的?）。
恰巧朋友遇到了些难题，借此契机，接触了下threejs。
官网是支持中文的，虽然翻译的很差，但寥胜于无。
这里还有个野生的中文文档，感兴趣的可以看看，毕竟也是某位开发者的一腔热血之作！
treejs紧紧围绕了渲染器（Renderer）、场景（Scene）、照相机（Camera），坐标系，物体，光照这些概念，熟悉3d建模或影视特效的人应该非常的熟悉！
下边我就从一个简单的例子，一点点深入。
我们创建一个场景，你可以理解为秀场。
然后再创建一个模型，你可以理解为模特。
最后让模型在场景中展示！
最简单的例子
创建场景
const scene = new THREE.Scene();
创建模型
在threejs中规定，创建模型分3部，具体如下
// 创建物体几何形状
const geometry = new THREE.BoxGeometry(0.4, 0.6, 0.8); // 参数为长宽高
// （基于上一步的几何形状）创建物体外观材质
const material = new THREE.MeshBasicMaterial();
// （基于上一步的外观材质）创建物体网格模型
const mesh = new THREE.Mesh(geometry, material);
创建摄像机
这是什么东西？！
其实也好理解，你自己本身就充当摄像机去看 秀场里的模特。
threejs一切围绕3d，那想了解3d，空间感是必须要有的。
而摄像机就是空间感的表达工具！
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
camera.position.set(0.5, 0, 3); // 设置相机位置
一切就绪，开始展示
// 创建场景 并将上边的内容都添加到场景中
const scene = new THREE.Scene();
scene.add(mesh);
scene.add(camera);
scene.add(axesHelper);
// 创建一个渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
renderer.render(scene, camera); //执行渲染操作
// 执行渲染命令并挂载到页面(会输出一个canvas画布，也就是一个HTML元素，你可以插入到web页面中)
const webglNode = document.querySelector(".webgl");
webglNode.appendChild(renderer.domElement);
