React+Three.js——PerspectiveCamera透视相机camera参数以及属性值探索

因项目问题，对webgl进行了探索，当进行到3d相机时，对camera的up，position属性有部分难以理解的地方，因此做下了记录。

代码如下：

 import React, {Component} from 'react';
 import * as Three from "three";

 const {Vector3} = Three;

 let scene, camera, renderer, container, width, height, light;

 class Lesson3 extends Component {

     initThree = () => {
         container = document.getElementById('lesson3map');
         width = container.clientWidth;
         height = container.clientHeight;
         width = width > 1440 ? 1440 : width;
         height = height > 600 ? 600 : height;
         renderer = new Three.WebGLRenderer({
             antialias: true
         });
         renderer.setSize(width, height);
         container.appendChild(renderer.domElement);
         renderer.setClearColor(0xffffff, 1.0)
     };

     initCamera = () => {
         camera = new Three.PerspectiveCamera(45, width / height, 1, 10000);
         camera.position.set(0, 2000, 0);
         // camera.up.set(0, 0, 0);
         camera.lookAt(0, 0, 0);
     };

     initScene = () => {
         scene = new Three.Scene();
     };

     initLight = () => {
         light = new Three.DirectionalLight(0xff0000, 1.0, 0);
         light.position.set(100, 100, 200);
         scene.add(light);
     };

     initObject = () => {
         const geometry = new Three.Geometry();
         const p1 = new Vector3(-400, 0, 0);
         const p2 = new Vector3(400, 0, 0);
         geometry.vertices.push(p1, p2);

         for (let i = 0; i < 21; i++) {
             const line = new Three.Line(geometry, new Three.LineBasicMaterial({color: 0x000000, opacity: 0.2}));
             line.position.z = (i * 40) - 400;
             scene.add(line);

             const lineV = new Three.Line(geometry, new Three.LineBasicMaterial({color: 0x000000, opacity: 0.2}));
             lineV.position.x = (i * 40) - 400;
             lineV.rotation.y = 90 * Math.PI / 180;
             scene.add(lineV);
         }
     };

     tRender = () => {
         renderer.clear();
         renderer.render(scene, camera);
         requestAnimationFrame(this.tRender);
     };

     draw = () => {
         this.initThree();
         this.initCamera();
         this.initScene();
         this.initLight();
         this.initObject();
         this.tRender();
     };

     componentDidMount() {
         setTimeout(() => {
             this.draw();
         });
     }

     render() {
         return (
             <div id="lesson3map" style={{width: '100%', height: '100vh'}}/>
         )
     }
 }

 export default Lesson3;

initObject：可以看出这是一个在xz二维坐标轴上的20*20方块，x方向为-400到400，z方向也为-400到400。
initCamera: 
PerspectiveCamera(fov?: number, aspect?: number, near?: number, far?: number)有四个参数，我做一下简单介绍，详情可自行查阅相关资料。

1. fov:眼球张开的角度，0°时相当于闭眼。
2. aspect:可视区域横纵比。
3. near:眼睛能看到的最近垂直距离。
4. far：眼睛能看到的最远垂直距离。

        camera.position.set(0, 2000, 0);
        // camera.up.set(0, 0, 0);
        camera.lookAt(0, 0, 0);

camera.position：设置相机的摆放位置。

camera.lookAt：设置相机望向哪里。

从相机设置可以看出，我们是在y轴上高度为2000的位置，望向原点（0,0,0），因此，观察到的将是一个正对我们的正方形20*20格子图。

为了便于理解，我们假设在y轴上俯视原点，我们将看到一个x正方向向右，z正方向像下的坐标系。此处牵扯到camera中up这个属性的设定，此属性表示我们以哪个方向作为图的上方。由于z轴正方向是向下，因此，此图的up方向为z轴负方向，即可写为（0，0，-1）。

此时，调整camera.position中的y轴位置，会改变观察到的方块大小。相机往左移动时，x值变小；相机往右x值变大；相机往下z值变大；相机往上z值变小，。

因此，我们调整参数为：

camera.position.set(-2000, 2000, 0);
camera.up.set(0, 0, -1);
camera.lookAt(0, 0, 0);

相机此刻在往左移动，由相机位置望向原点，会有一个45°的角度，将会看到一个左边近，右边远的侧身图：

分别调整参数，将会得到其他三种图以作参考。

        // 左侧观察
        // camera.position.set(-2000, 2000, 0);
        // 右侧观察
        camera.position.set(2000, 2000, 0);
        // 上侧观察
        // camera.position.set(0, 2000, -2000);
        // 下侧观察
        // camera.position.set(0, 2000, 2000);

于此，相信大家对camera透视相机的position，up参数有一定了解了吧，动手试验一下吧。有问题可以留言！