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

news2024/9/23 3:29:26

 

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.scene


      this.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.coloradmin.cn/o/2095965.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

浅析synchronized锁升级的原理与实现 2

本文内容是继我的上篇博客 浅析synchronized锁升级的原理与实现 1-CSDN博客 目录 各状态锁的升级场景 无锁 --> 轻量级锁 偏向锁 --> 轻量级锁 偏向锁 --> 重量级锁 轻量级锁 --> 重量级锁 总结 各状态锁的升级场景 下面我们结合代码看下各状态锁的升级场景。…

VL53L1CB TOF开发(2)----多区域扫描模式

VL53L1CB TOF开发.2--多区域扫描模式 概述视频教学样品申请源码下载硬件准备主要特点生成STM32CUBEMX串口配置IIC配置XSHUTGPIO1X-CUBE-TOF1堆栈设置函数说明初始化设置预设模式 (Preset mode)VL53L1_SetPresetModeVL53L1_SetDistanceMode时间预算单个ROI&#xff08;Single R…

从 Oracle 到 TiDB 丨数据库资源评估指南

原文来源&#xff1a; https://tidb.net/blog/5058e24f 本文作者&#xff1a;柳冬冬 导读 在当今技术飞速发展的时代&#xff0c;传统单机数据库正面临着前所未有的挑战。随着人工智能、云计算和大数据的崛起&#xff0c;企业对数据库的性能、可靠性和扩展性的需求日益增…

wordcloud兼figma的词云图片python生成

文章目录 一.Figma1.简介2.特点 二.代码构成1.详细代码2.word.py代码详解3.成果图 一.Figma 1.简介 Figma是一款全平台可使用的使用软件&#xff0c;和Sketch功能差不多&#xff1b;但是他可以在Mac&#xff0c;Windows PC&#xff0c;Linux计算机甚至Chromebook&#xff0c;…

中国各地级市-产业增加值、产业升级、产业结构高级化(2000-2021年)

产业增加值、产业升级和产业结构高级化是衡量地区经济发展水平的重要指标&#xff1a; 产业增加值&#xff1a;指在一定时期内&#xff0c;单位产值的增长部分&#xff0c;体现了产值、产量和增加值的综合增长能力。 产业升级&#xff1a;指通过技术进步和效率提升&#xff0c…

5.sklearn-朴素贝叶斯算法、决策树、随机森林

文章目录 环境配置&#xff08;必看&#xff09;头文件引用1.朴素贝叶斯算法代码运行结果优缺点 2.决策树代码运行结果决策树可视化图片优缺点 3.随机森林代码RandomForestClassifier()运行结果总结 环境配置&#xff08;必看&#xff09; Anaconda-创建虚拟环境的手把手教程相…

产品售后|基于SprinBoot+vue的产品售后管理​​​​​​​系统(源码+数据库+文档)

产品售后管理系统 目录 基于SprinBootvue的产品售后管理系统 一、前言 二、系统设计 三、系统功能设计 管理员模块实现 客户模块实现 受理人员模块实现 工程师模块实现 厂商模块实现 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、…

STM32外部中断(总结了易出现的BUG)

本文主要讲述了&#xff0c;本人在使用STM32F103C8T6做项目时&#xff0c;使用到按键触发外部中断时&#xff0c;发现无法触发外部中断。通过查看寄存器找出问题的过程&#xff0c;并总结了出现该问题的原因。 出现的问题 在使用STM32F103C8T6做一个矩阵键盘任务时&#xff0…

【学习笔记】卫星通信NTN 3GPP标准化进展分析(五)- 3GPP Release19 研究计划

一、引言&#xff1a; 本文来自3GPP Joern Krause, 3GPP MCC (May 14,2024) Non-Terrestrial Networks (NTN) (3gpp.org) 本文总结了NTN标准化进程以及后续的研究计划&#xff0c;是学习NTN协议的入门。 【学习笔记】卫星通信NTN 3GPP标准化进展分析&#xff08;一&#xff…

R语言报错 | object ‘integral‘ not found whilst loading name

1、报错背景 Registered S3 method overwritten by htmlwidgets:method from print.htmlwidget tools:rstudio Error: package or namespace load failed for ‘Seurat’:object integral not found whilst loading namespace spatstat.core 当我想library&…

