three.js 细一万倍教程 从入门到精通（三）

news2025/1/19 16:31:04

目录

五、详解PBR材质纹理

5.1、详解PBR物理渲染

5.2、标准网格材质与光照物理效果

5.3、置换贴图与顶点细分设置

5.4、设置粗糙度与粗糙度贴图

5.5、设置金属度与金属贴图

5.6、法线贴图应用

5.7、如何获取各种类型纹理贴图

5.8、纹理加载进度情况

单张图片加载

多张图片加载

5.9、详解环境贴图

5.10、经纬线映射贴图与HDR

经纬线映射贴图

HDR

六、详解灯光与阴影

6.1、灯光与阴影的关系与设置

6.2、平行光阴影属性与阴影相机原理

五、详解PBR材质纹理

5.1、详解PBR物理渲染

灯光属性：直接照明、间接照明、直接高光、间接高光、阴影、环境光闭塞。

表面属性：基础色、法线、高光、粗糙度、金属度。

5.2、标准网格材质与光照物理效果

案例1：【环境光】照射物体

// 灯光（环境光）
// 参数分别为光的颜色和光的强度
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light)

案例2：【平行光】照射物体

// 直线光源
const directionaLight = new THREE.DirectionalLight(0xffffff, 0.5);
// 设置光从哪个位置直射
directionaLight.position.set(10, 10, 10);
scene.add(directionaLight)

5.3、置换贴图与顶点细分设置

首先准备一张贴图

黑色还是不动，浅灰格外突出，特别是门把手和两块铁片要突出。

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load("./textures/door/color.jpg");
const doorAplhaTexture = textureLoader.load("./textures/door/alpha.jpg");
const doorAoTexture = textureLoader.load("./textures/door/ambientOcclusion.jpg")
// 导入置换贴图
const doorHeightTexture = textureLoader.load("./textures/door/height.jpg")

const cubeGeometry = new THREE.BoxGeometry(1, 1, 1, 200, 200);
// 材质
const material = new THREE.MeshStandardMaterial({
    color: "#ffff00",
    map: doorColorTexture,
    alphaMap: doorAplhaTexture,
    transparent: true,
    aoMap: doorAoTexture,
    aoMapIntensity: 1,
    displacementMap: doorHeightTexture,
    displacementScale: 0.1 // 默认是1，深浅度，0.1代表稍微突出一点
})
const cube = new THREE.Mesh(cubeGeometry, material);
scene.add(cube);

// 灯光（环境光）
// 参数分别为光的颜色和光的强度
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light)

5.4、设置粗糙度与粗糙度贴图

// 添加物体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1, 200, 200);
// 材质
const material = new THREE.MeshStandardMaterial({
    color: "#ffff00",
    map: doorColorTexture,
    alphaMap: doorAplhaTexture,
    transparent: true,
    aoMap: doorAoTexture,
    aoMapIntensity: 1,
    displacementMap: doorHeightTexture,
    displacementScale: 0.1,
    roughness: 0 // 设置粗糙度为0，直接光滑到底
})
const cube = new THREE.Mesh(cubeGeometry, material);
scene.add(cube);

// 灯光（环境光）
// 参数分别为光的颜色和光的强度
const light = new THREE.AmbientLight(0xffffff);
scene.add(light)

// 直线光源
const directionaLight = new THREE.DirectionalLight(0xffffff);
// 设置光从哪个位置直射
directionaLight.position.set(10, 10, 10);
scene.add(directionaLight)

假如我们想单独设置金属片粗糙，门光滑怎么办？

使用粗糙度贴图

白色代表粗糙度为1，黑色代表粗糙度为0。

5.5、设置金属度与金属贴图

现在我们想让金属片完全像金属，门不用。

准备金属贴图

黑色完全不用金属材质，而白色完全用金属材质。

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load("./textures/door/color.jpg");
const doorAplhaTexture = textureLoader.load("./textures/door/alpha.jpg");
const doorAoTexture = textureLoader.load("./textures/door/ambientOcclusion.jpg")
// 导入置换贴图
const doorHeightTexture = textureLoader.load("./textures/door/height.jpg");
// 粗糙度贴图
const doorRoughnessTexture = textureLoader.load("./textures/door/roughness.jpg");
// 金属贴图
const doorMetalnessTexture = textureLoader.load("./textures/door/metalness.jpg");

