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

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

代码如下：

 1 import React, {Component} from 'react';
 2 import * as Three from "three";
 3 
 4 const {Vector3} = Three;
 5 
 6 let scene, camera, renderer, container, width, height, light;
 7 
 8 class Lesson3 extends Component {
 9 
10     initThree = () => {
11         container = document.getElementById('lesson3map');
12         width = container.clientWidth;
13         height = container.clientHeight;
14         width = width > 1440 ? 1440 : width;
15         height = height > 600 ? 600 : height;
16         renderer = new Three.WebGLRenderer({
17             antialias: true
18         });
19         renderer.setSize(width, height);
20         container.appendChild(renderer.domElement);
21         renderer.setClearColor(0xffffff, 1.0)
22     };
23 
24     initCamera = () => {
25         camera = new Three.PerspectiveCamera(45, width / height, 1, 10000);
26         camera.position.set(0, 2000, 0);
27         // camera.up.set(0, 0, 0);
28         camera.lookAt(0, 0, 0);
29     };
30 
31     initScene = () => {
32         scene = new Three.Scene();
33     };
34 
35     initLight = () => {
36         light = new Three.DirectionalLight(0xff0000, 1.0, 0);
37         light.position.set(100, 100, 200);
38         scene.add(light);
39     };
40 
41     initObject = () => {
42         const geometry = new Three.Geometry();
43         const p1 = new Vector3(-400, 0, 0);
44         const p2 = new Vector3(400, 0, 0);
45         geometry.vertices.push(p1, p2);
46 
47         for (let i = 0; i < 21; i++) {
48             const line = new Three.Line(geometry, new Three.LineBasicMaterial({color: 0x000000, opacity: 0.2}));
49             line.position.z = (i * 40) - 400;
50             scene.add(line);
51 
52             const lineV = new Three.Line(geometry, new Three.LineBasicMaterial({color: 0x000000, opacity: 0.2}));
53             lineV.position.x = (i * 40) - 400;
54             lineV.rotation.y = 90 * Math.PI / 180;
55             scene.add(lineV);
56         }
57     };
58 
59     tRender = () => {
60         renderer.clear();
61         renderer.render(scene, camera);
62         requestAnimationFrame(this.tRender);
63     };
64 
65     draw = () => {
66         this.initThree();
67         this.initCamera();
68         this.initScene();
69         this.initLight();
70         this.initObject();
71         this.tRender();
72     };
73 
74     componentDidMount() {
75         setTimeout(() => {
76             this.draw();
77         });
78     }
79 
80     render() {
81         return (
82             <div id="lesson3map" style={{width: '100%', height: '100vh'}}/>
83         )
84     }
85 }
86 
87 export default Lesson3;

View Code

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

fov:眼球张开的角度，0°时相当于闭眼。
aspect:可视区域横纵比。
near:眼睛能看到的最近垂直距离。
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参数有一定了解了吧，动手试验一下吧。有问题可以留言！

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

猜你喜欢