Threejs系列--15游戏开发--沙漠赛车游戏【相机角度调整】

序言

本章将调整相机角度，让整个游戏界面看起来不是一张纸…

目录结构

资源目录里面的结构不变，点击传送门快速查看。

|__src
	|__assets
	|__js
	|	|__base		基础类文件夹
	|		|__Camera.js 相机类	【新增--相机位置】
	|	|__geometries	定制的物体类文件夹
	|	|__materials	材质类文件夹
	|		|__Floor.js 地面材质
	|	|__passes	合成器通道文件夹
	|		|__Blur.js	  模糊着色器
	|		|__Glows.js		发光着色器
	|	|__utils	工具类文件夹
	|		|__Sizes.js  画布大小控制类
	|		|__EventEmitter.js 基础事件处理器
	|		|__Time.js  动画刷新
	|	|__world	精灵类文件夹
	|		|__index.js	精灵类	
	|		|__Floor.js 地面类
	|	|__Application.js	初始化游戏的文件 
	|__index.js		入口
	|__index.css  	小项目，样式一丢丢

代码一览

Camera.js代码

import * as THREE from "three";

/**
 * 相机类
 */
export default class Camera {
    constructor(_options) {
      this.time = _options.time;
      this.sizes = _options.sizes;
      this.renderer = _options.renderer;

      //创建三维对象容器 准备装载相机
      this.container = new THREE.Object3D();
      this.container.matrixAutoUpdate = false; //是否算每一帧的位移、旋转（四元变换）和缩放矩阵，并重新计算matrixWorld属性

      //设置相机角度
      this.setAngle();

      //装载相机实例
      this.setInstance();
    }

    setAngle(){
      this.angle = {};
		
	  //默认角度 可以自行调整  这两段给之后的相机调整预留扩展，尽量少改动
      this.angle.items = {
        default: new THREE.Vector3(1.135, -1.45, 1.15),
      }
	  //copy一份备用
      this.angle.value = new THREE.Vector3();
      this.angle.value.copy(this.angle.items.default);
    }

    setInstance() {
      //获取透视相机
      this.instance = new THREE.PerspectiveCamera(40, this.sizes.viewport.width / this.sizes.viewport.height, 1, 80);
      this.instance.up.set(0, 0, 1); //这个属性由lookAt方法所使用，例如，来决定结果的朝向
      //将设置的位置进行赋值
      this.instance.position.copy(this.angle.value.clone().normalize().multiplyScalar(15))
      this.instance.lookAt(new THREE.Vector3()); //表示世界空间中位置的向量
      this.container.add(this.instance); //添加对象到这个对象的子级，可以添加任意数量的对象。
    }
}

Application.js代码

...

// this.camera.instance.position.z = 5;
...

代码解读

Camera.js中新增了setAngle()，管理了相机角度的基本信息，例如初始位置，将来可以扩展其它信息。
Camera.js中setInstance()，新增了相机初始角度设置。

如果你的代码中还有对于相机角度的其它设置，请删掉它，例如之前Application.js中的z轴的设置，可以移除了。

运行结果