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类继承及实例化的方法,较为详细的分析了javascript扩展类、实例化类及类对象与成员函数的使用技巧,需要的朋友可以参考下
    2015-07-07
  • JavaScript动画原理之如何使用js进行动画效果的实现

    JavaScript动画原理之如何使用js进行动画效果的实现

    在现在做页面很多时候都会用上动画效果,比如下拉菜单,侧边搜索栏,层的弹出与关闭等等,下面这篇文章主要给大家介绍了关于JavaScript动画原理之如何使用js进行动画效果实现的相关资料,需要的朋友可以参考下
    2023-04-04
  • JavaScript 反射和属性赋值实例解析

    JavaScript 反射和属性赋值实例解析

    这篇文章主要介绍了JavaScript 反射和属性赋值实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • csdn 论坛技术区平均给分功能

    csdn 论坛技术区平均给分功能

    看论坛里技术区没有平均给分的功能,感觉散分很不方便,就写了一个:IE8,FF3.5下测试ok
    2009-11-11
  • JavaScript中判断整数的多种方法总结

    JavaScript中判断整数的多种方法总结

    这篇文章主要介绍了JavaScript中判断整数的多种方法总结,本文总结了5种判断整数的方法,如取余运算符判断、Math.round、Math.ceil、Math.floor判断等,需要的朋友可以参考下
    2014-11-11
  • 如何提高Dom访问速度

    如何提高Dom访问速度

    在浏览器中对于Dom的操作和普通的脚本的操作处于两个不同的dll中,两个dll的交互是比较耗时的,优化对Dom的操作可以提高脚本的执行速度。本文是对如何优化的一些总结。下面跟着小编一起来看下吧
    2017-01-01
  • JavaScript实现浅拷贝与深拷贝的方法分析

    JavaScript实现浅拷贝与深拷贝的方法分析

    这篇文章主要介绍了JavaScript实现浅拷贝与深拷贝的方法,结合实例形式总结分析了JavaScript浅拷贝与深拷贝的定义与使用方法,需要的朋友可以参考下
    2018-07-07
  • JS实现匀加速与匀减速运动的方法示例

    JS实现匀加速与匀减速运动的方法示例

    这篇文章主要介绍了JS实现匀加速与匀减速运动的方法,涉及javascript结合时间函数与数学运算动态操作页面元素样式的相关实现技巧,需要的朋友可以参考下
    2017-09-09
  • 微信小程序bindinput与bindsubmit的区别实例分析

    微信小程序bindinput与bindsubmit的区别实例分析

    这篇文章主要介绍了微信小程序bindinput与bindsubmit的区别,结合实例形式分析了微信小程序bindinput与bindsubmit的具体功能、用法及相关使用区别,需要的朋友可以参考下
    2019-04-04
  • JavaScript函数定义方法实例详解

    JavaScript函数定义方法实例详解

    这篇文章主要介绍了JavaScript函数定义方法,结合实例形式较为详细的分析了javascript函数的声明、定义、调用等原理与常见操作技巧,需要的朋友可以参考下
    2019-03-03

最新评论