微信小程序官网AR面具试戴源码
- 发布:2024-06-21 16:19
- 更新:2024-08-22 20:36
- 阅读:311
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
第三方开发者工具版本号: 1.06.2406192
基础库版本号: 3.4.6
项目创建方式: CLI
CLI版本号: 3.0.0-alpha-4020120240618002
示例代码:
操作步骤:
真机预览的情况下出现如上述所述问题
真机预览的情况下出现如上述所述问题
预期结果:
应该是宽高等于当前窗口的宽高
应该是宽高等于当前窗口的宽高
实际结果:
宽高只展示了很小的一部分,其他都是黑屏
宽高只展示了很小的一部分,其他都是黑屏
bug描述:
xr-frame在uniapp上宽高不能正常展示
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信
更新:
参考 https://ask.dcloud.net.cn/question/196249
提供下单页面源码吧,并说明 vue 的版本。你手动调整 vr frame 的宽高可以使用吗,现定位是框架编译的问题,还是平台渲染的问题
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 - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信
这是编译以后的源码?还是你使用自定义组件完成的?没有使用 uniapp 编写 vue 组件吗?你提供的这个产物,具体是哪一行缺少了宽高?
-
111 (作者)
我上面的代码是小程序官方的源码,在uniapp搭建的框架里面引入之后效果就如上图了,你自己可以吧源码拿过来,搭建一个uniapp框架的小程序试试不就知道了?我使用的vue和其他的版本号也在截图里面,我发现网上不止我一个有这样的问题,目前看来在父组件中引用的时候传递的width,height没有生效,麻烦尽快解决一下,目前有个项目需要使用,决定了我们的选型
2024-06-27 17:29