// 添加物体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1, 200, 200);
// 材质
const material = new THREE.MeshStandardMaterial({
    color: "#ffff00",
    map: doorColorTexture,
    alphaMap: doorAplhaTexture,
    transparent: true,
    aoMap: doorAoTexture,
    aoMapIntensity: 1,
    displacementMap: doorHeightTexture,
    displacementScale: 0.1,
    // roughness: 0, // 设置粗糙度为0，直接光滑到底
    roughnessMap: doorRoughnessTexture,
    metalness: 1, // 金属度打满
    metalnessMap: doorMetalnessTexture // 引入金属贴图
})
const cube = new THREE.Mesh(cubeGeometry, material);
scene.add(cube);

// 灯光（环境光）
// 参数分别为光的颜色和光的强度
const light = new THREE.AmbientLight(0xffffff);
scene.add(light)

// 直线光源
const directionaLight = new THREE.DirectionalLight(0xffffff);
// 设置光从哪个位置直射
directionaLight.position.set(10, 10, 10);
scene.add(directionaLight)

5.6、法线贴图应用

上一节中虽然体现出了金属的质感，但还不够完美，我们发现在光折射的时候，门和金属片并没有凹凸不平的样子，都是一个平面的感觉。

我们再引入一个凹凸感（法线）的贴图

每个颜色都代表不同的朝向，相同的颜色相同朝向。

5.7、如何获取各种类型纹理贴图

网站：Poliigon - Textures, Models and HDRIs for 3D rendering

我们下载个免费的，解压一下

5.8、纹理加载进度情况

单张图片加载

let event = {}
// 单张纹理图的加载进度（color.jpg）
event.onLoad = function () {
    console.log("图片加载完成");
}
event.onProgress = function (e) {
    console.log("图片加载进度", e)
}
event.onError = function (e) {
    console.log("图片加载出现错误", e)
}

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load("./textures/door/color.jpg", event.onLoad, event.onProgress, event.onError);

多张图片加载

let event = {}
event.onLoad = function () {
    console.log("图片加载完成");
}
event.onProgress = function (url, num, total) {
    console.log("图片加载路径", url)
    console.log("图片加载进度", num)
    console.log("图片总数", total)
    console.log("图片加载进度百分比", (num / total * 100).toFixed(2))
}
event.onError = function (e) {
    console.log("图片加载出现错误", e)
}

// 设置加载管理器
const loadingManager = new THREE.LoadingManager(event.onLoad, event.onProgress, event.onError);

// 导入纹理
const textureLoader = new THREE.TextureLoader(loadingManager);
const doorColorTexture = textureLoader.load("./textures/door/color.jpg");
const doorAplhaTexture = textureLoader.load("./textures/door/alpha.jpg");
const doorAoTexture = textureLoader.load("./textures/door/ambientOcclusion.jpg")
// 导入置换贴图
const doorHeightTexture = textureLoader.load("./textures/door/height.jpg");
// 粗糙度贴图
const doorRoughnessTexture = textureLoader.load("./textures/door/roughness.jpg");
// 金属贴图
const doorMetalnessTexture = textureLoader.load("./textures/door/metalness.jpg");
// 法线贴图
const doorNormalTexture = textureLoader.load("./textures/door/normal.jpg");

5.9、详解环境贴图

// 设置cube纹理加载器
const cubeTextureLoader = new THREE.CubeTextureLoader();
const envMapTexture = cubeTextureLoader.load([
    "./textures/environmentMaps/1/px.jpg",
    "./textures/environmentMaps/1/nx.jpg",
    "./textures/environmentMaps/1/py.jpg",
    "./textures/environmentMaps/1/ny.jpg",
    "./textures/environmentMaps/1/pz.jpg",
    "./textures/environmentMaps/1/nz.jpg",
]);
const sphereGeometry = new THREE.SphereGeometry(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);

5.10、经纬线映射贴图与HDR

经纬线映射贴图

HDR

import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader'

// 加载HDR环境图
const rgbeLoader = new RGBELoader();
rgbeLoader.loadAsync("./textures/hdr/002.hdr").then((texture) => {
    // 如果不设置映射mapping。则HDR环境图不会动
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.background = texture;
    // 设置环境图（物体小球）
    scene.environment = texture;
});

六、详解灯光与阴影

6.1、灯光与阴影的关系与设置

目标：灯光与阴影

1、材质要满足对光照有反应。

2、设置渲染器开启阴影的计算 renderer.shadowMap.enabled = true;

3、设置光照投射阴影 directionaLight.castShadow = true;

4、设置物体投射阴影 sphere.castShadow = true;

5、设置物体接收阴影 plane.receiveShadow = true;

// 圆
const sphereGeometry = new THREE.SphereGeometry(1, 20, 20);
const material = new THREE.MeshStandardMaterial();
const sphere = new THREE.Mesh(sphereGeometry, material);
// 投射阴影
sphere.castShadow = true;
scene.add(sphere);

