uniapp微信小程序使用xr加載模型的操作方法
1.在根目錄與pages同級(jí)創(chuàng)建如下目錄結(jié)構(gòu)和文件:

// index.js
Component({
properties: {
modelPath: { // vue頁(yè)面?zhèn)鬟^(guò)來(lái)的模型
type: String,
value: ''
}
},
data: {},
methods: {}
}){ // index.json
"component": true,
"renderer": "xr-frame",
"usingComponents": {}
}<!-- index.wxml -->
<!-- 加載靜態(tài)模型 -->
<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": "效果預(yù)覽",
"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>不占主包空間(可以忽略)
到此這篇關(guān)于uniapp微信小程序使用xr加載模型的文章就介紹到這了,更多相關(guān)uniapp微信小程序使用xr內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實(shí)現(xiàn)登錄滑塊驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)登錄滑塊驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04
Canvas實(shí)現(xiàn)二娃翠花回家之路小游戲demo解析
這篇文章主要為大家介紹了Canvas實(shí)現(xiàn)二娃翠花回家之路小游戲demo解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04
JavaScript實(shí)現(xiàn)為input與textarea自定義hover,focus效果的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)為input與textarea自定義hover,focus效果的方法,可實(shí)現(xiàn)根據(jù)鼠標(biāo)事件動(dòng)態(tài)改變input與textarea樣式的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
微信小程序-小說(shuō)閱讀小程序?qū)嵗╠emo)
本篇文章主要介紹了微信小程序-閱讀小程序?qū)嵗╠emo),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
jqplot通過(guò)ajax動(dòng)態(tài)畫(huà)折線圖的方法及思路
這篇文章主要介紹了2013-12-12
JavaScript實(shí)現(xiàn)標(biāo)簽頁(yè)切換效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)標(biāo)簽頁(yè)切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10
IntersectionObserver實(shí)現(xiàn)圖片懶加載的示例
下面小編就為大家?guī)?lái)一篇IntersectionObserver實(shí)現(xiàn)圖片懶加載的示例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09

