网站繁体和中文这么做,服务网站建设企业,湖南环达公路桥梁建设总公司网站,wordpress单页下载方法一#xff1a;定义渲染width和height
//组件生命周期#xff1a;在视图层布局完成后执行ready() {const info wx.getSystemInfoSync();//在小程序中同步获取系统信息const width info.windowWidth;//获取屏幕的宽度#xff08;单位为物理像素#xff09;const heigh…方法一定义渲染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,//与dpithis.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 idmain-frame width{{renderWidth}}height{{renderHeight}} stylewidth:{{width}}px;height:{{height}}px;top:{{top}}px;left:{{left}}px;display:block; markerImg{{markerImg}} bind:arTrackerStatehandleARTrackerState /!-- 2. 使用threejsVKSession在canvas 渲染ar和模型 --
canvas typewebgl idwebgl stylewidth: {{width}}px; height: {{height}}px bindtouchstartonTouchstart bindtouchendonTouchEnd bindtouchmoveonTouchmove /方法二后处理(PostProcess)使用快速抗锯齿 fxaa
xr-camera clear-color0.925 0.925 0.925 1 backgroundar is-ar-camera post-processfxaa/避坑
官方最新xrframe限制提醒主要是设备开发基本库xr-frame语法限制等vision kit 版本限制获取渲染上下文对象 老版本wx.createCanvasContext(string canvasId, Object this) 新版本wx.createSelectorQuery().select(#webgl).node().exec(res { console.log(id为webgl的dom, res); 注意在自定义组件或包含自定义组件的页面中应使用 this.createSelectorQuery() 来代替wx.createSelectorQuery()否则无法获取到上下文兼容小程序的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