// 创建平面
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const plane = new THREE.Mesh(planeGeometry, material);
plane.position.set(0, -1, 0);
plane.rotation.x = -Math.PI / 2;
// 接收阴影
plane.receiveShadow = true;
scene.add(plane);

// 直线光源
const directionaLight = new THREE.DirectionalLight(0xffffff, 0.5);
// 设置光从哪个位置直射
directionaLight.position.set(10, 10, 10);
// 设置该平行光会产生动态阴影
directionaLight.castShadow = true;
scene.add(directionaLight);


// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 开启场景中的阴影贴图
renderer.shadowMap.enabled = true;
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

6.2、平行光阴影属性与阴影相机原理

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

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

相关文章

C++赛马游戏

C++赛马游戏

题目&#xff1a; 代码&#xff1a; #include<iostream> using namespace std; int a,b,c; int main(){cin>>a>>b>>c;if(a>b&&a>c&&b>c){//a>b>ccout<<c<<" "<<b<<" "&…
阅读更多...
docker 3.1 镜像

docker 3.1 镜像

docker 3.1 镜像命令 拉取镜像 docker pull debian #从 Docker Hub 拉取名为 debian 的镜像docker pull hello-world #从 Docker Hub 拉入名为 hello-world 的镜像‍ 运行镜像/容器 docker run hello-world ‍ 查看本地所有的镜像 docker images​​ 容器生成镜像…
阅读更多...
Gitee的使用教程（简单详细）

Gitee的使用教程（简单详细）

1.安装git&#xff08;我的电脑自带git&#xff0c;我没弄这步QAQ&#xff09; Git (git-scm.com)https://git-scm.com/ 安装好后在桌面点击鼠标右键会出现git GUI 和 git Bash&#xff08;没有的话点击显示更多选项&#xff09; 2.去gitee上注册一个账号 工作台 - Gitee.co…
阅读更多...
LeetCode、208. 实现 Trie (前缀树)【中等，自定义数据结构】

LeetCode、208. 实现 Trie (前缀树)【中等，自定义数据结构】

文章目录 前言LeetCode、208. 实现 Trie (前缀树)【中等&#xff0c;自定义数据结构】题目链接与分类思路 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客之星、阿里云平台优质作者、专注于Java后端技术领…
阅读更多...
C# WinFrom+AspNetCore WebApi实现大文件下载与上传

C# WinFrom+AspNetCore WebApi实现大文件下载与上传

客户端UI: 服务端WebApi: 客户端代码&#xff1a; App.config&#xff1a; <?xml version"1.0" encoding"utf-8" ?> <configuration><appSettings><add key"WebApi" value"https://localhost:7285"/><…
阅读更多...
Vulnhub靶场 DC-8

Vulnhub靶场 DC-8

目录 一、环境搭建 二、信息收集 1、主机发现 2、指纹识别 三、漏洞复现 1、SQL注入 sqlmap工具 2、dirsearch目录探测 3、反弹shell 4、提权 exim4 5、获取flag 四、总结 一、环境搭建 Vulnhub靶机下载&#xff1a; 官网地址&#xff1a;https://download.vulnhub.com/dc/DC-…
阅读更多...
Java基于SpringBoot+vue的租房网站,附源码

Java基于SpringBoot+vue的租房网站,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…
阅读更多...
《UE5_C++多人TPS完整教程》学习笔记5 ——《P6 在线子系统（Online Subsystem）》

《UE5_C++多人TPS完整教程》学习笔记5 ——《P6 在线子系统（Online Subsystem）》

本文为B站系列教学视频 《UE5_C多人TPS完整教程》 —— 《P6 在线子系统&#xff08;Online Subsystem&#xff09;》 的学习笔记&#xff0c;该系列教学视频为 Udemy 课程 《Unreal Engine 5 C Multiplayer Shooter》 的中文字幕翻译版&#xff0c;UP主&#xff08;也是译者&a…
阅读更多...
华为机考入门python3--（12）牛客12-字符串反转

华为机考入门python3--（12）牛客12-字符串反转

分类&#xff1a;字符串 知识点&#xff1a; 字符串是否为空 if not my_str 字符串逆序 my_str[::-1] 题目来自【牛客】 def reverse_string(s): # 判断字符串是否为空或只包含空格 if not s.strip(): return "" # 使用Python的切片语法反转字符串 re…
阅读更多...
【开源】基于JAVA+Vue+SpringBoot的就医保险管理系统

