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实现登录滑块验证

    JavaScript实现登录滑块验证

    这篇文章主要为大家详细介绍了JavaScript实现登录滑块验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • TypeScript数组的定义与使用详解

    TypeScript数组的定义与使用详解

    数组对象是使用单独的变量名来存储一系列的值,数组非常常用,数组是具有连续存储位置的相似类型元素的同质集合。数组是用户定义的数据类型。数组是一种数据结构,我们在其中存储相似数据类型的元素
    2022-09-09
  • Canvas实现二娃翠花回家之路小游戏demo解析

    Canvas实现二娃翠花回家之路小游戏demo解析

    这篇文章主要为大家介绍了Canvas实现二娃翠花回家之路小游戏demo解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • Qt6基于Qml的文件对话框演示效果

    Qt6基于Qml的文件对话框演示效果

    这篇文章主要介绍了Qt6基于Qml的文件对话框演示,包括打开单个文件配置和打开多个文件配置及保存文件配置的方法,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • 小程序实现滑动块效果

    小程序实现滑动块效果

    这篇文章主要为大家详细介绍了小程序实现滑动块,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • JavaScript实现为input与textarea自定义hover,focus效果的方法

    JavaScript实现为input与textarea自定义hover,focus效果的方法

    这篇文章主要介绍了JavaScript实现为input与textarea自定义hover,focus效果的方法,可实现根据鼠标事件动态改变input与textarea样式的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 微信小程序-小说阅读小程序实例(demo)

    微信小程序-小说阅读小程序实例(demo)

    本篇文章主要介绍了微信小程序-阅读小程序实例(demo),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • jqplot通过ajax动态画折线图的方法及思路

    jqplot通过ajax动态画折线图的方法及思路

    这篇文章主要介绍了
    2013-12-12
  • JavaScript实现标签页切换效果

    JavaScript实现标签页切换效果

    这篇文章主要为大家详细介绍了JavaScript实现标签页切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • IntersectionObserver实现图片懒加载的示例

    IntersectionObserver实现图片懒加载的示例

    下面小编就为大家带来一篇IntersectionObserver实现图片懒加载的示例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论