调节色调映射和增加控制器| 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第2天

概述

开发项目相关的记录，本文讲解色调映射以及如何通过控制器来进行旋转去查看场景周围的情况，文件的目录如下，我们在index.js和Home.vue中进行编译

色调映射

色调映射，是在有限动态范围媒介上近似显示高动态范围图像的一项计算机图形学技术。打印结果、CRT 或者 LCD 显示器以及投影仪等都只有有限的动态范围。

我们使用的是HDR图是动态的，动态的图里面保留了很多信息，图里面有最暗的情况和高亮的情况，是动态的，于是我们可以通过色调映射来处理图片的亮暗情况。

  initRenderer() {
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    // 设置屏幕像素比
    this.renderer.setPixelRatio(window.devicePixelRatio);
    // 渲染的尺寸大小
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    // 色调映射
    this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
    this.renderer.toneMappingExposure = 3;
    this.container.appendChild(this.renderer.domElement);
  }

此外可以设置曝光程度 (this.renderer.toneMappingExposure = 3;)

控制器的使用

首先对控制器初始化

  init() {
    //   初始化场景
    this.initScene();
    // 初始化相机
    this.initCamera();
    // 初始化渲染器
    this.initRenderer();
    // 控制器
    this.initControls();
   }

导入控制器

// 导入控制器，轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

方法调用

  initControls() {
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
  }

结果显示当我们把需要的模型导入到页面之后，可以通过鼠标移动在场景内进行360度旋转看到周围的环境，从而实现了3D环境的导入，并且能控制颜色和角度进行观察

常见错误总结

控制器要用渲染器，因此在初始化的时候，控制器要写在渲染器的后面，否则会容易报错没有找到相关元素

如下图所示，控制器要在渲染器后面