uniApp中使用小程序XR-Frame创建3D场景(2)加载模型

这篇具有很好参考价值的文章主要介绍了uniApp中使用小程序XR-Frame创建3D场景(2)加载模型。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

上篇文章讲述了如何将XR-Frame作为子组件集成到uniApp中使用,只完成了简单的环境搭建,这篇文章讲解如何加载3D模型。

1 加入模型加载标签

在XR-Frame框架中,加载资源都是在wxml文件的标签中实现的。下面是wxml中完整的代码

index.wxml

<xr-scene render-system="alpha:true" bind:ready="handleReady">
	<xr-assets>
		<xr-asset-load type="gltf" asset-id="gltf-model" src="{{url}}" options="ignoreError:-1"/>
	</xr-assets>
	<xr-node>
		<xr-gltf node-id="gltf-model" bind:gltf-loaded="handleGLTFLoaded" model="gltf-model"></xr-gltf>
	</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-camera id="camera" clear-color="0 0 0 0" position="1 1 2" target="gltf-model" camera-orbit-control/>
</xr-scene>

上面代码中,<xr-assets> 标签代表要加载资源<xr-asset-load>标签是要加载资源具体的属性,

其中 type 属性为要加载的资源格式,这里采用gltf格式比较方便,也是小程序官方推荐的格式,

asset-id 属性是资源的ID,设置设个属性主要是为了后续节点的操作。

options 属性这里设置为-1 是因为模型本身可能会超过小程序的限制,造成无法加载,设置为-1就会强行加载模型,但加载出的模型材质可能会出现意外的错误。所谓这个设置要慎重。

<xr-node> 表示这是一个节点,节点下可能放很多模型或内置的网格,便于统一管理。比如统一将一批node下的模型旋转,缩小,移动等操作。

<xr-gltf> 表示这是一个gltf 模型,model属性赋值为<xr-asset-load>标签的asset-id,代表要显示的就是这个id资源模型。

后面我还加入了两个光源<xr-light>,分别是环境光和聚光灯。

2.动态加载外部模型

在wxml文件中,我们将<xr-asset-load> 标签中属性src的值绑定为一个变量为 url

这样,我们就需要在index.js 文件中给这个变量赋一个初始值

index.js

Component({
	properties: {
		url: {
			type: String,
			value: ''
		}
	},
	data: {
	},
	methods: {
		handleGLTFLoaded() {
			console.log('模型加载完成')
			wx.hideLoading()
		},
	}
})

这部分代码比较简单,这里给url赋值为空,然后我们在父组件中给这个变量赋值为对应的模型地址,这样就可以动态的加载模型。

代码中还有一个handleGLTFLoaded()方法,这个方法是在wxml文件中<xr-gltf>标签内绑定的加载模型完成后调用的回调函数。我们可以在这个函数中根据场景再对模型做一些微调。

3.父组件给子组件赋值

通过上面两步,子组件的代码已经编写完成。下面我们只需要在调用xr-frame的页面给子组件的url属性赋值即可。

index.vue

<template>
	<view style="display: flex;flex-direction: column;">
		<xr-start id="main-frame" disable-scroll
		:url="url"
		:width="renderWidth"
		:height="renderHeight"
		:style="'width:'+width+'px;height:'+height+'px;'">
		</xr-start>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				url:"https://mp-f8b2202e-3122-48e4-9c72-9407860f72c5.cdn.bspapp.com/newModel/md58/580001.glb",
				width:300,
				height:300,
				renderWidth:300,
				renderHeight:300,
			}
		},
		onLoad(option){
			uni.showLoading({
				title:'模型加载中...'
			})
			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
			this.url = "https://mp-f8b2202e-3122-48e4-9c72-9407860f72c5.cdn.bspapp.com/newModel/md58/580001.glb"
		},
		methods: {
		
		}
	}
</script>

<style>
page{
	background-color: #303030;
	background-repeat: no-repeat;
	background-size: 100%;
	background-image: url("https://mmbiz.qpic.cn/mmbiz_jpg/DWsjgNA1bNhdC11VLBgx2BWNTPV9IpOibepzbDy76xTme7ByunTCCPnafo2Y4I6hWz1PMlQxaSib6pmXu8C0IO5A/640?wx_fmt=jpeg&amp;from=appmsg");
}
</style>

onLoad()函数中,我们首先根据屏幕大小和pixelRatio重新设置的xr-frame组件的大小。

然后给url赋值为自己服务器中存储的模型链接地址。

这里给大家推荐一个微信小程序 3D模型素材库,这个小程序中的模型都是针对小程序优化后的glb格式文件,体积小,加载快,非常适合小程序使用

uni加载3d模型,uni-app,xr文章来源地址https://www.toymoban.com/news/detail-860668.html

