XR-Frame 实现 始终朝向屏幕(相机)的面片与模型

embedded/2024/9/24 21:23:09/

 

wxml,xr-frame中plane平面默认是趴在场景中的,需要先绕x轴渲染90度,

// 面片    <xr-node id="l" position="-3.0 0 0.0"><xr-mesh rotation="90 0 0" geometry="plane" uniforms="u_baseColorFactor:0.2 0.2 0.4 1, u_metallicRoughnessValues: 0 0.6" states="cullOn: false"></xr-mesh></xr-node>// 模型<xr-node id="b" position="0 0 -3.0"><xr-gltf rotation="0 -90 0" scale="0.01 0.01 0.01" model="door"></xr-gltf></xr-node>

在场景的ready事件中获取相机,模型,并注册tick请求动画帧事件

   handleReady({detail}) {const xrScene = this.scene = detail.value;const xrSystem = wx.getXrFrameSystem();this.mat = new (xrSystem.Matrix4)();const { width, height } = this.scenethis.cameraTrs = this.scene.getElementById('camera').getComponent(xrSystem.Transform);this.leftTRS = this.scene.getElementById('l').getComponent(xrSystem.Transform);this.backTRS = this.scene.getElementById('b').getComponent(xrSystem.Transform);this.FACING = xrSystem.Vector3.createFromNumber(0, 0, 0);this.UP = xrSystem.Vector3.createFromNumber(0, 1, 0);xrScene.event.add('tick', this.handleTick.bind(this));},

 请求动画帧中,计算旋转四元数,更新模型朝向

    handleTick: function () {const xrSystem = wx.getXrFrameSystem();if (this.leftTRS) {const quaternion = this.leftTRS.quaternion;// 算出从物体到相机的向量this.FACING.set(this.cameraTrs.position).sub(this.leftTRS.position, this.FACING);xrSystem.Quaternion.lookRotation(this.FACING, this.UP, quaternion);}if (this.backTRS) {const quaternion = this.backTRS.quaternion;// 算出从物体到相机的向量this.FACING.set(this.cameraTrs.position).sub(this.backTRS.position, this.FACING);xrSystem.Quaternion.lookRotation(this.FACING, this.UP, quaternion);}}


http://www.ppmy.cn/embedded/103843.html

相关文章

VIVO 相机HDR拍照流程拆解

和你一起终身学习&#xff0c;这里是程序员Android 经典好文推荐&#xff0c;通过阅读本文&#xff0c;您将收获以下知识点: HDR 场景下发 3 帧拍照请求HDR 3帧拍照请求帧&#xff08;478,479 480&#xff09;HDR 3帧 result callback帧HDR 算法处理5.算法编解码处理HDR 拍照lo…

5G SPS配置

‌SPS配置‌是一种技术&#xff0c;用于管理和优化数据传输&#xff0c;特别是在无线通信领域。它涉及到为特定的数据传输需求确定最佳的参数配置&#xff0c;以满足不同的传输需求。SPS配置的参数包括时域资源分配、调制编码方式、频域资源分配、虚拟资源块到物理资源块的映射…

使用 streamlink 把 m3u8 转为 mp4

问题描述&#xff0c; 背景&#xff0c; 来源&#xff1a; 下载 m3u8 ts —> 转为mp4, 按照以往的做法&#xff0c; 就是使用 python requests 一步一步地下载 m3u8, ts&#xff0c; 然后转换。 但是个人写的东西&#xff0c;毕竟问题比较多。 而且&#xff0c; 但是&…

Python知识点:如何使用Elasticsearch与Elasticsearch-py进行全文检索

使用Elasticsearch与elasticsearch-py库进行全文检索可以分为以下几个步骤&#xff1a; 1. 安装elasticsearch-py 首先&#xff0c;确保你已经安装了elasticsearch-py库。你可以使用pip来安装它&#xff1a; pip install elasticsearch2. 连接到Elasticsearch实例 使用elas…

2 Python开发工具:PyCharm的安装和使用

本文是 Python 系列教程第 2 篇&#xff0c;完整系列请查看 Python 专栏。 1 安装 官网下载地址https://www.jetbrains.com.cn/pycharm/&#xff0c;文件比较大&#xff08;约861MB&#xff09;请耐心等待 双击exe安装 安装成功后会有一个30天的试用期。。。本来想放鸡火教程&…

React滚动加载(无限滚动)功能实现

在用户滚动到接近页面底部时自动加载更多内容 &#xff1a;可以将事件绑定在antd的Table组件中的onScroll中 &#xff1a;也可以将事件绑定在外层的div的onScroll中 const handleScroll (e) > {const { scrollTop, scrollHeight, clientHeight } e.target;if (scrollTo…

l_whence 的可能值及其含义

在 fcntl 函数中使用 struct flock 结构体进行文件锁定时&#xff0c;l_whence 成员用于指定文件锁操作的起始位置。它定义了文件锁的偏移量是相对于哪个位置的。l_whence 有以下几种可能的值&#xff0c;每种值的含义如下&#xff1a; l_whence 的可能值及其含义 SEEK_SET: 含…

38次8.28(docker03:容器网络,主从镜像)

1.容器网络 1.本地⽹络 bridge yum -y install bridge-utils 2.查看桥⽂件 yum provides *bin/brctl brctl show #使⽤docker network 查看桥 docker network ls 每⼀台dcoker host上的docker0所在⽹段完全⼀样&#xff0c;但是会造成跨主 机的容 器⽆法通信 3.host 与…