Three.js PBR物理渲染属性及使用介绍

2024-10-31 19:00:34

详解 Three.js PBR 物理渲染

Three.js 是一个流行的基于 WebGL 的 JavaScript 库，专门用于创建和运行三维动画和游戏。其中很关键的一部分是物理渲染（PBR）。本文将深入探讨 Three.js 的 PBR 渲染，并为初学者提供实用的指导。

什么是 PBR？

传统的渲染技术通常使用 ad hoc 光照模型，但这种方法存在一些问题。例如，在不同的光照条件下，材料的外观可能会发生变化。PBR 算法通过使用更真实的材质属性、光照计算和环境地图来模拟材料与现实世界之间的相互作用。这使得渲染的结果更加逼真，同时也更容易管理。

如何启用 PBR？

要在 Three.js 中使用 PBR，需要在渲染器中开启 physicallyCorrectLights 属性。这告诉 Three.js 你正在使用 PBR 渲染。在设置材料时，可以使用 MeshStandardMaterial 或 MeshPhysicalMaterial 来启用 PBR 特性。

// 初始化渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.physicallyCorrectLights = true;
// 创建材料
const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  metalness: 1, // 金属度
  roughness: 0.5 // 粗糙度
});
// 创建物体并应用材料
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

上面的示例使用了 MeshStandardMaterial，但是 MeshPhysicalMaterial 更强大。它允许更高级的属性，如透明度、折射率和环境映射。

PBR 的属性

PBR 将材料视为具有多个属性的物理对象。以下是一些常见的 PBR 属性：

颜色（color）

这是材料的基本颜色。

const material = new THREE.MeshStandardMaterial({ color: 0xffffff });

金属度（metalness）

这决定了材料是金属还是非金属。金属材质反射光线，而非金属材质则散射光线。

const material = new THREE.MeshStandardMaterial({ metalness: 1 });

粗糙度（roughness）

这决定了材质表面的粗糙程度。值越低，表面就越光滑。

const material = new THREE.MeshStandardMaterial({ roughness: 0.5 });

折射率（refractionRatio）

这决定了在不同介质中进入该材料时的光的弯曲程度。

const material = new THREE.MeshPhysicalMaterial({ refractionRatio: 0.5 });

透明度和透明度映射

这决定了材料有多少透明度，并提供一个透明度贴图。

const material = new THREE.MeshStandardMaterial({
  transparent: true,
  alphaMap: alphaTexture
});

环境映射（environmentMap）

这是将天空盒或球面相机纹理应用到材质上的一种方法，从而使其反射环境中的颜色。

const envMap = new THREE.TextureLoader().load('path/to/envmap.jpg');
const material = new THREE.MeshPhysicalMaterial({ envMap: envMap });

总结

PBR 是 Three.js 中非常强大的功能之一。它可以让开发者创建更逼真的场景，使用户获得更好的体验。在实际操作使用 PBR 时要注意材质属性的设置，以实现你所期望的效果。而且，PBR 的实现需要大量的计算和复杂的纹理，因此在较老的设备上可能会出现性能问题。但是，如果使用得当，PBR 可以为您的 Three.js 应用程序提供令人惊叹的视觉效果。

除了 PBR 之外，Three.js 还有许多其他的渲染技术和功能。例如，您可以使用阴影贴图来添加动态阴影效果，或者使用法线贴图来增强几何细节。您还可以在 Three.js 中使用后期处理效果，例如屏幕空间环境光遮蔽（SSAO）和景深效果。

下一篇文章我将介绍SSAO

以上就是Three.js PBR物理渲染属性及使用介绍的详细内容，更多关于Three.js PBR 物理渲染的资料请关注我们其它相关文章！

Three.js材质Material类型示例详解

