uniapp微信小程序3D XR-FRAME

1.在pages.json中配置展示页面(style中添加下面:)

"usingComponents": {

"xr-start": "../../wxcomponents/xr-start"

}

2.manifest.json中配置mp-weixin

"setting" : {

"urlCheck" : false,

"postcss" : true,

"es6" : true,

"minified" : true

},

"usingComponents" : true,

"lazyCodeLoading" : "requiredComponents",

3.pege文件同级依次建立文件wxcomponenrs/xr-start/(index.js、index/json、index/wxml)

4.index.js

// index.js

Component({

properties: {},

data: {},

methods: {},

});

  1. index.json

{

"component": true,

"renderer": "xr-frame",

"usingComponents":{}

}

  1. index.wxml(页面3d渲染内容,详情参考文档)

<xr-scene>

<xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">

<xr-asset-load type="gltf" asset-id="damage-helmet" src="/static/gltf/lou.gltf" />

</xr-assets>

<xr-light type="ambient" color="1 1 1" intensity="1" />

<xr-light type="directional" rotation="40 70 0" color="1 1 1" intensity="3" cast-shadow />

<xr-gltf node-id="damage-helmet" model="damage-helmet" />

<xr-gltf model="miku" position="-0.15 0.75 0" scale="0.07 0.07 0.07" rotation="0 180 0" anim-autoplay />

<xr-camera

position="0 15 60" target="damage-helmet" background="skybox"

clear-color="0.4 0.8 0.6 1" camera-orbit-control

/>

</xr-scene>

  1. 页面.vue
javascript 复制代码
<template>
  <view style="display: flex; flex-direction: column">
    <xr-start
      id="main-frame"
      disable-scroll
      :width="renderWidth"
      :height="renderHeight"
      :style="'width:' + width + 'px;height:' + height + 'px;'"
    >
    </xr-start>
  </view>
</template>

<script>
export default {
  data() {
    return {
      width: 300,
      height: 300,
      renderWidth: 300,
      renderHeight: 300,
    };
  },
  onLoad(option) {
    this.width = uni.getWindowInfo().windowWidth;
    this.height = uni.getWindowInfo().windowHeight;
    const dpi = uni.getWindowInfo().pixelRatio;
    this.renderWidth = this.width * dpi;
    this.renderHeight = this.height * dpi;
  },
  mounted() {},

  methods: {},
};
</script>
相关推荐
2501_915918411 小时前
iOS 26 查看电池容量与健康状态 多工具组合的工程实践
android·ios·小程序·https·uni-app·iphone·webview
2501_915909062 小时前
iOS 架构设计全解析 从MVC到MVVM与使用 开心上架 跨平台发布 免Mac
android·ios·小程序·https·uni-app·iphone·webview
爱怪笑的小杰杰3 小时前
Cesium中的倒立四棱锥:从几何结构到交互式3D可视化
javascript·3d·arcgis·1024程序员节
芯片SIPI设计3 小时前
面向3D IC AI芯片中UCIe 电源传输与电源完整性的系统分析挑战与解决方案
人工智能·3d
CV实验室3 小时前
TPAMI 2025 | 从分离到融合:新一代3D场景技术实现双重能力提升!
人工智能·计算机视觉·3d
2501_9160088912 小时前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
2501_9159214312 小时前
“HTTPS 个人化”实战,个人站点与设备调试的部署、验证与抓包排查方法
网络协议·http·ios·小程序·https·uni-app·iphone
菜鸟una13 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
從南走到北15 小时前
JAVA国际版一对一视频交友视频聊天系统源码支持H5 + APP
java·微信·微信小程序·小程序·音视频·交友
從南走到北15 小时前
同城派送小程序
微信·微信小程序·小程序