当前位置: 首页 > news >正文

【xrframe】优化ar相机中加载模型效果

方法一:定义渲染width和height

//组件生命周期:在视图层布局完成后执行ready() {const info = wx.getSystemInfoSync();//在小程序中同步获取系统信息const width = info.windowWidth;//获取屏幕的宽度(单位为物理像素)const height = info.windowHeight;//获取屏幕的高度(单位为物理像素)const dpi = info.pixelRatio;//设备像素比,即物理像素与逻辑像素之间的比率this.setData({width,height,renderWidth: width * dpi * this.data.dpiScale,//与dpi,this.data.dpiScale相乘将逻辑像素转换为物理像素,同时考虑了 dpiScale影响因子renderHeight: height * dpi * this.data.dpiScale,});},

width(宽度): 用于设置 AR 相机的水平分辨率,即摄像头画面的宽度。较高的值会导致更高的水平分辨率,使画面更清晰,但也会增加性能负担。
height(高度): 用于设置 AR 相机的垂直分辨率,即摄像头画面的高度。与宽度类似,较高的值会导致更高的垂直分辨率,画面更清晰,但也会增加性能负担。

默认情况下,小程序 AR 相机的 width 和 height 的渲染宽度和高度与屏幕的宽度和高度相同,即等于设备的物理像素分辨率。

此外,自定义组件内置的属性包括:

id: 组件的唯一标识符
disable-scroll: 控制是否禁止滚动。
style: 用于设置组件的样式,可以包含各种 CSS 样式属性,如width、height、top、left等。
markerImg: 设置 AR 标记的图像。
bind:arTrackerState: 用于绑定 AR 跟踪器状态的事件处理函数。

<!-- 1. 使用xrframe自定义组件 渲染ar和模型 - -->
<xr-ar-2dmarker disable-scroll id="main-frame" width="{{renderWidth}}"height="{{renderHeight}}" style="width:{{width}}px;height:{{height}}px;top:{{top}}px;left:{{left}}px;display:block;" markerImg="{{markerImg}}" bind:arTrackerState="handleARTrackerState" />
<!-- 2. 使用threejs+VKSession在canvas 渲染ar和模型 -->
<canvas type="webgl" id="webgl" style="width: {{width}}px; height: {{height}}px" bindtouchstart="onTouchstart" bindtouchend="onTouchEnd" bindtouchmove="onTouchmove" />

方法二:后处理(PostProcess)使用快速抗锯齿 fxaa

<xr-camera clear-color="0.925 0.925 0.925 1" background="ar" is-ar-camera post-process="fxaa"/>

