Three.js(2)--坐标系（threejs 模型的坐标）

上一篇中，我们创建了一个立方体。见：Three.js(1)--Hello Cube!

那这个立方体的大小、位置是如何确定的呢？本篇就说一说 Three.js 构建的场景中的坐标系。

Three.js 提供了辅助类 AxisHelper 来显示坐标轴：

如图所示，Three.js 中的坐标系是一个右手(strong)坐标系，红轴为 x 轴，绿轴为 y 轴，蓝轴为 z 轴。现在，请用左手拿手机，伸出你的右手，张开手指，大拇指与其他四指呈90度角。以大拇指方向为 x 轴正方向，以其他四指方向为 y 轴正方向，则 z 轴正方向为从手心向外的方向。

再看上一篇中我们创建的立方体：

. var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);

立方体的边长为 4

. cube.position.set(0, 0, 0);

立方体 cube 的位置设在 (0, 0, 0)，也就是说，立方体的中心在原点

有了辅助坐标轴，是不是就很好理解物体的大小和位置了？我们现在再给场景中添加一个球体：

先想象下，这个球体的半径为 4，中心在 (10, 0, 0) 的位置，那么它应该在立方体的沿着 x 轴正方向的方向。看下效果：

嗯。。和我们想象的差不多，相对位置没什么问题，只是这么看着太不舒服了，为什么我们死死盯着立方体看，球体只能看到一个角呢？

这和我们的相机有关系。再来看一下我们相机的设定：

. camera.position.set(10, 10, 10);

. camera.lookAt({ x : 0, y : 0, z : 0, });

我们的相机(即我们的眼睛)从 (10, 10, 10) 的位置，盯着 (0, 0, 0) 的位置看，怪不得我们只看不全新添加的球体！

我们调整一下相机的位置：

把相机拉远一点，盯着立方体和球体的中间 (5, 0, 0) 位置看。再看效果：

这时，我们已经可以看到完整的立方体和球体了。等等，前面的截图中，还有一个 camera.up.set(0, 1, 0); 是什么意思？如果说相机就是我们的眼睛，camera.up 就设定了我们头顶的朝向。这里我们设置头顶朝着 y 轴的正方向。如果我们设置 camera.up.set(0, -1, 0); 那就是在倒立了：

还有一点要注意的是，必须先设置 camera.up，再设置 camera.lookAt，否则 camera.up 失效(实践证明，文档中没写)。你的视线和头顶的方向肯定是垂直的，如果设定的值不垂直，camera.up 只取与视线垂直方向的分量(camera 的眼球不会转)，那如果就设定 camera.up 的方向和视线平行，是不是就什么都看不见了呢？也不是，但这时看到的物体的位置和方向就不可控了，不可控对开发来说还不如看不见，我们平时一定要注意正确地设置相机参数

本篇我们讲了 Three.js 构建的场景中的坐标系，如何指定物体的大小和位置，以及如何调整相机的位置、朝向和上下。有了这些，我们就可以在自己的世界里搭积木了。请大家自己尝试修改下各个参数，想象你的眼睛和物体的相对位置，熟悉一下各参数的意义，建立一下自己的空间感。

. Demo: http://xngeer.frostbelt.cn/itemthreedemo/2.axis.html

肯定有同学要说了，你这上来就讲物体位置了，连 Three.js 中最重要的 相机(Camera)、光源(Light)、物体(Mesh) 我们都所知甚少呢，有几种相机，几种光源，构成物体的几何形状和材质主要有哪些我们都不知道。嗯，是的，一般书上都会有这些讲起。这让我记起刚上大一时老师讲 C 语言，一直到学期末考试了我们也只会在纸上算结果，假期买台电脑也不知道在哪里编辑运行(太菜了。。见谅见谅)。

所以小妖觉得，还是得先看到点东西，才能慢慢感兴趣，不然刚开始就会被晦涩的概念打败。小妖写得很慢，相信有些感兴趣的同学已经开始自己看文档，自己去研究 Three.js 了，比小妖讲得快很多。那真是太好了，希望大家很快成为 Three.js 高手，我们一起进步！