111
111
  • 发布:2024-06-21 16:19
  • 更新:2024-08-22 20:36
  • 阅读:311

xr-frame AR面具试戴功能在uniapp上宽高不能正常展示

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

第三方开发者工具版本号: 1.06.2406192

基础库版本号: 3.4.6

项目创建方式: CLI

CLI版本号: 3.0.0-alpha-4020120240618002

示例代码:

微信小程序官网AR面具试戴源码

操作步骤:

真机预览的情况下出现如上述所述问题

预期结果:

应该是宽高等于当前窗口的宽高

实际结果:

宽高只展示了很小的一部分,其他都是黑屏

bug描述:

xr-frame在uniapp上宽高不能正常展示

2024-06-21 16:19 负责人:无 分享
已邀请:
DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

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

提供下单页面源码吧,并说明 vue 的版本。你手动调整 vr frame 的宽高可以使用吗,现定位是框架编译的问题,还是平台渲染的问题

111

111 (作者)

index.wxml

<xr-scene ar-system="modes:Face;camera:Front" bind:ready="handleReady" bind:ar-ready="handleARReady">  
  <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">  
    <xr-asset-load type="gltf" asset-id="gltf-glass" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/jokers_mask_persona5.glb" />  
  </xr-assets>  
  <xr-env env-data="xr-frame-team-workspace-day" />  
  <xr-node wx:if="{{arReady}}">  
    <xr-ar-tracker id='tracker' mode="Face" auto-sync="43">  
      <xr-node name="nose" >  
        <xr-gltf node-id="gltf-glass" position="0 0.02 -0.05" rotation="0 180 0" scale="0.5 0.5 0.5" model="gltf-glass"></xr-gltf>  
      </xr-node>  
    </xr-ar-tracker>  
    <xr-camera  
      id="camera" node-id="camera" clear-color="0.925 0.925 0.925 1"  
      background="ar" is-ar-camera near="0.01"  
    ></xr-camera>  
  </xr-node>  
  <xr-node node-id="lights">  
    <xr-light type="ambient" color="1 1 1" intensity="0.2" />  
    <xr-light type="directional" rotation="180 0 0" color="1 1 1" intensity="1" />  
  </xr-node>  
</xr-scene>

index.json

{  
  "component": true,  
  "usingComponents": {},  
  "renderer": "xr-frame"  
}

index.js

Component({  
  behaviors: [require('../common/share-behavior').default],  
  data: {  
    loaded: false,  
    arReady: false,  
  },  
  methods: {  
    handleReady({detail}) {  
      const xrScene = this.scene = detail.value;  
      xrScene.event.add('tick', this.handleTick.bind(this));  
      console.log('xr-scene', xrScene);  
    },  
    handleAssetsProgress: function ({detail}) {  
      console.log('assets progress', detail.value);  
    },  
    handleAssetsLoaded: function ({detail}) {  
      console.log('assets loaded', detail.value);  
      this.setData({loaded: true});  
    },  
    handleARReady: function ({detail}) {  
      console.log('arReady');  
      this.setData({arReady: true});  
    },  
    handleTick: function () {  
      const xrSystem = wx.getXrFrameSystem();  
      const trackerEl = this.scene.getElementById('tracker');  
      if (!trackerEl) {  
        return;  
      }  

      const tracker = trackerEl.getComponent(xrSystem.ARTracker);  
      if (!tracker.arActive) {  
        return  
      }  

      // 这里只是例子,实际上用的是`ARTracker`的`autoSync`属性。  
      // 但也是一个更高自由度的选项。  
      // 视情况需要自己同步`tracker`的`scale`和`rotation`特定节点。  
      // 第一个参数是特征点编好,第二个是可选的复用结果,第三个是可选的是否相对于`ARTracker`。  
      // 为`false`为世界空间的位置,需要配合`scale`自己使用  
      const position = tracker.getPosition(98, new xrSystem.Vector3(), false);  

    }  
  }  
})

index.wxss

/ xr/index.wxss /

在父组件中引用

<xr-start id="main-frame" disable-scroll  
            :width="pageData.renderWidth"  
            :height="pageData.renderHeight"  
            :style="'width:'+pageData.width+'px;height:'+(pageData.height - pageData.paddingTop)+'px;'">  
            </xr-start>  

 pageData.width = uni.getWindowInfo().windowWidth;  
    pageData.height = uni.getWindowInfo().windowHeight;  
pageData.renderWidth = pageData.width * dpi;  
    pageData.renderHeight = pageData.height * dpi;

使用的框架是vue3+ts+vite,版本号在附件里面1

  • DCloud_UNI_OttoJi

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

    2024-08-22 20:36

DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

这是编译以后的源码?还是你使用自定义组件完成的?没有使用 uniapp 编写 vue 组件吗?你提供的这个产物,具体是哪一行缺少了宽高?

  • 111 (作者)

    我上面的代码是小程序官方的源码,在uniapp搭建的框架里面引入之后效果就如上图了,你自己可以吧源码拿过来,搭建一个uniapp框架的小程序试试不就知道了?我使用的vue和其他的版本号也在截图里面,我发现网上不止我一个有这样的问题,目前看来在父组件中引用的时候传递的width,height没有生效,麻烦尽快解决一下,目前有个项目需要使用,决定了我们的选型

    2024-06-27 17:29

  • 1***@qq.com

    回复 tenzhixiang: 请问你解决了吗?我也遇到了这个问题

    2024-08-08 10:47

  • 111 (作者)

    回复 1***@qq.com: 没有,最后换成原生开发了

    2024-08-22 13:05

  • DCloud_UNI_OttoJi

    回复 1***@qq.com: 参考 https://ask.dcloud.net.cn/question/196249

    2024-08-22 20:36

要回复问题请先登录注册