three.js通过CubeTexture加载环境贴图，和RGBELoader加载器加载hdr环境贴图

news2024/12/27 12:19:50

一、使用CubeTexture进行环境贴图

1.CubeTexture使用介绍

Three.js中可以通过使用CubeTexture进行环境贴图，CubeTexture需要将6张图片（正面、反面、上下左右）包装成一个立方体纹理。下面是一个简单的例子：

首先需要加载六张贴图：

var urls = [
    'px.png', 'nx.png',
    'py.png', 'ny.png',
    'pz.png', 'nz.png'
];
var textureCube = new THREE.CubeTextureLoader().load(urls);
textureCube.format = THREE.RGBFormat;

然后将这个纹理应用到场景的背景中：

scene.background = textureCube;

或者将它应用到一个物体上：

var material = new THREE.MeshBasicMaterial( { envMap: textureCube } );

2. 使用CubeTexture实现球体和街道环境贴图

接下来我们就动手实践一下吧：

在代码中，可以先创建一个CubeTexture并将其应用到场景的背景中：

// 设置cube纹理加载器
const cubeTextureLoader = new THREE.CubeTextureLoader(); // 立方体纹理加载器
const envMapTexture = cubeTextureLoader.load([ // 设置环境贴图
  "textures/environmentMaps/3/px.jpg",
  "textures/environmentMaps/3/nx.jpg",
  "textures/environmentMaps/3/py.jpg",
  "textures/environmentMaps/3/ny.jpg",
  "textures/environmentMaps/3/pz.jpg",
  "textures/environmentMaps/3/nz.jpg",
]);
// 给场景添加背景
scene.background = envMapTexture;

然后创建一个具有高光部分的材质，并将envMap参数设置为之前创建的环境贴图：

// 创建球体
const sphereGeometry = new THREE.SphereBufferGeometry(1, 20, 20); // 参数：半径、水平分段数、垂直分段数
const material = new THREE.MeshStandardMaterial({ // 创建材质
  metalness: 0.7, // 金属度
  roughness: 0.1, // 粗糙度
  envMap: envMapTexture, // 环境贴图
});
const sphere = new THREE.Mesh(sphereGeometry, material); // 根据几何体和材质创建球体
scene.add(sphere); // 添加到场景中

这样，在场景中移动相机时就可以看到物体和房屋内墙壁、地面反射出周围环境的效果。

  • 如图：
    在这里插入图片描述
  • 完整代码如下：
import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

// 1、创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x003261); // 将背景色设置为蓝色

// 2、创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 设置cube纹理加载器
const cubeTextureLoader = new THREE.CubeTextureLoader(); // 立方体纹理加载器
const envMapTexture = cubeTextureLoader.load([ // 设置环境贴图
  "textures/environmentMaps/3/px.jpg",
  "textures/environmentMaps/3/nx.jpg",
  "textures/environmentMaps/3/py.jpg",
  "textures/environmentMaps/3/ny.jpg",
  "textures/environmentMaps/3/pz.jpg",
  "textures/environmentMaps/3/nz.jpg",
]);
// 创建球体
const sphereGeometry = new THREE.SphereBufferGeometry(1, 20, 20); // 参数：半径、水平分段数、垂直分段数
const material = new THREE.MeshStandardMaterial({ // 创建材质
  metalness: 0.7, // 金属度
  roughness: 0.1, // 粗糙度
  envMap: envMapTexture, // 环境贴图
});
const sphere = new THREE.Mesh(sphereGeometry, material); // 根据几何体和材质创建球体
scene.add(sphere); // 添加到场景中
 

// 给场景添加背景
scene.background = envMapTexture;

// 灯光
// 环境光
// 参数 1：光源颜色 2：光源强度
const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
scene.add(light); // 将光源添加到场景中
//直线光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 参数：光源颜色、光源强度
directionalLight.position.set(10, 10, 10); // 设置光源位置
scene.add(directionalLight); // 将光源添加到场景中


// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);


// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;

