Three.js中文网 Three.js中文网
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
Web3D系统课程视频
  • 0.学前说明

  • 1.Vue+Three.js基础

  • 2.场景搭建Three+Blender

  • 3.渲染效果提升(材质光照)

    • 1. 光照、环境贴图
    • 2. 环境贴图hdr格式
      • 3. 天空盒全景图作为背景
      • 4. threejs深度冲突
      • 5. 标准网格材质(金属)
      • 6. 物理网格材质(玻璃)
      • 7. dat.gui辅助调试物理材质
      • 8. dat.gui辅助调试光照参数
      • 9. dat.gui调节平行光照射角度
    • 4.渲染性能、模型压缩

    • 5.封装、进度条、切视角

    • js 3D可视化
    • 3.渲染效果提升(材质光照)
    郭隆邦
    2024-03-12
    目录

    2. 环境贴图hdr格式

    # 环境贴图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;
    })
    
    1. 光照、环境贴图
    3. 天空盒全景图作为背景

    ← 1. 光照、环境贴图 3. 天空盒全景图作为背景→

    Theme by Vdoing | Copyright © 2016-2025 豫ICP备16004767号-2
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式