uniapp微信小程序使用xr加载模型的操作方法
更新时间:2024年07月03日 10:52:31 作者:一只大菜鸟J
这篇文章主要介绍了uniapp微信小程序使用xr加载模型的操作方法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
1.在根目录与pages同级创建如下目录结构和文件:
// index.js Component({ properties: { modelPath: { // vue页面传过来的模型 type: String, value: '' } }, data: {}, methods: {} })
{ // index.json "component": true, "renderer": "xr-frame", "usingComponents": {} }
<!-- index.wxml --> <!-- 加载静态模型 --> <xr-scene render-system="alpha:true" bind:ready="handleReady"> <xr-node> <xr-light type="ambient" color="1 1 1" intensity="2" /> <xr-light type="spot" position="3 3 3" color="1 1 1" range="3" intensity="5" /> <xr-assets> <!-- options="ignoreError:-1" --> <xr-asset-load type="gltf" asset-id="gltf-model" src="{{modelPath}}"/> </xr-assets> <xr-gltf scale="0.7 0.7 0.7" node-id="gltf-model" bind:gltf-loaded="handleGLTFLoaded" model="gltf-model"></xr-gltf> </xr-node> <xr-camera id="camera" clear-color="0 0 0 0" position="1 1 2" target="gltf-model" camera-orbit-control/> </xr-scene>
2.pages.json配置
{ "path": "pages/resource/preview/preview", "style": { "navigationBarTitleText": "效果预览", "enablePullDownRefresh": false, "navigationBarBackgroundColor": "#73ceda", "usingComponents": { "xr-start": "/wxcomponents/xr-start" }, "disableScroll": true } }
3.manifest.json配置
"mp-weixin": { "appid": "自己的appid", "setting": { "urlCheck": false, "postcss": true, "es6": true, "minified": true, "ignoreDevUnusedFiles": false, "ignoreUploadUnusedFiles": false }, "usingComponents": true, "lazyCodeLoading": "requiredComponents" },
4.使用preview.vue
<template> <view style="display: flex;flex-direction: column;"> <xr-start :modelPath="modelPath" id="main-frame" disable-scroll :width="renderWidth" :height="renderHeight" :style="'width:'+width+'px;height:'+height+'px;'"> </xr-start> </view> </template> <script> export default { onLoad(option) { this.modelPath = option.modelPath; 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 }, data() { return { width: 300, height: 300, renderWidth: 300, renderHeight: 300, modelPath: '' } }, methods: {} } </script> <style> </style>
不占主包空间(可以忽略)
到此这篇关于uniapp微信小程序使用xr加载模型的文章就介绍到这了,更多相关uniapp微信小程序使用xr内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
JavaScript动画原理之如何使用js进行动画效果的实现
在现在做页面很多时候都会用上动画效果,比如下拉菜单,侧边搜索栏,层的弹出与关闭等等,下面这篇文章主要给大家介绍了关于JavaScript动画原理之如何使用js进行动画效果实现的相关资料,需要的朋友可以参考下2023-04-04微信小程序bindinput与bindsubmit的区别实例分析
这篇文章主要介绍了微信小程序bindinput与bindsubmit的区别,结合实例形式分析了微信小程序bindinput与bindsubmit的具体功能、用法及相关使用区别,需要的朋友可以参考下2019-04-04
最新评论