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格式文件,体积小,加载快,非常适合小程序使用

相关推荐
鲲鹏猿11 分钟前
微信小程序——早餐小程序
微信小程序·小程序
说私域32 分钟前
基于开源AI智能名片链动2+1模式与S2B2C商城小程序的微商品牌规范化运营研究
人工智能·小程序·开源
2501_9159090641 分钟前
iOS 加固工具实战解析,主流平台审核机制与工具应对策略
android·ios·小程序·https·uni-app·iphone·webview
The_era_achievs_hero41 分钟前
UniappDay04
vue.js·微信小程序·uni-app
DM今天肝到几点?1 小时前
【7.26-7.28胜算云AI日报:首个开源3D世界生成模型腾讯混元、微软预示 8 月 GPT-5 发布、Nemotron推理、商汤悟能、DM夺金】
人工智能·vscode·microsoft·3d·ai·chatgpt
2501_915106323 小时前
iOS WebView 调试实战,第三方脚本加载失败与内容安全策略冲突问题排查指南
android·ios·小程序·https·uni-app·iphone·webview
paopaokaka_luck8 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
前端程序猿-秦祥8 小时前
uniapp拦截返回事件
uni-app
雪芽蓝域zzs11 小时前
uniapp input 如何只读禁用输入可点击
uni-app
美狐美颜sdk11 小时前
直播美颜SDK动态贴纸模块开发指南:从人脸关键点识别到3D贴合
3d·美颜sdk·直播美颜sdk·第三方美颜sdk·视频美颜sdk·美颜api