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-04Canvas實(shí)現(xiàn)二娃翠花回家之路小游戲demo解析
這篇文章主要為大家介紹了Canvas實(shí)現(xiàn)二娃翠花回家之路小游戲demo解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04JavaScript實(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-01jqplot通過(guò)ajax動(dòng)態(tài)畫(huà)折線圖的方法及思路
這篇文章主要介紹了2013-12-12JavaScript實(shí)現(xiàn)標(biāo)簽頁(yè)切換效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)標(biāo)簽頁(yè)切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10IntersectionObserver實(shí)現(xiàn)圖片懶加載的示例
下面小編就為大家?guī)?lái)一篇IntersectionObserver實(shí)現(xiàn)圖片懶加載的示例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09