RabbitMQ~架构、能力、AMQP、工作模式、高可用、死信队列了、事务机制了解

RabbitMQ RabbitMQ是使用Erlang编写的一个开源的消息中间件。它实现了AMQP(高级消息队列协议)&#xff0c;并支持其他消息传递协议&#xff1a;例如STOMP(简单文本定向消息协议)和MQTT(物联网协议)。 支持多种客户端如:Python、Ruby、.NET、Java、JMS、C、PHP、ActionScript、…

4-7 使用bios 中断 读取磁盘

1 首先是逻辑。 首先来看一下 他的编译代码的逻辑。 可以看到我 生成的 实际上是 Boot.bin , 这个文件可不止一个扇区&#xff0c; 然后将这个文件写入到了&#xff0c; disk1.img 这里加载了 disk1.img , disk2.img 我不太理解。 但是可以跑通&#xff0c; 暂时先不管了。…

How can I change from OpenAI to ChatOpenAI in langchain and Flask?

题意&#xff1a;“在 LangChain 和 Flask 中&#xff0c;如何将 OpenAI 更改为 ChatOpenAI&#xff1f;” 问题背景&#xff1a; This is an implementation based on langchain and flask and refers to an implementation to be able to stream responses from the OpenAI …

力扣763-划分字母区间(Java详细题解)

题目链接&#xff1a;763. 划分字母区间 - 力扣&#xff08;LeetCode&#xff09; 前情提要&#xff1a; 因为本人最近都来刷贪心类的题目所以该题就默认用贪心方法来做。 贪心方法&#xff1a;局部最优推出全局最优。 如果一个题你觉得可以用局部最优推出全局最优&#xf…

云服务器系统盘存储空间不够用怎么办?解决方法:扩容或挂载数据盘

云服务器系统盘满了不够用怎么办&#xff1f;服务器百科&#xff1a;可以系统盘扩容&#xff0c;也可以通过挂载数据盘来增大存储空间。 1、系统盘扩容教程&#xff1a;使用云服务器系统盘空间不足时&#xff0c;可以在ECS控制台上扩容云盘的容量以增加存储空间。阿里云支持云…

MCU3.电平等一些名词

1.电平的简单定义 计算机由各种硬件组成&#xff0c;只认识0和1&#xff0c;可以通过改变电压来向计算机输入数据&#xff08;0和1&#xff09; 例如&#xff1a;最大电压为3.3V 电压范围是0~3.3V&#xff0c;可以定义0~1V较低的电压表示0&#xff0c;定义2~3.3V较高的电压表…

领域驱动设计——大型结构(Large-Scale Structure)的综合运用

在一个大的、复杂的系统中&#xff0c;可能需要在一个设计中综合运用几种策略。那么&#xff0c;大型结构如何与CONTEXT MAP共存?应该把构造块放到哪里?第一步先做什么?第二步和第三步呢?如何设计你的战略? 把大型结构与BOUNDED CONTEXT结合起来使用 战略设计的3个基本原…

SpringBoot中@Value获取值和@ConfigurationProperties获取值用法及比较

SpringBoot中Value获取值和ConfigurationProperties获取值用法及比较 更新时间&#xff1a;2024年08月08日 09:41:48 作者&#xff1a;岳轩子 在Spring Boot中,Value注解是一个非常有用的特性,它允许我们将外部的配置注入到我们的Bean中,ConfigurationProperties用于将配置文件…

理解调试和组织 CSS——WEB开发系列26

CSS&#xff08;层叠样式表&#xff09;不仅是为网页提供样式的关键工具&#xff0c;也是调试和优化网页表现的重要部分。无论是调整网页布局&#xff0c;还是确保样式的一致性&#xff0c;掌握调试和组织 CSS 的技巧都是至关重要的。 一、使用浏览器开发者工具 浏览器开发者工…

【国外比较权威的免费的卫星数据网站——Sentinel Open Access Hub】

Sentinel Open Access Hub 网址&#xff1a;https://scihub.copernicus.eu/dhus/#/home简介&#xff1a;哨兵系列卫星科研数据中心&#xff08;Sentinel Open Access Hub&#xff09;是欧洲航天局&#xff08;ESA&#xff09;提供卫星数据的官方网站。该网站提供哨兵系列卫星的…