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

最新推荐文章于 2024-12-06 10:53:36 发布

原创最新推荐文章于 2024-12-06 10:53:36 发布 · 618 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #学习 #交互

3D商城专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在3D商城中如何利用色调映射处理动态HDR图像，通过设置THREE.ACESFilmicToneMapping和调整曝光度来控制图像明暗。同时，详细阐述了轨道控制器OrbitControls的使用，用于在场景中自由旋转视角。在初始化控制器时，应注意将其置于渲染器之后，以避免找不到相关元素的错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

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

色调映射

我们使用的是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度旋转看到周围的环境
在这里插入图片描述

常见错误总结

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

在这里插入图片描述