之路网站建设,wordpress等级,wordpress轮播文章,搭建网站不用服务器吗上一篇讲解了如何在uniApp中创建xr-frame子组件并创建简单的3D场景。
这一篇我们讲解xr-frame中关于mesh网格材质的金属度和粗糙度的设置。
1.先看源码 xr-scene render-systemalpha:true bind:readyhandleReady
xr-node visible{…上一篇讲解了如何在uniApp中创建xr-frame子组件并创建简单的3D场景。
这一篇我们讲解xr-frame中关于mesh网格材质的金属度和粗糙度的设置。
1.先看源码 xr-scene render-systemalpha:true bind:readyhandleReady
xr-node visible{{sec3}}xr-light typeambient color1 1 1 intensity1 /xr-light typedirectional rotation40 70 0 color1 1 1 intensity5 /xr-mesh node-idmesh-sphere position-0.4 0 -0.4 scale0.3 0.3 0.3 geometrysphere uniformsu_baseColorFactor:0.2 0.4 0.6 1,u_metallicRoughnessValues: 0.7 0/xr-meshxr-mesh node-idmesh-sphere2 position0.4 0 0.4 scale0.3 0.3 0.3 geometrysphere uniformsu_baseColorFactor:0.2 0.4 0.6 1,u_metallicRoughnessValues: 0 1/xr-mesh/xr-nodexr-camera idcamera clear-color0 0 0 0 position1 1 2 targetmesh-sphere camera-orbit-control/
/xr-scene
其中xr-scene表示场景的根元素每个页面有且只有这一个标签。
xr-camera表示场景中的相机创建相机标签后才能渲染出场景中的模型。
这里我们着重看xr-mesh标签中的uniforms属性
在这个属性中设置u_metallicRoughnessValues: 0 1
这个属性有两个值前面的值代表材质的金属度后面的值代表材质的粗糙度。这两个值可以设置为0-1的数值。
2.在开发者工具的模拟器中查看 可以看到模拟器中的两个球体设置不同的金属度和粗糙度后其表面的光泽效果是不同的。
这里给大家推荐一个微信小程序 3D模型素材库这个小程序中的模型都是针对小程序优化后的glb格式文件体积小加载快非常适合小程序使用
