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().windowWidththis.height = uni.getWindowInfo().windowHeightconst dpi = uni.getWindowInfo().pixelRatiothis.renderWidth = this.width * dpithis.renderHeight = this.height * dpi},data() {return {width: 300,height: 300,renderWidth: 300,renderHeight: 300,modelPath: ''}},methods: {}}
</script><style>
</style>

不占主包空間(可以忽略)

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/39473.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/39473.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/39473.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Element-plus點擊當前行之后獲取數據顯示跟隨行數據

要實現點擊當前行后&#xff0c;在當前行的下方顯示數據&#xff0c;可以通過以下步驟來實現&#xff1a; 在表格的行點擊事件中獲取當前點擊行的位置信息。根據位置信息動態計算并設置需要顯示數據區域的位置。 下面是一個更新后的示例代碼&#xff0c;演示如何在 Element-P…

Unity 引擎收費模式變革:游戲開發者的挑戰與機遇

Unity 引擎作為游戲開發領域中的重要工具&#xff0c;近日宣布將在 2024 年 1 月 1 日起根據游戲安裝量對開發者進行收費。這一決定引起了業界的廣泛關注和討論。據 Unity 技術博客發布的《Unity 收費模式和配套服務更新》一文&#xff0c;他們選擇這種計費方式是基于每次游戲被…

PHP和phpSpider:如何應對網站變動導致的數據爬取失敗?

php和phpspider&#xff1a;如何應對網站變動導致的數據爬取失敗&#xff1f; 導語&#xff1a; 網絡爬蟲是一種自動化程序&#xff0c;用于從網站上獲取數據并進行處理。PHP是一種廣泛使用的編程語言&#xff0c;而phpSpider是一個基于PHP的開源網絡爬蟲框架。然而&#xff0…

軟降工程學系統實現

一、程序編碼 程序編碼是設計的繼續&#xff0c;將軟件設計的結果翻譯成用某種程序設計語言描述的源代碼。 程序編碼涉及到方法、工具和過程。 程序設計風格和程序設計語言的特性會深刻地影響軟件的質量和可維護性。 要求源程序具有良好的結構性和設計風格。 程序設計風格…

開啟IT世界的探索之旅——致有志于踏入IT領域的高考少年們

高考已成過去&#xff0c;而前方是無限可能的未來。對于那些有志于進入IT領域的高考生來說&#xff0c;這個暑假是你們開啟探索IT世界的絕佳時機。作為一名從事C#軟件開發的專業人員&#xff0c;我希望能通過這篇文章&#xff0c;分享一些學習路線圖和經驗心得&#xff0c;幫助…

【web3】分享一個web入門學習平臺-HackQuest

前言 一直想進入web3行業&#xff0c;但是沒有什么途徑&#xff0c;偶然在電鴨平臺看到HackQuest的共學營&#xff0c;發現真的不錯&#xff0c;并且還接觸到了黑客松這種形式。 鏈接地址&#xff1a;HackQuest 平臺功能 學習路徑&#xff1a;平臺有完整的學習路徑&#xff…

【聊聊原子性,中斷,以及nodejs中的具體示例】

什么是原子性 從一個例子說起&#xff0c; x &#xff0c;讀和寫 &#xff0c; 如圖假設多線程&#xff0c;線程1和線程2同時操作變量x&#xff0c;進行x的操作&#xff0c;那么由于寫的過程中&#xff0c;都會先讀一份x數據到cpu的寄存器中&#xff0c;所以這個時候cpu1 和 c…

MyBatis-plus(下)

目錄 靜態工具 邏輯刪除 枚舉處理器 ?編輯?編輯JSON處理器 分頁插件 案例 靜態工具 只有save與update不需要傳class字節碼 UserController: MyServiceImpl: 改造根據id批量查詢用戶的接口&#xff0c;查詢用戶的同時&#xff0c;查詢出用戶對應的所有地址 Overrid…

容器內存

一、容器內存概述 容器本質上還是一個進程&#xff0c;是一個被隔離和限制的進程。因此容器內存和進程內存在表現形式上其實是一樣的&#xff0c;這塊主要涉及三部分內容&#xff1a;RSS&#xff0c;page cache和swap這三部分&#xff0c;容器基于memory Cgroup對內存進行限制…

用國內鏡像安裝docker 和 docker-compose (ubuntu)

替代方案&#xff0c;改用國內的鏡像站(網易鏡像&#xff09; 1.清除舊版本&#xff08;可選操作&#xff09; for pkg in docker.io docker-doc docker-compose podman-docker containerd runc; do apt-get remove $pkg; done 2.安裝docker apt-get update 首先安裝依賴 apt-g…

