uniapp微信小程序使用xr加載模型的操作方法

更新時間：2024年07月03日 10:52:31 作者：一只大菜鳥J

這篇文章主要介紹了uniapp微信小程序使用xr加載模型的操作方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧

1.在根目錄與pages同級創(chuàng)建如下目錄結構和文件：

// index.js
Component({
	properties: {
		modelPath: { // vue頁面?zhèn)鬟^來的模型
			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": "效果預覽",
					"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內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: