上篇文章带读者完成了一个3d弹弹球的加强版，读者顺便了解了下灯光和阴影的基本用法，关于相机的位置参数问题，我们在前文只是简单提过，本篇文章，想和读者分享下相机的位置参数问题。

本文是threejs系列的第五篇，阅读前面的文章有助于更好的理解本文：

1.一个简单的案例，理解threejs中几个基本概念
2.三维世界中的坐标系
3.3d弹弹球
4.3d弹弹球(加强版)

本文的案例，在第三篇文章的基本上加工而成，因此如果读者还没阅读3d弹弹球一文，建议先阅读该篇文章。

在3d弹弹球一文中，我们创建了一个plane平面，平面上有一个球弹来弹去，本文因为只考虑相机问题，因此我将页面模型简化，只留下坐标系和弹弹球，去掉plane，代码如下：

  
  
  

   
   
   
var scene = new THREE.Scene();
   
   
   
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
   
   
   
var render = new THREE.WebGLRenderer({
   
   
   
    antialias: true
   
   
   
});
   
   
   
render.setClearColor("#FFFFFF");
   
   
   
render.setSize(window.innerWidth, window.innerHeight);
   
   
   
document.body.appendChild(render.domElement);
   
   
   
var axesHelper = new THREE.AxesHelper(5);
   
   
   
scene.add(axesHelper);
   
   
   
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
   
   
   
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
   
   
   
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
   
   
   
sphere.position.y = 4;
   
   
   
sphere.position.x = 20;
   
   
   
sphere.position.z = 2;
   
   
   
scene.add(sphere);
   
   
   
camera.position.z = 60;
   
   
   
camera.lookAt(0, 0, 0);
   
   
   
var step = 0;
   
   
   
function show() {
   
   
   
    step += 0.04;
   
   
   
    sphere.position.x = 20 + (10 * (Math.cos(step)));
   
   
   
    sphere.position.y = 2 + (10 * (Math.abs(Math.sin(step))));
   
   
   
    requestAnimationFrame(show)
   
   
   
    render.render(scene, camera);
   
   
   
}
   
   
   
show()
  
  
  

此时显示效果如下：

可以看到，目前相机的位置为(0,0,60)，坐标系只能看到x轴和y轴，看不到z轴，这是因为相机默认垂直观察屏幕，z轴垂直于屏幕，因此看不到，具体解释读者可以参考3d弹弹球一文，这里不做过多介绍。

关于相机的位置参数，这里主要介绍三个：position、up以及lookAt。

position

首先position表示相机的位置，相机位于不同位置可以看到不同的场景，这个因该很容易理解,例如在上文的案例中，将相机沿x轴水平移动，移动后，就能看到z轴了，添加如下代码：

  
  
  

   
   
   
camera.position.x = 60;
  
  
  

显示效果如下：

可以看到，蓝色的线即为z轴，因为相机y轴还是0，因此没有立体感，将相机沿y轴也移动30个单位，就有立体感了，如下：

  
  
  

   
   
   
camera.position.y = 30;
  
  
  

显示效果如下：

lookAt

将相机向上移动之后（y轴坐标增大），读者可能会发现整个球连同坐标系的位置都下移了，这个很好理解，例如你本来正襟危坐，眼睛正前方有一台电脑，当你站起来（相当于相机y轴坐标增大）后，电脑的位置自然就在视野的下方了。此时，我们可以通过调整lookAt，来告诉相机该看哪儿。lookAt指定的是一个方向，就是相机的看哪里（即摄像头对着的方向），指定了之后，视图又会重新回到视觉中心，指定lookAt的方式如下：

  
  
  

   
   
   
camera.lookAt(0, 0, 0);
  
  
  

但是指定了lookAt后就可以拍摄了吗？并不是。例如你眼前有个美女，你要拍照，你拿起手机，对准了美女，这个动作相当于指定了lookAt位置，但是lookAt位置即使指定了，手机还可以竖拿，可以横拿，可以斜着拿，因为不同的拿手机方式lookAt指定的方向并不受影响。

那么如何固定手机位置呢？这就需要另外一个参数up。

up

up用来指定相机快门的位置，相机的快门一般在相机的上方，指定了快门的位置，相当于相机就不能旋转了，这样相机的位置就算彻底固定死了，默认情况下，相机的快门位置为(0,1,0)，即相机是垂直摆放的（就是本文图一中读者看到的效果）。

如果将相机快门位置设置为(1,0,0)，即相机顺时针旋转90度，如下：

  
  
  

   
   
   
camera.up.x = 1;
   
   
   
camera.up.y = 0;
   
   
   
camera.up.z = 0;
  
  
  

此时看到的画面如下：

可以看到，和图一相比，此时画面刚好旋转了90度，那是因为相机旋转了90度。

当然，up也可以调整为其他位置，但是要注意，up要垂直于lookAt，否则threejs可能不知道你到底想干嘛。

好了，相机的位置参数我们就先说这么多，有问题欢迎留言讨论。

本文案例：https://github.com/lenve/threejsDemo