Threejs HDR

如果你不了解hdr的相关知识，可以查看下面链接提供的文章，本文主要讲解threejs中如何使用hdr贴图。

知乎——HDR 是什么？有哪些具体介绍？
OpenGL HDR
WebGL学习之HDR与Bloom
OpenGL Bloom
OpenGL-HDR和Bloom

examples相关案例

如果你想了解Threejs关于HDR的资料或说threejs加载HDR贴图的资料，可以在threejs
的案例examples搜索窗口中检索关键词hdr或者说软件包中通过代码编辑器全文检索关键词hdr，可以看到相关的案例，以threejs R106版本为例，可以查看到webgl_loader_texture_hdr、webgl_materials_envmaps_hdr、webgl_materials_envmaps_hdr_nodes等案例。

加载单张HDR纹理贴图(`RGBELoader.js`)

webgl_loader_texture_hdr案例加载了一张纹理贴图作为矩形网格模型的纹理贴图，也就是模型材质颜色贴图.map的属性值，可以通过调整曝光度参数查看显示效果。

通过threejs扩展库RGBELoader.js可以加载.hdr格式图像，hdr图像加载器RGBELoader.js地址见"js/loaders/RGBELoader.js"。

<!-- 引入RGBELoader.js-->
<script src="js/loaders/RGBELoader.js"></script>

//创建hdr格式图像的加载器
var texLoader = new THREE.RGBELoader()
texLoader.load('./hdr图像/memorial.hdr', function(texture, textureData) {var texture = texLoader.load('./hdr图像/memorial.hdr')texture.encoding = THREE.RGBEEncoding;//设置编码属性的值texture.minFilter = THREE.NearestFilter;//当一个纹素覆盖小于一个像素时，贴图将如何采样texture.magFilter = THREE.NearestFilter;//当一个纹素覆盖大于一个像素时，贴图将如何采样texture.flipY = true;//翻转图像的Y轴以匹配WebGL纹理坐标空间// 加载.hdr贴图范围的纹理对象Texture作为.map的属性值var material = new THREE.MeshBasicMaterial({map: texture});// textureData.width / textureData.height表示图像宽高比// 矩形几何体宽高比和图形的宽高比保持一致，避免图像显示伸缩var geo = new THREE.PlaneBufferGeometry(textureData.width / textureData.height * 100, 1 * 100);var mesh = new THREE.Mesh(geo, material);scene.add(mesh)
});

通过WebGl渲染器WebGLRenderer的.toneMapping、.toneMappingExposure、.gammaOutput属性可以调整hdr贴图的显示效果。

// 色调映射属性.toneMapping用于在普通计算机显示器或者移动设备屏幕等低动态范围介质上，模拟、逼近高动态范围(HDR)效果
renderer.toneMapping = THREE.ReinhardToneMapping;
// 色调映射的曝光级别。默认是1,曝光度值越大，图像亮度越高
// 可以尝试不同值去测试显示效果 比如0:看不到  0.1:很暗  200:过于亮，轮廓感不清楚
renderer.toneMappingExposure = 2;
//是否乘以gamma输出，默认值false
renderer.gammaOutput = true;

加载6张HDR环境贴图(`HDRCubeTextureLoader.js`)

webgl_materials_envmaps_hdr案例加载了6张.hdr环境贴图。

通过threejs扩展库HDRCubeTextureLoader.js可以加载6张.hdr格式环境贴图，hdr环境贴图加载器HDRCubeTextureLoader.js地址见"js/loaders/HDRCubeTextureLoader.js"。

<!-- 引入相关文件 -->
<script src="js/loaders/RGBELoader.js"></script>
<!-- HDRCubeTextureLoader.js依赖RGBELoader.js -->
<script src="js/loaders/HDRCubeTextureLoader.js"></script>
<script src="js/pmrem/PMREMGenerator.js"></script>
<script src="js/pmrem/PMREMCubeUVPacker.js"></script>

var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
// 返回立方体纹理贴图对象
var hdrMap = new THREE.HDRCubeTextureLoader().setPath( './textures/cube/pisaHDR/' ).load( THREE.UnsignedByteType, hdrUrls, function () {var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );pmremGenerator.update( renderer );var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );pmremCubeUVPacker.update( renderer );hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;pmremGenerator.dispose();pmremCubeUVPacker.dispose();} );

// 立方体纹理对象hdrMap作为scene的背景
scene.background = hdrMap;

更多Threejs资料，欢迎关注我的个人技术博客

Threejs HDR相关推荐

threejs学习网址记录
14.thingJS:https://www.thingjs.com/guide/city2/?campaign_id=636109562&utm_campaign=ThingJS&u ...
ThreeJS的特效合成器和后期处理通道
最近要写个 web 交互式发光可交互的框架.没查到啥好资料,自己一个人摸索了很久,有些失望,可是毕竟是探索过的东西,所以做个记录,怀念我过去好多天掉的青丝(捂脸).我在前面那篇博客里面已经介绍了如何让 ...
sRGB HDR概念性学习
threejs交流群511163089 sRGB sRGB是个啥 s是standard 是大厂为了统一标准搞的色彩空间对应了gamma0.45空间. 然后是伽马矫正 gammaxx空间就是那个幂伽 ...
元宇宙基础-Three.js | 大帅老猿threejs特训营
day01作业打卡 WebGL简介 WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过 ...
Blender基础建模 | 大帅老猿threejs特训
最近接触到了web3d相关的知识,特别感觉"大帅老猿"和"胖达老师"带我入门! 今天来和大家一起讲讲我建模的故事!顺便教大家一起实现建模自由! 一.首先下载一个 ...
vue + threejs实战，实现3D 360度旋转查看物体
一. 官方文档地址:three.js 二. 简介 threejs是JavaScript编写的 WebGL 第三方库,提供了非常多的3D显示功能.它是一款运行在浏览器中的 3D ...
threejs坑记录-笔记
雪花注意depthTest: false 否则会出现有transparent无效 const createSnow = () => {let map = new THREE.TextureLo ...
vue + threejs 实现场景环境贴图，模型高光显示效果
<template><div class="modelsBox"><div class="modelsBox_wrapper"&g ...
小程序使用threejs第五篇—室内效果3D文件的加载，可旋转查看上下四周效果
在上一篇小程序使用threejs第四篇-加载3D模型中我们介绍了threejs加载几种3D模型,包括gltf.obj.glb等格式.但好像一直没有用的场景,最直观的场景应该是室内效果了. 解决思路室 ...
Three.js入门（参考胖达老师）｜大帅老猿threejs特训
Three.js入门 (参考胖达老师的B站视频) | 大帅老猿threejs特训第一天 Three.js基础空间坐标系右手坐标系,threejs朝上是Y,朝右是X,朝屏幕外面是Z,Ble ...

Threejs HDR

Threejs HDR

examples相关案例

加载单张HDR纹理贴图(`RGBELoader.js`)

加载6张HDR环境贴图(`HDRCubeTextureLoader.js`)

Threejs HDR相关推荐

最新文章

热门文章

Threejs HDR

Threejs HDR

examples相关案例

加载单张HDR纹理贴图(RGBELoader.js)

加载6张HDR环境贴图(HDRCubeTextureLoader.js)

Threejs HDR相关推荐

最新文章

热门文章

加载单张HDR纹理贴图(`RGBELoader.js`)

加载6张HDR环境贴图(`HDRCubeTextureLoader.js`)