Three js 5 HDR天空盒、颜色空间、材质

文章目录

- 概述
- [1 hdr天空盒](#1 hdr天空盒)
- [2 色彩空间](#2 色彩空间)
- [3 basicMaterial](#3 basicMaterial)
- - 常用属性

概述

最常用的就是基本材质盒和pbr材质

1 hdr天空盒

图片放在public文件夹下

javascript 复制代码

//hdr导入器
import {HDRLoader} from "three/examples/jsm/loaders/HDRLoader.js";

//直接在main.js 创建加载器
let hdrLoader = new HDRLoader();
//HDR 背景：必须等加载完成，并设置等距柱状投影映射
hdrLoader.load("./Texture/环境/天空盒贴图.hdr", (hdr) => {
    hdr.mapping = THREE.EquirectangularReflectionMapping;
    scene.background = hdr;//只显示颜色不提供光照
    scene.environment = hdr;//只提供光照，不显示颜色
});

效果

2 色彩空间

three.js的色彩空间需要针对每一个贴图单独设置。虽然有公共的色彩空间选项，但是只影响最后的总体的画面效果。由于无法判断贴图的用途，导致我们需要手动设置贴图的色彩空间

为全局设置色彩空间

threejs的公共色彩空间工作空间和输出空间。工作空间是指着色器计算时使用的色彩空间，默认是线性，不要改

输出空间是指输出到屏幕上的色彩空间，工作空间的颜色最后会映射为输出空间。默认是srgb，不要改

javascript 复制代码

THREE.ColorManagement.enabled=true;//启用自动转换 默认开始
THREE.ColorManagement.workingColorSpace=THREE.LinearSRGBColorSpace;//手动指定工作为线性空间 默认是线性空间，不要真的修改
renderer.outputColorSpace = THREE.SRGBColorSpace; //输出色彩空间用渲染器设置

为纹理指定色彩空间

纹理具体使用什么空间，取决于这个图片输出时的色彩空间（编码格式，不是文件格式），不是说srgb就一定对。例如一个贴图在制作时使用了srgb编码，则在threejs里应该指定为srgb，如果编码使用了线性空间，则应该不指定或者显示指定为LinearSRGBColorSpace(线性)。

如果不显示指定色彩空间。则默认为NoColorSpace，不做任何转换，直接传递数据，实际效果和linear一致。

只有颜色贴图和自发光贴图通常使用srgb，其他例如法线/粗糙度/金数度/高光/HDR一般都是线性

javascript 复制代码

//纹理加载器
let textureLoader = new THREE.TextureLoader();
//纹理
let texture = textureLoader.load("./Texture/井盖/纹理.jpg");
//指定色彩空间
texture.colorSpace = THREE.SRGBColorSpace;

3 basicMaterial

基本材质，不接受光照

常用属性

以下英文是创建材质时的key

纹理贴图 map,

是否透明 transparent,//bool 值控制的是纹理贴图的透明通道是否生效，和透明度贴图无关

透明度贴图 alphaMap,

ao贴图 aoMap,

环境贴图 envMap,//控制反射

高光贴图(高光工作流里指定反射强度) specularMap,//控制不同区域的反射强度

reflectivity, //number类型

光照贴图 lightMap, //类似untiy烘焙后的光照贴图

javascript 复制代码

//纹理加载器
let textureLoader = new THREE.TextureLoader();
//纹理  提供颜色+透明度
let texture = textureLoader.load("./Texture/井盖/纹理.jpg");
//创建材质
const material = new THREE.MeshBasicMaterial({
    color:0xffffff,
    map:texture,//添加基础色和透明度纹理
    //transparent:true, //透明模式
    //aoMap:aoTexture,  //ao贴图
    //aoMapIntensity:1,  //ao贴图的强度
});