uni-app使用xr-frame编译成微信小程序宽度丢失，模型变形且模糊

uni-app使用xr-frame编译成微信小程序宽度丢失，模型变形且模糊

操作步骤：

  • 按照官方流程在uniapp中使用xr-frame,vscode开发执行脚本命令编译到小程序

预期结果：

  • 正常显示

实际结果：

  • 显示异常

bug描述：

微信开发工具已经是最新nightly最新版本，用原生小程序开发就正常，但是用uniapp vue3项目编译的小程序端项目，代码中width和height就不见了，模拟器表现和ios真机上都表现不正常，真机上一大半截都是黑的

图片

Image 1 Image 2

信息类型 信息内容
产品分类 uniapp/小程序/微信
PC开发环境 Windows
PC开发环境版本 Windows 10 专业版 21H2
第三方工具版本 nightly 1.06.2404022
基础库版本 3.4.0
项目创建方式 CLI
CLI版本 5.0.8

更多关于uni-app使用xr-frame编译成微信小程序宽度丢失，模型变形且模糊的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

感谢反馈，请提供一下可复现的最小 demo 工程文件

更多关于uni-app使用xr-frame编译成微信小程序宽度丢失，模型变形且模糊的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我也遇到同样的问题 vue3版本 编译之后 width 和height 被写到了 一个对象里面导致比例不对，没写到标签的属性上面

我也遇到了这个问题，官方一直没有给出解决方案，我后面项目选型就要换原生的了

请问解决了吗

请问你解决了没有

请问解决了吗

请参考 https://ask.dcloud.net.cn/question/196249

更新到4.26版本还是不行

回复 2***@qq.com: 4.26 没有包含，预计下个版本生效，使用 https://ask.dcloud.net.cn/question/196249 里提到的方法先用着

在使用 uni-app 开发微信小程序时，如果你使用了 xr-frame 组件来渲染 3D 模型，可能会遇到模型宽度丢失、变形或模糊的问题。这些问题通常与以下几个原因有关：

1. Canvas 尺寸设置问题

  • 问题描述：xr-frame 依赖于 canvas 来渲染 3D 内容，如果 canvas 的尺寸未正确设置，可能会导致模型变形或模糊。
  • 解决方法：
    1. 确保 canvas 的宽度和高度在 onReady 或 onLoad 生命周期中正确设置。
    2. 使用 uni.getSystemInfoSync() 获取屏幕宽度和高度，动态设置 canvas 的尺寸。
    onReady() {
  const systemInfo = uni.getSystemInfoSync();
  this.canvasWidth = systemInfo.windowWidth;
  this.canvasHeight = systemInfo.windowHeight;
}
    1. 在模板中绑定 canvas 的尺寸：
    <canvas
  id="xr-frame-canvas"
  canvas-id="xr-frame-canvas"
  :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
></canvas>

2. 模型缩放比例问题

  • 问题描述：3D 模型的缩放比例可能未正确设置，导致模型变形或大小异常。
  • 解决方法：
    1. 使用 xr-frame 提供的 scale 属性调整模型大小。
    2. 在模型加载完成后，手动调整模型的缩放比例。
    const model = this.scene.getElementById('model-id');
model.scale.set(1, 1, 1); // 根据需要调整

3. 分辨率适配问题

  • 问题描述：微信小程序的 canvas 默认使用逻辑像素（px），而 xr-frame 可能需要物理像素（rpx），导致渲染模糊。
  • 解决方法：
    1. 使用 uni.upx2px() 将 rpx 转换为 px，确保 canvas 的尺寸和分辨率适配。
    2. 在 canvas 初始化时设置 devicePixelRatio：
    const dpr = uni.getSystemInfoSync().pixelRatio;
this.canvasWidth = uni.upx2px(750) * dpr;
this.canvasHeight = uni.upx2px(750) * dpr;
回到顶部