避坑:

  1. 官方最新xrframe限制提醒(主要是设备,开发基本库,xr-frame语法限制等)
  2. vision kit 版本限制
  3. 获取渲染上下文对象
    老版本:wx.createCanvasContext(string canvasId, Object this)
    新版本:wx.createSelectorQuery().select('#webgl').node().exec(res => { console.log('id为webgl的dom', res);
    注意:在自定义组件或包含自定义组件的页面中,应使用 this.createSelectorQuery() 来代替wx.createSelectorQuery()否则无法获取到上下文
  4. 兼容小程序的threejs库:threejs.miniprogram、three-platformize

原生init npm 生成package.json
uniapp 使用 npm init -y
npm i threejs-miniprogram
小程序工具栏,【工具】→ “构建npm”,即可完成npm构建

总结: xrframe组件渲染ar轻量好上手,threejs对模型操作和自定义手势更灵活

学习参考:
小程序官方xr-frame-demo

相关文章:

【xrframe】优化ar相机中加载模型效果

方法一&#xff1a;定义渲染width和height //组件生命周期&#xff1a;在视图层布局完成后执行ready() {const info wx.getSystemInfoSync();//在小程序中同步获取系统信息const width info.windowWidth;//获取屏幕的宽度&#xff08;单位为物理像素&#xff09;const heigh…...

解决 SyntaxError: Unexpected token ‘.‘ 报错问题

这个报错一般是编译问题&#xff0c;浏览器的版本过低没通过代码 解决办法&#xff1a; 在package.json文件中加上这个 "browserslist": ["> 1%","last 2 versions","not dead","not ie < 6","Android > 4&…...

谷歌插件V3知识点

1.background.js与content.js与popup.js对比: background.js 生命周期:一开始就执行&#xff0c;最早执行且一直执行&#xff1b; 作用&#xff1a;放置全局的、需要一直运行的代码&#xff0c;权限非常高几乎调用所有Chrome api,还可以发起跨域请求&#xff1b; content.js 生…...

webrtc windows 编译,以及peerconnection_client

webrtc windows环境编译&#xff0c;主要参考webrtc官方文档&#xff0c;自备梯子 depot tools 安装 Install depot_tools 因为我用的是windows&#xff0c;这里下载bundle 的安装包&#xff0c;然后直接解压&#xff0c;最后设置到环境变量PATH。 执行gn等命令不报错&…...

geotrust企业通配符证书2990

随着时代的变化&#xff0c;人们获取信息的方式由报纸、书籍变为手机、电脑&#xff0c;因此很多企事业单位用户开始在互联网中创建网站来进行宣传&#xff0c;吸引客户。为了维护网站安全环境&#xff0c;保护客户数据&#xff0c;企事业单位也开始使用SSL数字证书&#xff0c…...

网络安全科普:保护你的数字生活

# 网络安全科普&#xff1a;保护你的数字生活 ## 引言 在数字化时代&#xff0c;网络安全已成为每个人都必须面对的问题。从个人隐私保护到金融交易安全&#xff0c;网络的安全性直接关系到我们的日常生活。因此&#xff0c;普及网络安全知识&#xff0c;提高公众的网络安全意…...

Java实战:递归查找指定后缀名的文件

在日常的软件开发中&#xff0c;经常需要处理文件操作。假设我们有一个需求&#xff1a;从一个包含大量JSON文件的文件夹中提取出所有的JSON文件以进行进一步处理。本文将介绍如何利用Java编写一个高效的方法来递归查找指定后缀名的文件。 代码实现&#xff1a; import java.i…...

Linux 操作系统网络编程1

目录 1、网络编程 1.1 OSI 网络七层模型 1.1.1 OSI 参考模型 1.1.2 网络数据传输过程 2 传输层通信协议 2.1 TCP 2.1.1 TCP的3次握手过程 2.1.2 TCP四次挥手过程 2.2 UDP 3 网络编程的IP地址 4 端口 5 套接字 1、网络编程 1.1 OSI 网络七层模型 1.1.1 OSI 参考模型…...

future wait_for()成员、shared_future

future wait_for()成员 wait_for()&#xff1a;等待其异步操作操作完成或者超出等待&#xff0c;用于检查异步操作的状态。wait_for()可以接受一个std::chrono::duration类型的参数&#xff0c;它表示等待的最大时间&#xff0c;会返回一个std::future_status枚举值&#xff0…...

C++ list介绍(迭代器失效)

一、常用接口 reverse逆置 sort排序&#xff08;默认升序&#xff09; 仿函数greater<int> merge合并&#xff0c;可以全部合并&#xff0c;也可以一部分合并 unique&#xff1a;去重&#xff08;先排序&#xff0c;再去重&#xff09; remove&#xff1a;删除e值&#…...

codeforces 1809C

很巧妙的构造 题目链接 题目大意 要求构造长度为 n n n的数组满足以下条件 任意 i i i&#xff0c; − 1000 < a [ i ] < 1000 -1000<a[i]<1000 −1000<a[i]<1000有 k k k个和为正数的子串其余子串和为负数 思路 我们发现与子数组内元素的和有关&…...

Nginx part3 创建一个https的网站

目录 HTTPS 公钥和密钥 加密解密方式&#xff1a; https搭建步骤 强调一下 1、准备环境 2、配置文件 3、制作证书 4、进行设置 HTTPS 啥是https&#xff0c;根据百度&#xff1a;HTTPS &#xff08;全称&#xff1a;Hypertext Transfer Protocol Secure&#xff09;&a…...

事件高级。

一、注册事件&#xff08;绑定事件&#xff09; 就是给元素添加事件 注册事件有两种方式&#xff1a;传统方式和方法监听注册方式 1 传统注册方式 方法监听注册事件 2、 addEventListener 事件监听方式 里面的事件类型是字符串&#xff0c;必定加引号&#xff0c;而且不带o…...

Vue从入门到实战Day04

一、组件的三大组成部分&#xff08;结构/样式/逻辑&#xff09; 1. scoped样式冲突 默认情况&#xff1a;写在组件中的样式会全局生效 -> 因此很容易造成多个组件之间的样式冲突问题。 1. 全局样式&#xff1a;默认组件中的样式会作用到全局 2. 局部样式&#xff1a;可以…...

Linux学习笔记:信号

信号 在Linux中什么是信号信号的产生方式硬件产生的信号软件产生的信号异常产生的信号 进程对信号的处理信号的保存信号方法更改函数signal信号处理的更改恢复默认信号忽略 信号的管理信号集 sigset_t对信号集的操作 信号的捕捉过程 在Linux中什么是信号 在 Linux 系统中&…...

C#中的隐式类型转换和显式类型转换

在C#中&#xff0c;类型转换分为隐式类型转换&#xff08;Implicit Type Conversion&#xff09;和显式类型转换&#xff08;Explicit Type Conversion&#xff09;&#xff0c;也称为隐式转换和强制转换。 隐式类型转换&#xff08;Implicit Type Conversion&#xff09; 隐…...

linux上如何排查JVM内存过高?

在Linux上排查JVM内存过高的问题&#xff0c;可以采用以下几种方法&#xff1a; 1. **使用top命令查看进程**&#xff1a;通过top命令可以观察到系统中资源占用情况&#xff0c;包括CPU和内存。当收到内存过高的报警时&#xff0c;可以使用top命令来查看是哪个进程的内存使用率…...

第四届上海理工大学程序设计全国挑战赛 J.上学 题解 DFS 容斥

上学 题目描述 usst 小学里有 n 名学生&#xff0c;他们分别居住在 n 个地点&#xff0c;第 i 名学生居住在第 i 个地点&#xff0c;这些地点由 n−1 条双向道路连接&#xff0c;保证任意两个地点之间可以通过若干条双向道路抵达。学校则位于另外的第 0 个地点&#xff0c;第…...

word-排版文本基本格式

1、文本的基本格式&#xff1a;字体格式、段落格式 2、段落&#xff1a;word排版的基本控制单位 3、每敲一次回车&#xff0c;为一个段落标记&#xff0c;注意区分换行符和段落标记&#xff0c;换行符为指向下的箭头&#xff0c;段落标记为带拐弯的箭头&#xff0c;换行符&…...

目标检测YOLO实战应用案例100讲-无监督领域自适应目标检测方法研究与应用(五)

目录 多源无监督领域自适应目标检测方法 4.1研究现状及问题形成 4.2相关工作详述...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

《Docker》架构

文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器&#xff0c;docker&#xff0c;镜像&#xff0c;k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...

【threejs】每天一个小案例讲解:创建基本的3D场景

代码仓 GitHub - TiffanyHoo/three_practices: Learning three.js together! 可自行clone&#xff0c;无需安装依赖&#xff0c;直接liver-server运行/直接打开chapter01中的html文件 运行效果图 知识要点 核心三要素 场景&#xff08;Scene&#xff09; 使用 THREE.Scene(…...