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

文章目录概述1 hdr天空盒2 色彩空间3 basicMaterial常用属性概述最常用的就是基本材质盒和pbr材质1 hdr天空盒图片放在public文件夹下//hdr导入器import{HDRLoader}fromthree/examples/jsm/loaders/HDRLoader.js;//直接在main.js 创建加载器lethdrLoadernewHDRLoader();//HDR 背景必须等加载完成并设置等距柱状投影映射hdrLoader.load(./Texture/环境/天空盒贴图.hdr,(hdr){hdr.mappingTHREE.EquirectangularReflectionMapping;scene.backgroundhdr;//只显示颜色不提供光照scene.environmenthdr;//只提供光照不显示颜色});效果2 色彩空间three.js的色彩空间需要针对每一个贴图单独设置。虽然有公共的色彩空间选项但是只影响最后的总体的画面效果。由于无法判断贴图的用途导致我们需要手动设置贴图的色彩空间为全局设置色彩空间threejs的公共色彩空间工作空间和输出空间。工作空间是指着色器计算时使用的色彩空间默认是线性不要改输出空间是指输出到屏幕上的色彩空间工作空间的颜色最后会映射为输出空间。默认是srgb不要改THREE.ColorManagement.enabledtrue;//启用自动转换 默认开始THREE.ColorManagement.workingColorSpaceTHREE.LinearSRGBColorSpace;//手动指定工作为线性空间 默认是线性空间不要真的修改renderer.outputColorSpaceTHREE.SRGBColorSpace;//输出色彩空间用渲染器设置为纹理指定色彩空间纹理具体使用什么空间取决于这个图片输出时的色彩空间编码格式不是文件格式不是说srgb就一定对。例如一个贴图在制作时使用了srgb编码则在threejs里应该指定为srgb如果编码使用了线性空间则应该不指定或者显示指定为LinearSRGBColorSpace(线性)。如果不显示指定色彩空间。则默认为NoColorSpace不做任何转换直接传递数据实际效果和linear一致。只有颜色贴图和自发光贴图通常使用srgb其他例如法线/粗糙度/金数度/高光/HDR一般都是线性//纹理加载器lettextureLoadernewTHREE.TextureLoader();//纹理lettexturetextureLoader.load(./Texture/井盖/纹理.jpg);//指定色彩空间texture.colorSpaceTHREE.SRGBColorSpace;3 basicMaterial基本材质不接受光照常用属性以下英文是创建材质时的key纹理贴图 map,是否透明 transparent,//bool 值控制的是纹理贴图的透明通道是否生效和透明度贴图无关透明度贴图 alphaMap,ao贴图 aoMap,环境贴图 envMap,//控制反射高光贴图(高光工作流里指定反射强度) specularMap,//控制不同区域的反射强度reflectivity, //number类型光照贴图 lightMap, //类似untiy烘焙后的光照贴图//纹理加载器lettextureLoadernewTHREE.TextureLoader();//纹理 提供颜色透明度lettexturetextureLoader.load(./Texture/井盖/纹理.jpg);//创建材质constmaterialnewTHREE.MeshBasicMaterial({color:0xffffff,map:texture,//添加基础色和透明度纹理//transparent:true, //透明模式//aoMap:aoTexture, //ao贴图//aoMapIntensity:1, //ao贴图的强度});