首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

全程使用Threejs编辑器调试PBR材质

PBR英文全称为Physicallybased rendering。它是指能够实现接近物理真实的整个渲染算法或过程。

PBR材质常用的贴图有albedo、metalness、roughness、normal。有了反射,变得很真实。

albedo:就是diffuse,也就是物体的固有颜色。

今天用Threejs 自带的编辑器调试了一把材质,也是收获颇多。

1. 打开threejs.org/editor

2. 新建一个球体和一束直射光

3.  打开https://freepbr.com/ 里面是免费的pbr材质。找到一个好看的材质下载下来。

4.  选中刚才的球体,打开material标签。

map对应刚才下载的albedo

normal map 对应 normal

displace map对应height,并将值调为0.01

rough对应roughness

metal 对应metallic

envMap上我们需要从https://polyhaven.com/hdris官网下载一个 hdr文件对应。

5.  在底部script处新建脚本文件test,点击edit,出现脚本编辑界面,输入如下代码

总结:

学习threejs,一定要学会编辑器的使用才会减少开发时间,并专注在效果实现上。

three.js Editor 具备強大的功能,支持多种3D物体的建立、编辑、和组合。您可以在场景中添加多种不同的材质和纹理,并通过自由变形来调整物体的外观。

同時,Three.js Editor 还提供了丰富的灯光和影子效果,可以轻松打造出逼真的 3D 场景。

除此之外,three.js Editor 还支持自定义脚本和程序的编写,并可以直接在编辑器中预览场景的效果。

https://www.bilibili.com/video/BV1Y24y1L7ZN/

做一只爬的最久的乌龟,保持学习保持好奇,即使慢一点,遇到一点困难,只要最后能到达终点,又有什么关系呢。

毕竟人生没有白走的路,每一步都算数。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20230331A05Z2P00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券