uniApp使用XR-Frame创建3D场景(3)光源投影的运用。

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

这篇我们讲解光源在场景中的运用以及相关属性。

在子组件 xr-startindex.wxml文件中我们加入如下代码

XML 复制代码
<xr-scene render-system="alpha:true" bind:ready="handleReady">
  <xr-node>
    <xr-light type="ambient" color="1 1 1" intensity="1" />
    <xr-light type="directional" rotation="40 70 0" color="1 1 1" intensity="3" cast-shadow />
    <xr-mesh
      node-id="cube" cast-shadow
      geometry="cube" uniforms="u_baseColorFactor:0.8 0.4 0.4 1"
    />
    <xr-mesh
      position="0 -1 0" scale="4 1 4" receive-shadow
      geometry="plane" uniforms="u_baseColorFactor:0.4 0.6 0.8 1"
    />
  </xr-node>
  <xr-camera id="camera"  clear-color="0 0 0 0" position="1 1 2" target="cube" camera-orbit-control/>
</xr-scene>

这里有几点需要说明

1.<xr-node>标签,表示一个节点,这个可有可无,因为可以通过设置这个节点的隐藏属性直接控制子节点的显示与隐藏,所以常用于控制其下一组节点的动态显示或者同意的形变

2.<xr-light>标签 ,表示要在场景中添加光源,标签中的type属性为要添加的光源类型,这里分为两类:主光源追加光源

我们主要用到的光源就是四种

(1)环境光:ambient

支持颜色color和亮度intensity,直接影响物体的基础颜色和亮度。

(2)平行光:directional

支持颜色color和亮度intensity,以及通过旋转rotation决定的方向,为物体表面通过不同光照算法提供明暗。

(3)点光源:point

支持颜色color和亮度intensity,以及position决定的位置和range决定的照亮范围。

(4)聚光灯:spot

支持颜色color和亮度intensity,以及position决定的位置、rotation决定的方向、range决定的照亮范围,和inner-cone-angleouter-cone-angle决定的锥角。

3.<xr-mesh>标签 ,表示要在场景中添加的几何体,上一篇文章我们分别添加了4个内置的几何体。

这里我们只添加了两个集合体,一个 geometry为cube,表示这是一个正方体的盒子模型,另一个 geometry为plane,表示这个几何体是一个平面。

cube 几何体中有一个属性**cast-shadow,**表示这个几何体要投射阴影

plane 几何体中一个属性receive-shadow,表示这个平面体要接收投影。

4.<xr-camear>标签 ,表示场景中的摄像机,这个标签有一个target属性,这个属性值是场景中几何体的id,在这里表示要对准正反体。

5.运行模拟器应该会看到下面的效果

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

相关推荐
汤姆yu3 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
雪芽蓝域zzs4 小时前
uniapp 国密sm2加密
uni-app
SDUERPANG10 小时前
三维目标检测|Iou3D 代码解读一
人工智能·目标检测·3d
说私域10 小时前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
说私域13 小时前
传统微商困境与开源链动2+1模式、AI智能名片及S2B2C商城小程序的转型破局
人工智能·小程序·开源
一渊之隔13 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
打不着的大喇叭14 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
zengzehui14 小时前
uniapp启动图被拉伸问题
uni-app
iOS阿玮17 小时前
AppStore教你一招免备案的骚操作!
uni-app·app·apple
racerun17 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序