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

2024-03-26 20:12

本文主要是介绍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().windowWidththis.height = uni.getWindowInfo().windowHeightconst dpi = uni.getWindowInfo().pixelRatiothis.renderWidth = this.width * dpithis.renderHeight = this.height * dpithis.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格式文件,体积小,加载快,非常适合小程序使用

这篇关于uniApp中使用小程序XR-Frame创建3D场景(2)加载模型的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/849708

相关文章

使用Spring Cache本地缓存示例代码

《使用SpringCache本地缓存示例代码》缓存是提高应用程序性能的重要手段,通过将频繁访问的数据存储在内存中,可以减少数据库访问次数,从而加速数据读取,:本文主要介绍使用SpringCac... 目录一、Spring Cache简介核心特点:二、基础配置1. 添加依赖2. 启用缓存3. 缓存配置方案方案

使用Python的requests库来发送HTTP请求的操作指南

《使用Python的requests库来发送HTTP请求的操作指南》使用Python的requests库发送HTTP请求是非常简单和直观的,requests库提供了丰富的API,可以发送各种类型的HT... 目录前言1. 安装 requests 库2. 发送 GET 请求3. 发送 POST 请求4. 发送

Spring创建Bean的八种主要方式详解

《Spring创建Bean的八种主要方式详解》Spring(尤其是SpringBoot)提供了多种方式来让容器创建和管理Bean,@Component、@Configuration+@Bean、@En... 目录引言一、Spring 创建 Bean 的 8 种主要方式1. @Component 及其衍生注解

Nginx中配置使用非默认80端口进行服务的完整指南

《Nginx中配置使用非默认80端口进行服务的完整指南》在实际生产环境中,我们经常需要将Nginx配置在其他端口上运行,本文将详细介绍如何在Nginx中配置使用非默认端口进行服务,希望对大家有所帮助... 目录一、为什么需要使用非默认端口二、配置Nginx使用非默认端口的基本方法2.1 修改listen指令

Python WebSockets 库从基础到实战使用举例

《PythonWebSockets库从基础到实战使用举例》WebSocket是一种全双工、持久化的网络通信协议,适用于需要低延迟的应用,如实时聊天、股票行情推送、在线协作、多人游戏等,本文给大家介... 目录1. 引言2. 为什么使用 WebSocket?3. 安装 WebSockets 库4. 使用 We

python中的显式声明类型参数使用方式

《python中的显式声明类型参数使用方式》文章探讨了Python3.10+版本中类型注解的使用,指出FastAPI官方示例强调显式声明参数类型,通过|操作符替代Union/Optional,可提升代... 目录背景python函数显式声明的类型汇总基本类型集合类型Optional and Union(py

Java使用正则提取字符串中的内容的详细步骤

《Java使用正则提取字符串中的内容的详细步骤》:本文主要介绍Java中使用正则表达式提取字符串内容的方法,通过Pattern和Matcher类实现,涵盖编译正则、查找匹配、分组捕获、数字与邮箱提... 目录1. 基础流程2. 关键方法说明3. 常见场景示例场景1:提取所有数字场景2:提取邮箱地址4. 高级

使用SpringBoot+InfluxDB实现高效数据存储与查询

《使用SpringBoot+InfluxDB实现高效数据存储与查询》InfluxDB是一个开源的时间序列数据库,特别适合处理带有时间戳的监控数据、指标数据等,下面详细介绍如何在SpringBoot项目... 目录1、项目介绍2、 InfluxDB 介绍3、Spring Boot 配置 InfluxDB4、I

使用Java读取本地文件并转换为MultipartFile对象的方法

《使用Java读取本地文件并转换为MultipartFile对象的方法》在许多JavaWeb应用中,我们经常会遇到将本地文件上传至服务器或其他系统的需求,在这种场景下,MultipartFile对象非... 目录1. 基本需求2. 自定义 MultipartFile 类3. 实现代码4. 代码解析5. 自定

使用Python实现无损放大图片功能

《使用Python实现无损放大图片功能》本文介绍了如何使用Python的Pillow库进行无损图片放大,区分了JPEG和PNG格式在放大过程中的特点,并给出了示例代码,JPEG格式可能受压缩影响,需先... 目录一、什么是无损放大?二、实现方法步骤1:读取图片步骤2:无损放大图片步骤3:保存图片三、示php