目录 1. 什么是材质Material? 2. 常见材质类型 2.1 基础材质(MeshBasicMaterial) 2.2 标准材质(MeshStandardMaterial) 2.3 Lambert 材质(MeshLambertMaterial) 2.4 Phong 材质(MeshPhongMaterial) 2.5 可编程着色器材质(ShaderMaterial) 3. 纹理映射 4.材质的主要属性 5. 总结 1. 什么是材质Material? 在 Three.js 中,材质(Mater
Three.js中实现Bloom效果及完整示例

目录在 Three.js 中实现 Bloom 效果准备工作实现 Bloom 效果完整代码结论在 Three.js 中实现 Bloom 效果 Bloom 是一种常用于游戏和电影场景中的后期特效,用于模拟相机透镜光晕的效果.它可以使图像看起来更加真实.生动,并且增强视觉体验.在 Three.js 中,我们可以使用 UnrealBloomPass 和 ShaderPass 来实现这个效果.本文将介绍如何实现一个简单的 Bloom 效果. 准备工作首先,我们需要引入 Three.js 库:
Three.js概述和基础知识学习

目录 1.Three.js简介 2.Three.js的历史 3.Three.js的应用 4.基础知识 4.1 场景(Scene) 4.2 相机(Camera) 4.3 渲染器(Renderer) 4.4 几何体(Geometry) 4.5 材质(Material) 4.6 网格(Mesh) 4.7 光源(Light) 5.总结 1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形.它提供了许多高级功能,如几何体.纹理
Three.js 中的屏幕空间环境光遮蔽SSAO

目录简介原理实现总结简介在计算机图形学中,环境光遮蔽(Ambient Occlusion)是一种可以增强场景深度感.模拟阴影效果的技术.在 Three.js 中,我们可以使用屏幕空间环境光遮蔽(Screen Space Ambient Occlusion,简称 SSAO)来实现这个效果.本篇文章将详细介绍 SSAO 技术的原理和在 Three.js 中的应用. 原理 SSAO 技术是基于屏幕空间的,即只需要对当前帧进行处理,而不需要重新渲染场景.它的基本思想是根据场景中各个像素点周围
vue.js声明式渲染和条件与循环基础知识

vue.js声明式渲染和条件与循环的具体内容,分享给大家绑定 DOM 元素文本值 html代码: <div id="app"> {{ message }} </div> JavaScript代码: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 运行结果:Hello Vue! 总结:数据和 DOM 已经被关联在一起,当我们改变app.message的数据,所渲染的的DOM元素
vue.js实现条件渲染的实例代码

一.初探条件渲染 vue 的条件渲染,仍旧依赖于指令系统,下面逐个介绍: (1)v-if <div id="app"> <div v-if="c1">c1</div> </div> ...... var app = new Vue({ el: '#app', data: { c1: false } }); 当 c1 为真值的时候,渲染出 v-if 所绑定的元素,否则不渲染出该元素.渲染结果如下: <div id=
通过BootStrap-select插件 js jQuery控制select属性变化

bootstrap-select我想大家都不陌生是一个前端下拉框的插件非常好用,在select的标签中设置属性可以做很多功能控制,不过初始化之后怎么去修改网上找遍中文英文也没有一个交代自己研究好久研究出来了,当然有的人会干掉重新生成那样太low,我决定来填补这个空白. js控制select属性变化其实很简单,并不需要 $('#goodsNames').selectpicker('render'); $('#goodsNames').selectpicker('refresh'); 来重新渲染只用
详解基于 Nuxt 的 Vue.js 服务端渲染实践

Vue.js 是目前最火热的前端框架之一,而 Nuxt.js 是针对 Vue.js 推出的服务端渲染框架,通过高度定制化的配置以及简洁的 API,开发者可以快速进行服务端渲染项目的开发,本文将对 Nuxt.js 框架做一个简要介绍. 服务端渲染服务端渲染(Server Side Render)并不是一个新的概念,在单页应用(SPA)还没有流行起来的时候,页面就是通过服务端渲染好,并传递给浏览器的.当用户需要访问新的页面时,需要再次请求服务器,返回新的页面. 为了优化体验,开发者们开始选择采用
用Vue.js实现监听属性的变化

前言创建 Vue 实例时,Vue 将遍历 data 的属性,通过 ES5 的 Object.defineProperty 将它们转为 getter/setter,在其内部 Vue 可以追踪依赖.通知变化. const vm = new Vue({ data: {foo: 1} // 'vm.foo' (在内部,同 'this.foo') 是响应的 }) 观察属性变化 Vue 的实例提供了 $watch 方法,用于观察属性变化. const vm = new Vue({ data: {foo:
JS Testing Properties 判断属性是否在对象里的方法

Testing Properties To check whether an object has a property with a given name. You can do this with the in operator, with the hasOwnProperty() and propertyIsEnumerable() methods, 在JS中判断一个对象是否包含某个属性,可以使用 in,hasOwnProperty() and propertyIsEnumerable()
Vue.js教程之计算属性

Vue.js 的内联表达式非常方便,但它最合适的使用场景是简单的布尔操作或字符串拼接.如果涉及更复杂的逻辑,你应该使用计算属性. 计算属性是用来声明式的描述一个值依赖了其它的值.当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM.这个功能非常强大,它可以让你的代码更加声明式.数据驱动并且易于维护. 通常情况下,使用计算属性会比使用过程式的$watch回调更合适.比如下面的例子: <div id="demo">{{fullNa
JS获取图片lowsrc属性的方法

本文实例讲述了JS获取图片lowsrc属性的方法.分享给大家供大家参考.具体如下: lowsrc属性一般设置为图片的低分辨率图片地址,下面的代码可以通过点击链接显示图片的低分辨率版本 <!DOCTYPE html> <html> <body> <img id="compman" src="compman.gif" lowsrc="compman_lowres.gif" alt="Computer
详解JS中的attribute属性

Attribute是属性的意思,文章仅对部分兼容IE和FF的Attribute相关的介绍. attributes:获取一个属性作为对象getAttribute:获取某一个属性的值 object.getAttributes(attribute) getAttribute方法不属于document对象,所以不能通过document对象获取,只能通过元素节点的调用.例如document.getElementsByTagName("p")[0]. getAttributes("tit
遍历js中对象的属性和值的实例

今天优化项目时,遇到了关于"遍历js中对象的属性和值"的需求.之所以会有这个需求,是因为要做一个局部刷新表格内容的js插件.刚开始我去网上荡了一个js分页插件,但是智商实在捉急,搞了半天没搞出来!后来就怒了,干脆自己写一个好了.结果就遇到了这个问题! 问题:通过遍历属性名数组,获取对象的属性值失败刚开始的错误代码如下: for(var i=0;i<dataList.length;i++) { var dataLine="<tr>"; for(va