Linux驅動開發實戰寶典:設備模型、模塊編程、I2C/SPI/USB外設精講

摘要: 本文將帶你走進 Linux 驅動開發的世界,從設備驅動模型、內核模塊開發基礎開始,逐步深入 I2C、SPI、USB 等常用外設的驅動編寫,結合實際案例,助你掌握 Linux 驅動開發技能。 關鍵詞: Linux 驅動,設備驅動模型,內核模塊,I2C,SPI,USB 一、Linux 設備驅動模型 Li…

mysql創建表的規范

名稱 建表的時候&#xff0c;給表&#xff0c;字段和索引起個好名字 見名知意&#xff1a;好的名字能夠降低溝通和維護的成本名字不宜過長&#xff0c;盡量控制在30個字符以內 大小寫 名字盡量都用小寫字母&#xff0c;因為從視覺上&#xff0c;小寫字母更容易讓人讀懂全部大寫…

Linux嵌入式中MQTT的使用

MQTT是什么&#xff1f; MQTT&#xff08;Message Queuing Telemetry Transport&#xff0c;消息隊列遙測傳輸協議&#xff09;&#xff0c;是一種基于發布/訂閱&#xff08;Publish/Subscribe&#xff09;模式的輕量級通訊協議&#xff0c;該協議構建于TCP/IP協議上&#xff0…

駕馭npm更新之力:深入掌握npm update命令的精髓

駕馭npm更新之力&#xff1a;深入掌握npm update命令的精髓 在JavaScript和Node.js的世界中&#xff0c;npm&#xff08;Node Package Manager&#xff09;作為默認的包管理器&#xff0c;扮演著至關重要的角色。它不僅用于安裝和管理項目依賴&#xff0c;還提供了更新這些依賴…

SpringBoot3.3集成knif4j-swagger文檔方式和使用案例

springboot3 集成 knif4j &#xff1a; 訪問地址&#xff1a; swagger 接口文檔默認地址&#xff1a;http://localhost:8080/swagger-ui.html# Knife4j 接口文檔默認地址&#xff1a;http://127.0.0.1:8080/doc.html Maven: <dependency><groupId>com.github.x…

2024 COMMUNITY DAY User Group 社區嘉年華 云計算與 AI 技術交融盛會共筑多元智慧未來

亞馬遜云科技User Group&#xff0c;深圳 Community Day 活動流程搶先知道&#xff01; ? 7月7日 &#x1f3e0; 深圳南山區香港中文大學 &#x1f4e3;主論壇國際大咖云集&#xff0c;共襄科技盛宴&#xff01; &#x1f389;三大主題論壇&#xff1a;人工智能、大數據、動…

MyBatis系列三: XxxMapper.xml-SQL映射文件

XxxMapper.xml-SQL映射文件 官方文檔基本介紹詳細說明基本使用parameterType(輸入參數類型)傳入HashMapresultMap(結果集映射) 官方文檔 文檔地址: https://mybatis.org/mybatis-3/zh_CN/sqlmap-xml.html 基本介紹 1.MyBatis的真正強大在于它的語句映射(在XxxMapper.xml配置…

2024年06月CCF-GESP編程能力等級認證Python編程一級真題解析

本文收錄于專欄《Python等級認證CCF-GESP真題解析》,專欄總目錄:點這里,訂閱后可閱讀專欄內所有文章。 一、單選題(每題 2 分,共 30 分) 第 1 題 小楊父母帶他到某培訓機構給他報名參加CCF組織的GESP認證考試的第1級,那他可以選擇的認證語言有幾種?( ) A. 1 B. 2 C…

React@16.x(45)路由v5.x(10)源碼(2)- history

目錄 1&#xff0c;作用1.1&#xff0c;createBrowserHistory1.2&#xff0c;createHashHistory1.3&#xff0c;createMemoryHistory 2&#xff0c;history 對象的屬性2.1&#xff0c;action2.2&#xff0c;push / replace / go / goBack / goForward2.3&#xff0c;location2.…

網絡配線架的隱藏功能

網絡布線是確保現代信息社會高效運轉的關鍵技術之一。在這一領域&#xff0c;網絡配線架扮演著至關重要 的角色。它不僅僅是一個簡單的物理連接點&#xff0c;更擁有許多隱藏功能&#xff0c;這些功能極大地提升了網絡的 效率、穩定性和可管理性。 1、集中管理 網絡配線架提…