uniApp中使用小程序XR-Frame创建3D场景(1)环境搭建

1.XR-Frame简介

XR-Frame作为微信小程序官方推出的3D框架,是目前所有小程序平台中3D效果最好的一个,由于其本身针对微信小程序做了优化,在性能方面比其他第三方库都要高很多。

2.与Three.js的区别

做3D小程序的同学们对Three.js一定不陌生,这是个跨平台的3D前端框架,使用广泛,但是针对微信小程序的优化并不理想,而且库文件本身比较大,由于小程序的内存限制,一旦加载的3D文件过多,非常容易造成卡顿。

既然微信小程序端推出了XR-Frame,我们就应该积极的去熟悉这个框架,做出更好用的小程序。

3.在uniApp中创建XR-Frame组件

(1)新建wxcomponents文件夹

上图是我的项目目录,首先在与pages同级目录下,创建wxcomponents文件夹,这个文件夹就是要调用的xr-frame组件目录。

(2)在 wxcomponents 文件夹下创建 xr-start 目录

这个目录是我们要在其他页面调用xr-frame时需要使用的组件名称,这里我们先创建好。

(3)在 xr-start 目录下创建 index.js  index.json  index.wxml 三个文件

这三个文件分别代表了xr-frame的逻辑,配置,以及视图文件。下面是分别是这三个文件中的代码

index.js

这个js文件中以后要做一些对于属性的设置以及组件方法的编写。

// index.js
Component({properties: {},data:{},methods: {}
})

index.json

这个json配置文件就是告诉系统要采用xr-frame框架渲染。

{"component": true,"renderer": "xr-frame","usingComponents":{}
}

index.wxml

这个wxml文件是我们使用xr-frame的主要文件,我们先简单的只添加一个摄像机。

<xr-scene><xr-camera id="camera" clear-color="0.2 0.4 0.6 1" camera-orbit-control/>
</xr-scene>

(4) 创建完上面三个文件后,我们还需要修改 manifest.json 文件,切换到源码视图

修改微信相关设置

 "mp-weixin" : {"appid" : "你的appid","setting" : {"urlCheck" : false,"postcss" : true,"es6" : true,"minified" : true},"usingComponents" : true,"lazyCodeLoading" : "requiredComponents"},

(5)修改pages.json文件中的配置

这里就是在你需要调用组件的页面上加入 usingComponents 设置。比如我在页面demo中加入如下配置

"pages": [ {"path" : "pages/demo/demo","style" : {"navigationBarTitleText" : "","enablePullDownRefresh" : false,"usingComponents": {"xr-start": "../../wxcomponents/xr-start"},"disableScroll": true}}],

到这里环境就配置好了,接下来我们看看如何在页面中使用XR-Frame

4.在项目中使用XR-Frame

这里我以demo.vue页面为例。

1 在view标签中直接加上xr-start标签即可引入

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

2 在data中设置一下默认的宽高

data() {return {width:300,height:300,renderWidth:300,renderHeight:300,}
},

3 在onLoad函数中获取屏幕大小,将xr-frame设置为全屏大小

onLoad(option){this.width = uni.getWindowInfo().windowWidththis.height = uni.getWindowInfo().windowHeightconst dpi = uni.getWindowInfo().pixelRatiothis.renderWidth = this.width * dpithis.renderHeight = this.height * dpi},

4 我们运行到小程序模拟器

这时我们应该能看到一个页面为蓝色的页面(camera中设置的color是蓝色),这说明xr-frame框架可以正常运行了。

下一篇我们讲解,如何在xr-frame中加载模型以及模型的优化。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/761661.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

huggingface_hub

文章目录 一、关于 huggingface_hub二、安装三、快速入门指南1、下载文件1.1 下载单个文件 hf_hub_download1.2 下载整个库 snapshot_download 2、登录3、创建一个存储库 create_repo4、上传文件4.1 上传单个文件 upload_file4.2 上传整个存储库 upload_folder 四、集成到 Hub …

图论06-飞地的数量(Java)

6.飞地的数量 题目描述 给你一个大小为 m x n 的二进制矩阵 grid &#xff0c;其中 0 表示一个海洋单元格、1 表示一个陆地单元格。 一次 移动 是指从一个陆地单元格走到另一个相邻&#xff08;上、下、左、右&#xff09;的陆地单元格或跨过 grid 的边界。 返回网格中 无法…

【PyCaret】使用PyCaret创建机器学习Pipeline进行多分类任务

发现一个好东西&#xff0c;PyCaret机器学习Pipeline&#xff0c;记录一下用其进行多分类任务的使用方法。 1、简介 PyCaret是一个开源的、不用写很多代码的Python机器学习库&#xff0c;可以自动化机器学习工作流程&#xff0c;是一个端到端的机器学习和模型管理工具&#xff…

登录与注册功能(简单版)(3)登录时使用Cookie增加记住我功能

目录 1、实现分析 2、步骤 1&#xff09;新建login.jsp 2&#xff09;修改LoginServlet&#xff1a; 3&#xff09;启动访问&#xff1a; 3、安全性考虑 4、最佳实践思路 1&#xff09;选择安全的认证机制 2&#xff09;强化会话管理 3&#xff09;安全地存储用户凭证…

Android App 如何 隐藏 HTTPS 请求,不让Charles 可以抓到数据,请求不可见?

使用SSL Pinning&#xff1a; 实现SSL Pinning来确保应用只与预期的服务器通信。这样&#xff0c;即使抓包工具可以拦截HTTPS请求&#xff0c;但由于证书不匹配&#xff0c;无法解密通信内容。 加密请求内容&#xff1a; 在应用中使用加密算法对请求内容进行加密处理&#xff…