function render() {
  controls.update();
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
  //   console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

二、RGBELoader加载器加载hdr环境贴图

1. RGBELoader加载器使用介绍

RGBELoader是一个three.js中的纹理加载器，它可以加载HDR格式的纹理。HDR格式有更高的精度和更广的颜色范围，能够更好地表现真实的光照和阴影等细节。RGBELoader的使用方法如下：

  1. 导入RGBELoader模块：
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
  1. 创建RGBELoader实例：
const rgbeLoader = new RGBELoader();
  1. 加载HDR纹理：
rgbeLoader.load(
  '/path/to/texture.hdr',
  texture => {
    // do something with loaded texture
  },
  undefined,
  error => {
    console.error( 'Error loading HDR texture', error );
  }
);

加载器使用的第一个参数是纹理的路径，第二个参数是加载成功后的回调函数。在回调函数中可以获取加载成功后的texture对象并进行相关操作。第三个参数是加载进度的回调函数，第四个参数是加载失败的回调函数。

举例：

下面是一个简单的three.js场景，使用RGBELoader加载HDR纹理并将其用作环境贴图。

import * as THREE from 'three';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set( 0, 0, 5 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const rgbeLoader = new RGBELoader();
rgbeLoader.load(
  '/path/to/texture.hdr',
  texture => {
    const pmremGenerator = new THREE.PMREMGenerator( renderer );
    pmremGenerator.compileEquirectangularShader();
    const envMap = pmremGenerator.fromEquirectangular( texture ).texture;
    scene.background = envMap;
    scene.environment = envMap;
    texture.dispose();
    pmremGenerator.dispose();
  },
  undefined,
  error => {
    console.error( 'Error loading HDR texture', error );
  }
);

const controls = new OrbitControls( camera, renderer.domElement );

function animate() {
  requestAnimationFrame( animate );
  controls.update();
  renderer.render( scene, camera );
}
animate();

上面的代码中，除了RGBELoader之外还使用了PMREMGenerator贴图产生器和OrbitControls控制器。通过PMREMGenerator将HDR纹理生成立方体贴图，并将其用作背景和环境光照。OrbitControls控制器用于交互式控制摄像机。

2. 异步加载hdr实战

前面介绍了同步用法，这里使用异步加载的方式实现一个球体和周围环境的hdr加载贴图
效果如图：
在这里插入图片描述

  • 核心代码
// 导入hdr加载器
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";

// 加载hdr环境图
const rgbeLoader = new RGBELoader();
rgbeLoader.loadAsync("textures/hdr/004.hdr").then((texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping; // 设置映射类型
  scene.background = texture; // 设置背景
  scene.environment = texture; // 设置环境贴图
});
  • 整体代码如下：
import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入hdr加载器
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";

// 目标：加载hdr环境图


// 加载hdr环境图
const rgbeLoader = new RGBELoader();
rgbeLoader.loadAsync("textures/hdr/004.hdr").then((texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping; // 设置映射类型
  scene.background = texture; // 设置背景
  scene.environment = texture; // 设置环境贴图
});

// 1、创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x003261); // 将背景色设置为蓝色

// 2、创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 创建球体
const sphereGeometry = new THREE.SphereBufferGeometry(1, 20, 20); // 参数：半径、水平分段数、垂直分段数
const material = new THREE.MeshStandardMaterial({ // 创建材质
  metalness: 0.7, // 金属度
  roughness: 0.1, // 粗糙度
});
const sphere = new THREE.Mesh(sphereGeometry, material); // 根据几何体和材质创建球体
scene.add(sphere); // 添加到场景中
 
// 灯光
// 环境光
// 参数 1：光源颜色 2：光源强度
const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
scene.add(light); // 将光源添加到场景中
//直线光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 参数：光源颜色、光源强度
directionalLight.position.set(10, 10, 10); // 设置光源位置
scene.add(directionalLight); // 将光源添加到场景中

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;

function render() {
  controls.update();
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
  //   console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/686267.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

关于随机梯度下降算法及其改进方向

关于随机梯度下降算法及其改进方向

回归与分类等监督学习是机器学习中最常见的一类学习问题, 它提供了包含输入数据和目标数据的训练数据集。为了探讨输入与目标之间的关系，需要先建立含参数的表示模型，再通过最小化所有样本的平均损失函数来获得最优的参数, 此处的优化模型通常为经验风险…
阅读更多...
【SpringMVC】统一异常处理 前后台协议联调 拦截器

【SpringMVC】统一异常处理 前后台协议联调 拦截器

1，统一异常处理 1. 问题描述 在讲解这一部分知识点之前，我们先来演示个效果，修改BookController类的getById方法 GetMapping("/{id}") public Result getById(PathVariable Integer id) {//手动添加一个错误信息if(id1){int i …
阅读更多...
那些曾经考过的turtle绘图题(16~20)

那些曾经考过的turtle绘图题(16~20)

【编程实现绘图 -16】 使用turtle绘制如右图1中所示的图形。 上边是一个红色轮廓、黄色填充的边长为300的等边三角形，下边是一个绿色填充、半径为150的半圆。 要求： 1）画布背景为白色，等边三角形为红色轮廓、黄色填充； 2）半圆为绿色填充、且与等边三角形在底边的中点处相…
阅读更多...
OpenCV——总结《车牌识别》之《常用的函数介绍》

OpenCV——总结《车牌识别》之《常用的函数介绍》

1. cv2.getStructuringElement(cv2.MORPH_RECT, (10, 10))element cv2.getStructuringElement(shape, ksize[, anchor])用于创建形态学操作的结构元素（structuring element）。 参数解释： shape：结构元素的形状，可以…
阅读更多...
k近邻算法

k近邻算法

文章目录 一、K近邻算法(K Nearest Neighbor algorithm, KNN)1.概念2.流程3.问题——不能用来图像分类1）图像分类2）为什么不能用来图像分类3）数据库样例：CIFAR-10 二、HEU的K近邻算法1.概念2.伪代码3.k近邻算法是非线性分类算法4.…
阅读更多...
java项目之教学视频点播系统ssm

java项目之教学视频点播系统ssm

风定落花生，歌声逐流水，大家好我是风歌，混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的教学视频点播系统。项目源码以及部署相关请联系风歌，文末附上联系信息 。 💕💕作者：风歌&…
阅读更多...
SVM支持向量机理解_KKT条件_拉格朗日对偶_SMO算法代码

SVM支持向量机理解_KKT条件_拉格朗日对偶_SMO算法代码

目录 一、支持向量机基本型（线性可分） 1.1 问题描述 1.2 参考资料 二、KKT条件 2.1 KKT条件的几个部分 2.1.1 原始条件 2.1.2 梯度条件 2.1.3 松弛互补条件 2.1.4 KKT条件小结 2.2 参考资料 三、对偶形式 3.1 由原始问题到对偶问题 3.2 对偶…
阅读更多...
ubuntu双系统安装

ubuntu双系统安装

1. 下载系统 国内镜像 http://mirrors.ustc.edu.cn/ubuntu-releases/2. U盘启动盘 Rufus 软件 制作U盘启动盘 Rufus 链接 https://rufus.en.softonic.com/3. 磁盘中准备一定未分配磁盘 我准备了100G 4. BIOS启动项选择为usb启动（每个品牌进BIOS不同&#xff0…
阅读更多...
win下 Nginx.conf 路径配置注意事项(win)

win下 Nginx.conf 路径配置注意事项(win)

win下 Nginx.conf 路径配置注意事项 文章目录 可使用win绝对路径路径不能包含中文路径不能包含空格路径中的"\n"会被识别成换行贴一段正确配置的Nginx.conf代码 可使用win绝对路径 网上有种说法是win下Nginx不能设置绝对路径，但我在Nginx-1.24.0下是设置…
阅读更多...
在Windows11中安装WSL2(Ubuntu20.04)并配置Anaconda环境

在Windows11中安装WSL2(Ubuntu20.04)并配置Anaconda环境

在Windows11中安装WSL2(Ubuntu20.04)并配置Anaconda环境 文章目录 在Windows11中安装WSL2(Ubuntu20.04)并配置Anaconda环境说在前面1. 检查开启CPU虚拟化和虚拟机平台2. 安装Ubuntu20.043. Vscode连接WSL2(Ubuntu20.04)4. Anaconda开发环境的搭建5. Vscode 访问 notebook结尾 说…
阅读更多...
高效视觉识别的动态感知器

高效视觉识别的动态感知器

文章目录 Dynamic Perceiver for Efficient Visual Recognition摘要本文方法实验结果 Dynamic Perceiver for Efficient Visual Recognition 摘要 Early exiting已成为提高深度网络推理效率的一种很有前途的方法。通过构建具有多个分类器(出口)的模型，可以在较早的…
阅读更多...
佩戴舒适的蓝牙耳机有哪些？公认佩戴舒适性不错的蓝牙耳机推荐

佩戴舒适的蓝牙耳机有哪些？公认佩戴舒适性不错的蓝牙耳机推荐

​都2023年了，不会还有人没有一款蓝牙耳机吧？随着蓝牙耳机的增长，越来越多人不知道如何挑选蓝牙耳机了，蓝牙耳机除了音质表现要好之外，还有就是佩戴舒适性不能差，防水性能要有，接下来&#xff0…
阅读更多...
WPF 的几种模板概念

WPF 的几种模板概念

WPF中有三大模板ControlTemplate,ItemsPanelTemplate,DataTemplate.其中ControlTemplate和ItemsPanelTemplate是控件模板，DataTemplate是数据模板，他们都派生自FrameworkTemplate抽象类。 看看如下继承图： ControlTemplate <Style TargetType="Button">&…
阅读更多...
MiniGPT-4 模型学习与实战

MiniGPT-4 模型学习与实战

1 前言 MiniGPT-4 是一个冻结的视觉编码器(Q-Former&ViT)与一个冻结的 文本生成大模型&#xff08;Vicuna&#xff0c;江湖人称&#xff1a;小羊驼&#xff09; 进行对齐造出来的。 MiniGPT-4 具有许多类似于 GPT-4 的能力, 图像描述生成、从手写草稿创建网站等MiniGPT-4…
阅读更多...
bitbucket 配置 SSH keys

bitbucket 配置 SSH keys

目录 问题 配置方法 生成SSH key 添加SSH key至SSH Agent 添加公钥至Bitbucket 执行Git clone 问题 拉取bitbucket上的代码需要配置SSH key Configure SSH and two-step verification | Bitbucket Cloud | Atlassian Support 以Linux为例&#xff1a; Set up persona…
阅读更多...
WebSocket 的介绍及基本使用

WebSocket 的介绍及基本使用

websocket 什么是 websocket ? https://websocket.org/ 是一种网络通信协议&#xff0c;和 HTTP 协议 一样。 为什么需要websocket ? 因为 HTTP 协议有一个缺陷&#xff1a;通信只能由客户端发起。 了解 websocket api含义 基于原生的 websocket 完成服务端和客户端的通…
阅读更多...
使用指针突破类的private限制

使用指针突破类的private限制

使用指针突破类的private限制 继承的内存模型使用指针再子类中访问父类的私有变量 继承的内存模型 创建派生类对象时只会申请一次内存&#xff0c;派生类对象包含了基类对象的内存空间&#xff0c;this指针相同的。创建派生类对象时&#xff0c;先初始化基类对象&#xff0c;再…
阅读更多...
Oracle数据库安全评估工具（DBSAT）

Oracle数据库安全评估工具（DBSAT）

目录&#xff1a; 工具概述&#xff1a;先决条件&#xff1a;一、支持的操作系统及DB版本&#xff1a;1.支持的操作系统2.支持的数据库版本 二、评估工具的前提条件&#xff1a;1.所需安装包及工具2.Collector的先决条件3.Reporter的先决条件4.Discoverer的先决条件 工具下载&a…
阅读更多...
23vue3铺垫知识——ES6模块化与异步编程高级用法

23vue3铺垫知识——ES6模块化与异步编程高级用法

文章目录 一、ES6模块化1、回顾:nodejs中如何实现模块化2、前端模块化规范的分类3、什么是ES6模块化规范4、在nodeis中体验ES6模块化5、ES6模块化的基本语法5.1 默认导出与默认导入5.2 按需导出与按需导入5.3直接导入并执行模块中的代码 二、Promise1、回调地狱1.1 如何解决回调…
阅读更多...
iptables 限制转发

iptables 限制转发

概述 可以通过设置内核参数来启动或停止内核的转发 sysctl -w net.ipv4.ip_forward1当开启了Linux内核转发 cat /proc/sys/net/ipv4/ip_forward开启内核转发后&#xff0c;当Linux主机收到不属于自己IP的数据包时&#xff0c;将会根据主机上配置的路由表进行转发&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023