【3D商城】调节色调映射和增加控制器

概述

本文讲解色调映射以及如何通过控制器来进行旋转去查看场景周围的情况，文件的目录如下

色调映射

我们使用的是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度旋转看到周围的环境

常见错误总结

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