uniApp使用XR-Frame创建3D场景(4)金属度和粗糙度

上一篇讲解了如何在uniApp中创建xr-frame子组件并创建简单的3D场景。

这一篇我们讲解xr-frame中关于mesh网格材质的金属度和粗糙度的设置。

1.先看源码

XML 复制代码
<xr-scene render-system="alpha:true" bind:ready="handleReady">
<xr-node visible="{{sec3}}">
    <xr-light type="ambient" color="1 1 1" intensity="1" />
    <xr-light type="directional" rotation="40 70 0" color="1 1 1" intensity="5" />
    <xr-mesh node-id="mesh-sphere" position="-0.4 0 -0.4" scale="0.3 0.3 0.3" geometry="sphere"  uniforms="u_baseColorFactor:0.2 0.4 0.6 1,u_metallicRoughnessValues: 0.7 0"></xr-mesh>
    <xr-mesh node-id="mesh-sphere2" position="0.4 0 0.4" scale="0.3 0.3 0.3" geometry="sphere"  uniforms="u_baseColorFactor:0.2 0.4 0.6 1,u_metallicRoughnessValues: 0 1"></xr-mesh>
 </xr-node>
 <xr-camera id="camera"  clear-color="0 0 0 0" position="1 1 2" target="mesh-sphere" camera-orbit-control/>
</xr-scene> 

其中**<xr-scene>**表示场景的根元素,每个页面有且只有这一个标签。

**<xr-camera>**表示场景中的相机,创建相机标签后才能渲染出场景中的模型。

这里我们着重看<xr-mesh> 标签中的uniforms属性,

在这个属性中设置u_metallicRoughnessValues: 0 1

这个属性有两个值,前面的值代表材质的金属度,后面的值代表材质的粗糙度。这两个值可以设置为0-1的数值。

2.在开发者工具的模拟器中查看

可以看到模拟器中的两个球体,设置不同的金属度和粗糙度后,其表面的光泽效果是不同的。

这里给大家推荐一个微信小程序 3D模型素材库,这个小程序中的模型都是针对小程序优化后的glb格式文件,体积小,加载快,非常适合小程序使用

相关推荐
橘猫云计算机设计4 分钟前
基于springboot微信小程序的旅游攻略系统(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·微信小程序·毕业设计·旅游
番茄比较犟5 分钟前
Combine知识点switchToLatest
前端
北京_宏哥6 分钟前
🔥《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(15)-Charles如何配置反向代理
前端·面试·charles
Process9 分钟前
前端图片技术深度解析:格式选择、渲染原理与性能优化
前端·面试·性能优化
大松鼠君10 分钟前
轿车3D展示
前端·webgl·three.js
却尘10 分钟前
URL参数传递的两种方式:查询参数与路径参数详解
前端
下辈子再也不写代码了12 分钟前
分片下载、断点续传与实时速度显示的实现方法
前端·后端·github
婷婷婷婷13 分钟前
AntV X6 常用方法
前端
LucianaiB22 分钟前
拿到Offer,租房怎么办?看我用高德MCP+腾讯云MCP,帮你分分钟搞定!
前端·后端·cursor
用户175923421502828 分钟前
D3.js - 基本用法
前端·d3.js