博客

因项目问题，对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参数有一定了解了吧，动手试验一下吧。有问题可以留言！