[Threejs]环境光与HDR贴图

本文主要记录了一次通过结合环境光与HDR贴图来实现3D场景的渲染。(Threejs版本 r0.118.0)

依赖包的导入

import {Scene,PerspectiveCamera,Color,WebGLRenderer,LinearToneMapping,AmbientLight,Vector3,Group,PMREMGenerator,UnsignedByteType,HemisphereLight,
} from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; // 控制器
import { GLTFLoader, GLTF } from 'three/examples/jsm/loaders/GLTFLoader'; // gltf文件加载
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';

添加环境光

// this.scene = ...
this.scene.add(new AmbientLight(0xffffff, 1));const hemiLight = new HemisphereLight(0xffffff, 0x000000, 1);
hemiLight.position.set(0, 100, 0);
this.scene.add(hemiLight);

设置WebGLRenderer

// this.threeContainer = document.getElementById(
//            'xxxx'
//        ) as HTMLElement;
this.renderer = new WebGLRenderer({ antialias: true, alpha: true });
this.renderer.context.getShaderInfoLog = () => '';
this.renderer.setSize(this.threeContainer.scrollWidth,this.threeContainer.scrollHeight
);
this.renderer.setPixelRatio(devicePixelRatio);
this.renderer.toneMapping = LinearToneMapping;
this.renderer.toneMappingExposure = 1; // 曝光系数

加载HDR贴图


// import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
const pmremGenerator = new PMREMGenerator(this.renderer); // 使用hdr作为背景色
pmremGenerator.compileEquirectangularShader();const scene = this.scene;
new RGBELoader().setDataType(UnsignedByteType).load('/env/railway_bridge_02_1k.hdr', function (texture) {const envMap = pmremGenerator.fromEquirectangular(texture).texture;// envMap.isPmremTexture = true;pmremGenerator.dispose();scene.environment = envMap; // 给场景添加环境光效果scene.background = envMap; // 给场景添加背景图});

加载GLTF模型

// ...
this.loader = new GLTFLoader();
this.loader.load('/model/haballoon.glb', (obj: GLTF) => {obj.scene.name = 'haballoon';obj.scene.scale.set(10, 10, 10);this.scene.add(obj.scene);
});

渲染效果

资源文件参考:
模型： https://sketchfab.com/3d-models/hot-air-balloon-0ac634b7c45b4269ab6c570283b9617c
HDRI: https://hdrihaven.com/hdri/?h=railway_bridge_02

[Threejs]环境光与HDR贴图相关推荐

threejs基础下：贴图资源加载与光照
优先更新个人博客,求关注~~ 个人博客:https://jinglecjy.github.io/ 加载器Loaders 加载器是threejs中很重要的一个步骤,可以用于加载纹理/图片/模型/音频等资 ...
vue + threejs 实现场景环境贴图，模型高光显示效果
<template><div class="modelsBox"><div class="modelsBox_wrapper"&g ...
threejs 粒子系统和材质贴图
例子系统 <!DOCTYPE html> <html lang="en"><head><title>three.js webgl - ...
Threejs使用白底贴图时，显示出来的图片为灰底
使用texture加载白色底图片作为MeshBasicMaterial的map,显示出来的图片则变为灰底,还未找到原因,但是是 this.renderer.toneMapping = THREE.AC ...
threejs正方体六面贴图
给正方体六面贴上不同纹理最终效果目录结构 index.html <!DOCTYPE html> <html lang="en"> <head> ...
threejs -- 文本制成精灵贴图（弹幕效果）
效果: 代码: 注:input标签不能与OrbitControls.js共同使用 <html lang="en"><head><title>th ...
threejs学习网址记录
14.thingJS:https://www.thingjs.com/guide/city2/?campaign_id=636109562&utm_campaign=ThingJS&u ...
李翔C4D案例教程笔记（未完）
闹钟建模: 铃铛: 球体 >> 半球体对称方法: 用对称生成器用Ctrl复制后,更改坐标,先将对象坐标改为世界坐标,关于X轴对称,就将X轴的值相反,将相应旋转值相反金属提手细节: ...
元宇宙 3D 开荒场 - 探味奇遇记
项目概览及开发设计这次尝鲜的业务伙伴是食品部门,最终落地项目是"探味奇遇记":用户使用左边"joystick"操作 IP 人物,前往自己感兴趣的美食馆.调整当 ...
threejs视频教程学习（4）：贴图、材质、光线
获取材质贴图(3d模型) https://www.poliigon.com/ https://www.textures.com/ https://www.qingmo.com/ https://pix ...

[Threejs]环境光与HDR贴图

[Threejs]环境光与HDR贴图相关推荐

最新文章

热门文章