Unity 粒子在UI中使用时需要注意的地方

最近项目中要在UI中挂载粒子特效,美术给过来的粒子直接放到UI中会有一些问题,查询一些资料后,总结了一下 一: 粒子的大小发生变化,与在预制件编辑中设计的大小不同 在预制件编辑模式下,大小正常 实际使用的时候特别大或者特别小 经过检查,发现预制件编辑模式下,默认画布的Rend…

上位机图像处理和嵌入式模块部署(qmacvisual点线测量)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 上面一篇文章&#xff0c;我们完成了直线的拟合操作。在实际场景中&#xff0c;拟合之后更多地是需要进行长度的测量。既然是测量&#xff0c;那么…

【JavaScript 漫游】【040】Blob 对象

文章简介 本篇文章为【JavaScript 漫游】专栏的第 040 篇文章&#xff0c;对浏览器模型中的 Blob 对象进行了总结。 概述 Blob 对象表示一个二进制文件的数据内容&#xff0c;比如一个图片文件的内容就可以通过 Blob 对象读写。它通常用来读写文件&#xff0c;它的名字是 Bi…

uniapp中预览base64图片

一、首先要安装插件image-tools&#xff0c;插件地址&#xff1a;https://ext.dcloud.net.cn/plugin?id123 npm i image-tools --save二、引入 import {pathToBase64,base64ToPath} from image-tools三、应用 openImg(){//预览图片 let that this;uni.showLoading({title:…

哪些企业适合构建企业新媒体矩阵?

⭐关注矩阵通服务号&#xff0c;探索企业新媒体矩阵搭建与营销策略 新媒体矩阵就是在某个平台或多个平台开设、联动多个账号&#xff0c;组建有关系的不同账号集群。 在数字化转型的浪潮下&#xff0c;矩阵已然成为企业实现品牌塑造、市场开拓与用户互动的重要阵地。 然而&…

2024Android-目前最稳定和高效的UI适配方案!你头秃都没想到还能这样吧!

但是这个方案有一个致命的缺陷&#xff0c;那就是需要精准命中才能适配&#xff0c;比如1920x1080的手机就一定要找到1920x1080的限定符&#xff0c;否则就只能用统一的默认的dimens文件了。而使用默认的尺寸的话&#xff0c;UI就很可能变形&#xff0c;简单说&#xff0c;就是…

HTTP跨域

1. 简介 HTTP跨域是指不同域名下的网页请求资源时&#xff0c;由于浏览器同源策略限制&#xff0c;导致请求被阻止。为解决这一问题&#xff0c;开发者常采用跨域资源共享&#xff08;CORS&#xff09;等技术来允许合法跨域请求&#xff0c;确保网站功能正常运行。 同源 协议…

【ARM 嵌入式 C 入门及渐进 12 --寄存器位清0和置位函数实现】

文章目录 寄存器位清0和置位函数实现示例使用方式注意事项 寄存器位清0和置位函数实现 在 C 语言中&#xff0c;可以使用宏定义来创建用于清除&#xff08;清零&#xff09;或设置&#xff08;置一&#xff09;32位地址中特定位的函数。以下是两个宏定义的示例&#xff1a; #…

记一次由于buff/cache导致服务器内存爆满的问题

目录 前言 复现 登录服务器查看占用内存进程排行 先了解一下什么是buff/cache&#xff1f; 尝试释放buffer/cache /proc/sys/vm/drop_caches dirty_ratio dirty_background_ratio dirty_writeback_centisecs dirty_expire_centisecs drop_caches page-cluster swap…

设计模式(行为型设计模式——观察者模式)

设计模式&#xff08;行为型设计模式——观察者模式&#xff09; 观察者模式 基本定义 指多个对象间存在一对多的依赖关系&#xff0c;这样一来&#xff0c;当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都得到通知并被自动更新。 这种模式又称作发布-订阅模式…

阿里云国际设置黑白名单(针对高防实例IP)

DDoS高防支持针对高防实例设置黑名单和白名单&#xff0c;以拦截或放行指定IP的访问请求&#xff0c;配置后对该实例所有的业务生效。本文九河云介绍如何配置黑白名单。 功能介绍 黑名单IP的访问流量将被DDoS高防实例直接丢弃。白名单IP的访问流量将被DDoS高防实例直接放行。…

ideaSSM 人才引进管理系统bootstrap开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 idea 开发 SSM 人才引进管理系统是一套完善的信息管理系统&#xff0c;结合SSM框架和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库&#xff…

分布式链上随机数和keyless account

1. 引言 相关论文见&#xff1a; Aptos团队2024年论文 Distributed Randomness using Weighted VRFs 相关代码实现见&#xff1a; https://github.com/aptos-labs/aptos-core&#xff08;Rust&#xff09; 在链中生成和集成共享随机数&#xff0c;以扩展应用和强化安全。该…

G - Find a way

题目分析 1.双重bfs,遍历两个起点求最短路再计算总和即可 2.唯一的坑点在于对于一个KFC&#xff0c;两人中可能有一个到不了&#xff0c;所以还要对到不了的点距离做处理 #include <bits/stdc.h> using namespace std; using ll long long; const int N 220;struct pos…

交通事故档案管理系统|基于JSP技术+ Mysql+Java+Tomcat的交通事故档案管理系统设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含java&#xff0c;ssm&#xff0c;springboot的平台设计与实现项目系统开发资源&#xff08;可…