代码地址：code.juejin.cn/pen/7204996…
涉及名词
- Renderer：渲染器
- Scene：场景
- Camera：相机
- Geometry：几何体
- Material：材质
- Mesh：网格
代码理解
WebGLRenderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );
渲染器分为两个部分，一是关联 WebGL 和 Canvas 元素，二是渲染（调用 render 更新渲染结果）。
初始化有两种方式，一是 WebGLRenderer 实例化时传入 Canvas 元素（推荐方式），二是不传 Canvas 元素，WebGLRenderer 会自动创建一个 Canvas，需要手动的将该元素插入到 DOM 树之中。
渲染时两个参数，scene 和 camera。
Scene
场景允许你设置 three.js 渲染内容和位置。这是放置物体、灯光和相机的地方。
const scene = new THREE.Scene();
scene.add( cube );
疑问：显示内容通过 scene.add 方法增加到场景中，但是相机是 renderer 渲染的时候进行关联的，好像并不是放置在场景中的。
Cammera
PerspectiveCamera：模拟人眼的效果，近大远小。
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;
Geometry
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
Material
材质是线段属性或者物体表面的一些颜色、贴图、光亮程度、反光特性、粗糙程度等属性。
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
Mesh
网格包含的内容为几何体、几何体的材质、几何体的自身网格坐标体系。
const cube = new THREE.Mesh( geometry, material );
cube.rotation.x = step;
cube.rotation.y = step;
一个几何体或材质，可以被多个网格使用，一个场景内可以添加多个网格。
参考文档：
