参考资料:threejs中文网

threejs qq交流群:814702116

three.js环境贴图hdr格式

有时候,美术也会提供hdr格式图片作为环境贴图使用。

下面给大家说下,怎么加载解析hdr格式的图像作为网格模型Mesh材质的环境贴图.envMap

扩展库RGBELoader.js

文件node_modules,**three/examples/jsm/loaders/**目录,你可以找到一个文件RGBELoader.js

import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';

加载hdr图像

加载hdr图像,设置为环境贴图

const rgbeLoader = new RGBELoader();
rgbeLoader.load('./envMap.hdr', function (envMap) {
    scene.environment = envMap;
    // hdr作为环境贴图生效,设置.mapping为EquirectangularReflectionMapping
    envMap.mapping = THREE.EquirectangularReflectionMapping;
})
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