【开源】基于JAVA+Vue+SpringBoot的就医保险管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 科室档案模块2.2 医生档案模块2.3 预约挂号模块2.4 我的挂号模块 三、系统展示四、核心代码4.1 用户查询全部医生4.2 新增医生4.3 查询科室4.4 新增号源4.5 预约号源 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVue…
阅读更多...
[职场] 大厂群面的基本题型 #学习方法#其他

[职场] 大厂群面的基本题型 #学习方法#其他

大厂群面的基本题型 大厂群面的基本题型 群面&#xff0c;又叫做“无领导小组面试”。历年来是企业校招时&#xff0c;进行大批量刷人的有效方法。流行于互联网、快消、银行、四大等多个行业。因为难度大、情况复杂、淘汰率高&#xff0c;又被称为“死亡面试”。 无领导小组…
阅读更多...
蓝牙BLE学习-GAP

蓝牙BLE学习-GAP

1.概述 GAP层&#xff08;Generic access profile-通用访问配置文件&#xff09;。GAP是对LL层payload&#xff08;有效数据包&#xff09;如何进行解析的两种方式的一种&#xff0c;而且也是最简单的一种。GAP简单的对LL payload进行一些规范和定义&#xff0c;因此GAP能实现的…
阅读更多...
适配器模式：接口转换的艺术，让不匹配成为过去式

适配器模式：接口转换的艺术，让不匹配成为过去式

适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;它通过将一个类的接口转换成客户期望的另一个接口&#xff0c;使得原本接口不兼容的类可以一起工作。在Java中&#xff0c;适配器模式可以通过实现一个适配器类来实现两个不兼容接口之间的转…
阅读更多...
第七篇：SQL语法-DML-数据操作语言

第七篇：SQL语法-DML-数据操作语言

DML英文全称是Data Manipulation Language(数据操作语言)&#xff0c;用来对数据库中表的数据记录进行增删改操作。它主要包含以下操作&#xff0c; 添加数据(INSERT)修改数据(UPDATE)删除数据(DELETE) 一&#xff0c;添加数据(INSERT) 注意&#xff1a; 插入数据时&#xff0c…
阅读更多...
云原生之基石-Docker Compose

云原生之基石-Docker Compose

1. 前言 在上一篇文章中介绍了基本的Docker工具&#xff0c;我们对单个应用程序进行单机单进程部署&#xff0c;制作Dockerfile文件&#xff0c;执行docker build来生成docker镜像&#xff0c; 执行docker run来运行一个容器&#xff0c;自己指定需要的参数如-v&#xff0c;但是…
阅读更多...
在Ubuntu22.04上部署FoooCUS2.1

在Ubuntu22.04上部署FoooCUS2.1

Fooocus 是一款基于 Gradio的图像生成软件&#xff0c;Fooocus 是对 Stable Diffusion 和 Midjourney 设计的重新思考&#xff1a; 1、从 Stable Diffusion 学习&#xff0c;该软件是离线的、开源的和免费的。 2、从 Midjourney 中学到&#xff0c;不需要手动调整&#xff0c;…
阅读更多...
【AI】安装ubuntu20.04教程（未完待续）

【AI】安装ubuntu20.04教程（未完待续）

目录 1 制作ubuntu20.04系统盘1.1 下载ubuntu镜像1.2 使用ultraiso写入镜像 2 安装Ubuntu系统 1 制作ubuntu20.04系统盘 1.1 下载ubuntu镜像 在清华镜像站https://mirrors.tuna.tsinghua.edu.cn/下载ubuntu20.04镜像 路径为/ubuntu-releases/20.04/&#xff0c;下载ubuntu-20…
阅读更多...
【教程】C++语言基础学习笔记（七）——Array数组

【教程】C++语言基础学习笔记（七）——Array数组

写在前面&#xff1a; 如果文章对你有帮助&#xff0c;记得点赞关注加收藏一波&#xff0c;利于以后需要的时候复习&#xff0c;多谢支持&#xff01; 【C语言基础学习】系列文章 第一章 《项目与程序结构》 第二章 《数据类型》 第三章 《运算符》 第四章 《流程控制》 第五章…
阅读更多...
Promise与async await的作用及应用场景

Promise与async await的作用及应用场景

在Web前端开发中&#xff0c;处理异步操作是非常常见的需求。为了解决这个问题&#xff0c;ES6引入了Promise和后续的async await。本文将介绍Promise和async await的作用&#xff0c;以及在实际开发中的应用场景。 一、Promise的作用及应用场景 Promise是一个表示异步操作最…
阅读更多...
【MySQL】学习约束和使用图形化界面创建表

【MySQL】学习约束和使用图形化界面创建表

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-iqtbME2KmWpQFQSt {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023