Three.js camera中的position,lookAt,up三个属性的理解

概述

主要针对相机中的position,lookAt,up三个属性来谈谈自己的理解。
position: 相机位置，默认为（0，0，0）
lookAt：相机焦点方向，默认为Z轴负半轴方向, 大白话就是相机看向哪一个点
up：相机朝向，默认（0，1，0），可以理解为那一根坐标轴向上

步骤

1. 引入透视相机，角度设置为45°， 引入辅助坐标轴

	let camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 )
	scene.add(new THREE.AxesHelper(1000))

2. 因为相机的默认位置在（0， 0， 0）,所以必须调整相机的位置才可以看到
   相机位置在（0， 0， 0）时是什么都看不到的，图解：
   
   可以看到此时我们相机所拍到的地方没有任何内容，所以此时场景为空的。
   接着我们创建一个box

	var geometry = new THREE.BoxGeometry( 10, 10, 10 );
    var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );

此时我们再次进行刷新界面，可以看到界面还是空的，这是为什么呢，按常规理解来说我们的相机位置在（0， 0， 0）， box的位置也是在（0， 0， 0），大小为（10， 10， 10），我们相机的位置应该是处在box盒子的中间的，是可以看到box的，此时又有一个新概念，材质的渲染默认是渲染背面，我们看到的box盒子的是前面，是不会被渲染的，此时可以设置材质的side属性为THREE.DoubleSide， THREE.BackSide都可以看到。

2. 移动相机的位置，使用camera.position.set()

camera.position.set(0, 0, 30)

可以看到当相机移动到了(0, 0, 30)后，我们终于可以在相机的视野中看到整个box了，真开心~~~

3. 设置up属性，up属性必须设置在lookAt之前
   up属性我们可以理解为那一根坐标轴朝上，我觉得这样是最好理解的
   默认的up属性为：

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

此时我们可以看到y轴设置为1， 那我们的y轴肯定是向上的。

此时我们设置x为1，那X轴的朝向就向上

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

此时我们在设置Z轴为1，我们预想的Z轴肯定也朝上了，这就和预期的结果有差距了

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

此时Z轴垂直我们的屏幕所以我们看不到，那这是怎么回事呢？？？
按照我的理解是此时我们相机的焦点是看到负Z轴的，然后相机的朝向是在正Z轴的，图解

可以看到up方向和lookAt方向是平行且相反的，这种现象是不应该存在的，此时我得出一个结论，up方向和lookAt方向不能平行，不然会出现一些无法理解的情况产生。

4. lookAt 相机的焦点
   此时我们将up的y轴甚至为朝上的

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

设置相机焦点

	camera.lookAt(new THREE.Vector3(0, 10, 0));

此时我们将相机看到y轴的10，效果