微信小程序xr-frame实现多光源效果

news/2024/10/30 13:36:25/

1.基础知识:

  • 灯光

灯光组件Light用于给场景提供照明,也是阴影的核心。相机组件一般被代理到灯光元素XRLight中使用,其派生自XRNode,对应在xml中的标签为xr-light

  • 主光源以及参数

类型uniforms说明书写
环境光颜色和亮度u_ambientLightColorIns是否开启WX_USE_AMBIENT_LIGHT[r, g, b, ins]

type="ambient"

平行光颜色和亮度u_mainLightColorIns和方向u_mainLightDir是否开启WX_USE_MAIN_DIR_LIGHT[r, g, b, ins]/vec3 

type="directional"

  • 追加光源

类型支持书写
点光源支持颜色color和亮度intensity,以及position决定的位置和range决定的照亮范围。

type="point"

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

注明:

  1. 环境光:360度无死角的光照,不会产生阴影,类似于自然环境中无数物体反射太阳光的效果,一般作为打底的弱亮度光源,保证整个场景不会漆黑一片。
  2. 平行光:类似于太阳光的平行光照效果,只有平行光能产生阴影,可以设置rotation角度。
  3. 点光源:类似于发光点,从一点向所有方向发射光线,可以设置position和range光照范围。
  4. 聚光灯:不同于点光源,他只会向某个范围发射光线,可以设置position、rotation和range还有inner-cone-angle和outer-cone-angle决定锥形角度。

官方案例效果:(来源于:微信开放文档)

1.wxml部分

<xr-scene id="xr-scene" bind:ready="handleReady"><xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded"><xr-asset-material asset-id="standard-mat" effect="standard" /></xr-assets><xr-node><xr-node node-id="camera-target" position="0 0 0"></xr-node><xr-mesh node-id="mesh-cube-floor" position="2 -1.01 0" rotation="0 0 0" scale="10 1 10" geometry="cube" material="standard-mat" uniforms="u_baseColorFactor:0.2 0.2 0.2 1" states="cullOn: false"></xr-mesh><xr-mesh node-id="mesh-cube" position="0.6 -0.25 0.8" rotation="0 30 0" scale="0.5 0.5 0.5" geometry="cube" material="standard-mat" uniforms="u_baseColorFactor:1 1 1 1"></xr-mesh><xr-mesh node-id="mesh-sphere" position="2 -0.15 -1" scale="0.4 0.4 0.4" geometry="sphere" material="standard-mat" uniforms="u_baseColorFactor:1 1 1 1"></xr-mesh><xr-mesh node-id="mesh-cylinder" position="-0.2 -0.2 -0.8" scale="0.5 0.4 0.5" geometry="cylinder" material="standard-mat" uniforms="u_baseColorFactor:1 1 1 1"></xr-mesh><xr-mesh node-id="mesh-cube-far" position="3 -0.25 1" rotation="0 -30 0" scale="0.5 0.5 0.5" geometry="cube" material="standard-mat" uniforms="u_baseColorFactor:1 1 1 1"></xr-mesh><xr-cameraid="camera" node-id="camera" position="-2 1 0" clear-color="0 0 0 1"target="camera-target"camera-orbit-control=""></xr-camera></xr-node><!-- 光源部分 --><xr-node node-id="lights"><xr-light type="ambient" color="1 1 1" intensity="0.1" /><xr-light type="directional" rotation="40 170 0" color="1 1 1" intensity="0.2" /><xr-light type="point" position="0 0 0" color="1 0 0" range="3" intensity="3" /><xr-light type="point" position="2 0 1" color="0 1 0" range="3" intensity="3" /><xr-light type="spot" position="0 0 0" color="0 0 1" range="12" intensity="12" rotation="0 120 0" inner-cone-angle="30" outer-cone-angle="35" /></xr-node>
</xr-scene>

2.js部分:

Component({properties: {a: Number,},data: {loaded: false},lifetimes: {},methods: {handleReady({detail}) {const xrScene = this.scene = detail.value;console.log('xr-scene', xrScene);},handleAssetsProgress: function({detail}) {console.log('assets progress', detail.value);},handleAssetsLoaded: function({detail}) {console.log('assets loaded', detail.value);this.setData({loaded: true});},handleRaf: function({detail}) {console.log('raf', detail.value);}}
})

3.案例效果:


http://www.ppmy.cn/news/70238.html

相关文章

【Linux】Linux编辑神器vim的使用

目录 一、Vim的基本概念 二、Vim的基本操作 1、进入vim 2、正常模式切换至插入模式 3、插入模式切换至正常模式 4、正常模式切换至底行模式 5、退出Vim编辑器 三、Vim正常模式命令集 1、移动光标 2、删除文字 3、复制 4、替换 5、撤销 四、Vim底行模式命令集 1、列出行号 2、光…

【dfs解决分组问题-两道例题——供佬学会!】(A元素是放在已经存在的组别中,还是再创建一个更好?--小孩子才做选择,dfs直接两种情况都试试)

问题关键就是&#xff1a; 一个点&#xff0c;可能 新开一个组 比 放到已经存在的组 更划算 因为后面的数据&#xff0c;我们遍历之前的点时&#xff0c;并不知道 所以我们应该针对每个点&#xff0c;都应该做出一个选择就是 新开一个元组或者放到之前的元组中&#xff0c;都尝…

光纤衰减器作用及使用说明

在光纤通信中&#xff0c;光信号的强度过大或过小都会对信号的传输和接收产生不良的影响&#xff0c;因此光衰减器在光通信系统中起到了重要的作用。那什么是光衰减器呢&#xff1f;它又有什么作用呢&#xff1f;下面跟着小易一起来了解一下吧&#xff01; 一、什么是光纤衰减…

LeetCode 96 不同的二叉搜索树

题目&#xff1a; 给你一个整数 n &#xff0c;求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种&#xff1f;返回满足题意的二叉搜索树的种数。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;5 示例 2&#xff1a; 输入&#xff1a;n 1 …

网络正常但是web、ftp、telnet应用新建连接偶尔卡顿处理方法

目录 问题现象 故障定位 TCP报头 options详解 Opions Kind有哪些 options中的Timestamp详解 TSval & TSecr Timestamp Value的单位是什么 TCP连接的建立与释放 普通三次握手 带时间戳的三次握手 抓包展示带时间戳的tcp会话 WireShark中的时间 VS tcpdump 直接…

能量守恒(能量是怎么来的)

文章目录 引言I 能量守恒1.1 能量是怎么来的1.2 能量守恒定律(热力学第一定律)1.3 热力学第二定律II 焦耳2.1 焦耳的工作2.2 焦耳发现功能转换定律的原因III 预备知识3.1 判定专业科学家和民间业余科学家的方法3.2 发现问题、提出问题比解决问题更重要。3.3 在科学史上,先进…

【c语言】组件化打包—动态链接库dll

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c语言系列专栏&#xff1a;c语言之路重点知识整合 &#x…

Linux 学习笔记(八):时间片轮转调度

看这篇文章前可以先了解一下时间片&#xff1a;Linux 学习笔记&#xff08;七&#xff09;&#xff1a;时间片_Amentos的博客-CSDN博客 一、基本概念 时间片轮转调度算法&#xff08;Round-Robin&#xff0c;RR&#xff09;主要用于分时操作系统中的进程调度。是一种最古老、最…