我们在new THREE.PerspectiveCamera的时候确定照相机的视野范围，对应上图，45是fov，就是视野上下边缘之间的夹角。window.innerWidth / window.innerHeight是视野水平方向和竖直方向长度的比值，0.1（near）和1000（far）分别是照相机到视景体最近、最远的距离，这些参数决定了要显示的三维空间的范围，也就是上图中的灰色区域。
camera.position.set(-30, 40, 30)确定了照相机在空间中的坐标。
camera.lookAt(0,0,0)确定了照相机聚焦点，该点和照相机坐标的连线就是拍摄方向。
上图中的灰色区域在屏幕上的显示效果，也就是将三维空间的坐标投影到屏幕二维坐标是webgl完成的，我们只需要关心三维空间的坐标。
坐标系
与我们之前讲到的CSS的3D坐标系[2]不同，webgl坐标系是右手坐标系，X轴向右，Y轴向上，Z轴是指向“自己”的。
伸出右手，让拇指和食指成"L"形，大拇指向右，食指向上。其余的手指指向自己，这样就建立了一个右手坐标系。
其中，拇指、食指和其余手指分别代表x，y，z轴的正方向
在空间中定位、平移都比较好理解，这里看一下旋转。
有时，我们会这样设置物体的旋转：object.rotation.x = \-Math.PI / 2，表示的是绕X轴旋转-90度。具体是怎么旋转，就要对照上面坐标系，展开右手，拇指指向x轴正方向，其余手指的弯曲方向就是旋转的正方向；拇指指向x轴负方向，其余手指的弯曲方向就是旋转的负方向。y轴和z轴旋转方向的判断同理。
物体
在three.js中，创建一个物体需要两个参数：几何形状（Geometry）和 材质（Material）。通俗的讲，几何形状决定物体的形状，材质决定物体表面的颜色、纹理贴图、对光照的反应等等。
- //创建一个平面几何体，参数是沿X方向的Width和沿Y方向的height
- const planeGeometry = new THREE.PlaneGeometry(60,20)
- //创建一种材质，MeshLambertMaterial是一种考虑漫反射而不考虑镜面反射的材质
- const planeMaterial = new THREE.MeshLambertMaterial({
- color: 0xAAAAAA
- })
- //根据几何形状和材质创建物体
- const plane = new THREE.Mesh(planeGeometry, planeMaterial)
- //设置物体的位置和旋转，并将物体加到场景（scene）中
- plane.rotation.x = -Math.PI / 2
- plane.position.set(15, 0, 0)
- scene.add(plane)
一些常用的几何形状和材质可以参考Three.js入门指南[3]
光照
没有光源，渲染的场景将不可见（除非你使用基础材质或线框材质，当然，在构建3D应用时，几乎不怎么用基础材质和线框材质）。