到了这里,关于uniApp中使用小程序XR-Frame创建3D场景(2)加载模型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • XR-FRAME 开始

    xr-frame 是一套小程序官方提供的XR/3D应用解决方案,基于混合方案实现,性能逼近原生、效果好、易用、强扩展、渐进式、遵循小程序开发标准。 在这一章中,我们将会带大家从头开始,用它构建一个XR小程序。 首先创建项目,让我们选择小程序工程: 之后先在 app.json 加上

    2024年02月12日
    浏览(62)
  • 使用cannon.js创建3D物理仿真场景

    本文将详细介绍使用cannon.js创建3D物理仿真场景的步骤和技巧。 cannon.js是一个开源的JavaScript物理库,用于实现3D物理仿真。它可以被用于游戏开发、机器人控制、交互式的3D应用以及其他需要物理交互的场景。 与其他物理库不同的是,cannon.js是一个非常轻量级的库,它的代码

    2024年02月06日
    浏览(35)
  • GameFrameWork框架(Unity3D)使用笔记(八) 实现场景加载进度条

            游戏在转换场景的时候,需要花费时间来加载相关的资源。而这个过程往往因为游戏场景的规模和复杂度以及玩家电脑配置的原因花费一小段时间(虽然这个项目里用不到)。         所以,如果这一小段时间,画面就卡在这里,啥也做不了,玩家也不知道啥时候能

    2024年02月02日
    浏览(49)
  • uniapp使用threejs-miniprogram在微信小程序加载模型

    1.通过 npm 安装 2.导入小程序版本的 Three.js并创建一个与 canvas 绑定的 three.js  3.创建渲染器 4.创建场景,创建相机,渲染 5.注册GLTF加载器,加载模型添加到场景 threejs-miniprogram/example/loaders/gltf-loader.js at master · wechat-miniprogram/threejs-miniprogram · GitHub 下载 gltf-loader.js 注册gltf-loader 加

    2024年02月08日
    浏览(50)
  • (2023,3D 场景生成器 Infinigen)使用程序化生成的无限逼真世界

    Infinite PhotorealisticWorlds using Procedural Generation 公众号:EDPJ 目录 0. 摘要 1. 简介 2. 相关工作 3. 方法 4. 实验  参考 S. 总结 S.1 主要思想 S.2 方法 S.3 场景生成 我们介绍 Infinigen,一个自然世界逼真 3D 场景的程序生成器。 Infinigen 完全是程序化的:从形状到纹理的每一个资产(asse

    2024年02月16日
    浏览(72)
  • OPenGL笔记--创建一个3D场景

    通过前面的学习,基本掌握了怎么绘制图形,使用纹理,接下来就来创建一个3D场景。 基本原理 一个复杂的场景肯定是由一些简单的图形,通过某种组合方式构建起来的,在OPenGL中也不例外;例如:在绘制立方体的时候,立方体也是由6个正方形围起来的; 基本图形 由于显卡

    2024年02月11日
    浏览(41)
  • ThreeJS-3D教学一:基础场景创建

    Three.js 是一个开源的 JS 3D 图形库,用于创建和展示高性能、交互式的 3D 图形场景。它建立在 WebGL 技术之上,并提供了丰富的功能和工具,使开发者可以轻松地构建令人惊叹的 3D 可视化效果。 Three.js 提供了一套完整的工具和 API,用于创建和管理 3D 场景、几何体、纹理、光照

    2024年02月07日
    浏览(56)
  • 五、3d场景的卡片展示的创建

            在我们3d的开发中,对某一些建筑和物体进行解释说明是非常常见的现象,那么就不得不说卡片的展示了,卡片展示很友好的说明了当前物体的状态,一目了然,下面就是效果图。 它主要有两个方法来实现,大量的图片建议使用canvas来实现,少量的可以使用标签实

    2024年02月03日
    浏览(40)
  • Three.js之创建3D场景

    【G】Three.js官方文档:https://threejs.org/docs/ Three.js是一个流行的WebGL库,官方文档提供了详细的API参考和示例,适合学习和参考。 【G】Three.js GitHub链接:https://github.com/mrdoob/three.js 这是一个流行的基于WebGL的3D图形库,提供了丰富的功能和工具,用于创建交互式的3D场景和应用。

    2024年02月14日
    浏览(82)
  • 【Three.js基础入门】:创建你的第一个3D场景

    Three.js是一种强大的JavaScript库,用于在Web浏览器中创建交互式的3D图形和动画。无需熟练的图形编程经验,你也可以通过Three.js轻松地构建令人惊叹的3D场景。 本文将带你逐步学习如何入门Three.js,从创建一个简单的3D场景开始。 我们将介绍如何使用Three.js创建你的第一个3D场景

    2024年02月16日
    浏览(164)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包