uniapp微信小程序使用xr加载模型

news2024/10/6 14:23:37

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>

不占主包空间(可以忽略)

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

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

相关文章

JVM原理(二):JVM之HotSpot虚拟机中对象的创建寻位与定位整体流程

1. 对象的创建 遇到new指令时 当Java虚拟机遇到一个字节码new指令时。 首先会去检查这个指令的参数是否能在常量池中定位到一个类的符号引用&#xff0c;并且检查这个符号引用代表的类是否被加载、解析和初始化过。 如果没有&#xff0c;那么必须执行类的加载过程(加载、检查…

面向工业化的多类电子元件自动计数系统测试报告

目录 1、项目描述 2、登录注册测试 2、主界面测试 2.1、在线计数测试 2.2、离线计数测试 2.3、浏览数据测试 1、项目描述 该系统利用机器视觉平台采集电子元件图像&#xff0c;设计并实现了适应不同形态分布的电子元件计数模型&#xff0c;能够快速且准确地进行计数和分类&…

Unity海面效果——3、漫反射颜色和水波

Unity引擎制作海面效果 大家好&#xff0c;我是阿赵。 之前介绍了菲涅尔水的反射区域区分做法&#xff0c;上一次最后是做到了这个效果&#xff0c;接下来做一下漫反射的颜色和水波。 一、 漫反射颜色 关于漫反射的光照模型&#xff0c;之前分享过&#xff0c;一般比较常用的是…

SSM OA办公系统19159

SSM OA办公系统 摘 要 随着现代信息技术的快速发展以及企业规模不断扩大&#xff0c;实现办公线上流程自动化已成为提升企业核心竞争力的关键。本文主要介绍的是利用Spring、SpringMVC和MyBatis&#xff08;简称为&#xff1a;SSM&#xff09;框架&#xff0c;MySQL数据库等先…

如果这时你还不清理C盘,那只能眼睁睁看着电脑越来越卡 直到系统崩溃

如果这时候你还不清理C盘&#xff0c;那只能眼睁睁看着电脑越来越卡 直到系统崩溃。很多人就是想偷懒&#xff0c;当然这是人的天性&#xff0c;明明知道自己的C盘空间就那么大&#xff0c;一天天看着C盘空间越来越小&#xff0c;还不去清理C盘。 这样的人有两种&#xff0c;一…

【计算机毕业设计】基于Springboot的大学生就业招聘系统【源码+lw+部署文档】

包含论文源码的压缩包较大&#xff0c;请私信或者加我的绿色小软件获取 免责声明&#xff1a;资料部分来源于合法的互联网渠道收集和整理&#xff0c;部分自己学习积累成果&#xff0c;供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者…

构建LangChain应用程序的示例代码:50、如何在检索-生成 (RAG) 应用中利用多模态大型语言模型 (LLM) 处理包含文本和图像的混合文档的示例

多模态 RAG 许多文档包含多种内容类型&#xff0c;包括文本和图像。 然而&#xff0c;大多数 RAG 应用中&#xff0c;图像中捕获的信息往往被忽略。 随着多模态 LLM 的出现&#xff0c;如 GPT-4V&#xff0c;值得考虑如何在 RAG 中利用图像&#xff1a; 选项 1&#xff1a;…

【Java面试场景题】微信抢红包的功能是如何实现的,如果让你来做你怎么设计?

一、问题解析 实现拼手气红包算法&#xff0c;有以下几个需要注意的地方&#xff1a; 抢红包的期望收益应与先后顺序无关保证每个用户至少能抢到一个预设的最小金额&#xff0c;人民币红包设置的最小金额一般是0.01元&#xff0c;如果需要发其他货币类型的红包&#xff0c;比…

云微客矩阵系统:如何利用智能策略引领营销新时代?

近些年&#xff0c;短视频行业的风头一时无二&#xff0c;大量的商家和企业进驻短视频赛道&#xff0c;都或多或少的实现了实体门店的流量增长。虽然说现在短视频的门槛在逐步降低&#xff0c;但是迄今为止依旧有很多人在短视频剪辑面前望而却步。 最近在短视频营销领域&#x…

3.js - 深度测试、深度写入、深度函数

md&#xff0c;艹&#xff0c;这玩意得理解&#xff0c;只看代码不管事 效果图 代码 // ts-nocheck// 引入three.js import * as THREE from three// 导入轨道控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls// 导入lil.gui import { GUI } …

Git新仓库创建流程

平时需要创建新仓库,老要去查代码特别烦&#xff0c;在此写下流程方便备用. 1.创建新的云仓库 无论使用GitHub还是Gitee,首先要创建一个云仓库&#xff0c;这里就直接用国内的gitee做演示了&#xff0c;githup老挂加速器太烦&#xff0c;偷个懒. 我这里创建的是一个空仓库&…

DLS-42/5-5双位置继电器 DC220V 板后接线 约瑟JOSEF

DLS-40系列双位置继电器型号&#xff1a; DLS-41/10-2双位置继电器&#xff1b; DLS-41/9-3双位置继电器 DLS-41/8-4双位置继电器&#xff1b; DLS-41/6-6双位置继电器&#xff1b; DLS-42/9-1双位置继电器&#xff1b; DLS-42/8-2双位置继电器&#xff1b; DLS-42/7-3双位…

教师工作经历轻松管理,智慧校园人事系统助您事半功倍

智慧校园人事系统中的教师工作经历管理模块&#xff0c;是一个集记录、跟踪、分析于一体的综合平台&#xff0c;专注于教师职业生涯的全貌管理&#xff0c;从初次入职到每一次岗位变动、学术成就及专业发展轨迹&#xff0c;旨在为学校提供一个全面了解教师专业成长、优化师资配…

能自动铲屎的养猫救星?带你了解热门爆款智能猫砂盆的真实体验!

在谈论猫咪的日常生活时&#xff0c;我和朋友最经常聊的话题就是在各种各样的紧急情况下如何狼狈地赶回去给猫咪铲屎&#xff0c;毕竟猫砂盆里的屎但凡停留那么几小时&#xff0c;就要开始发臭了&#xff0c;一下班回去实在受不了那个味道&#xff0c;每次下班在家门口都想带个…

mac有什么解压软件 mac怎么解压7z软件 苹果电脑好用的压缩软件有哪些

众所周知&#xff0c;macOS集成解压缩软件归档实用工具&#xff0c;可直接解压zip格式的压缩包。但对于其他比较常见的格式&#xff0c;诸如RAR、7z、TAR等&#xff0c;则无能为力&#xff0c;不过&#xff0c;我们可以选择大量第三方解压缩软件&#xff0c;帮助我们更好地完成…

为什么 [] == ![] 为 true?

&#x1f9d1;‍&#x1f4bb; 写在开头 点赞 收藏 学会&#x1f923;&#x1f923;&#x1f923; 前言 面试官问我&#xff0c;[] ![] 的结果是啥&#xff0c;我&#xff1a;蒙一个true&#xff1b; 面试官&#xff1a;你是对的&#xff1b;我&#xff1a;内心非常高兴&a…

一文了解什么是车载Tbox

目录 前言一、Tbox是什么呢?二、Tbox架构三、App——TSP——Tbox交互时序图四、汽车混合网关拓扑结构示例五、Tbox功能 前言 强烈建议提前阅读一下这篇文章&#xff1a;车机Tbox介绍 一、Tbox是什么呢? Tbox是汽车上的一个盒子&#xff0c;指的是Telematics BOX&#xff0c…

企业化运维(5)_mysql数据库

###1.源码编译mysql### 对压缩包进行解压&#xff0c;并对mysql进行源码编译&#xff0c;其中需要下载依赖才能编译成功。 官网&#xff1a; www.mysql.com解压并进入目录 [rootserver1 ~]# tar xf mysql-boost-5.7.40.tar.gz [rootserver1 ~]# cd mysql-5.7.40/安装依赖性…

vue3引入本地静态资源图片

一、单张图片引入 import imgXX from /assets/images/xx.png二、多张图片引入 说明&#xff1a;import.meta.url 是一个 ESM 的原生功能&#xff0c;会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用 注意&#xff1a;填写自己项目图片存放的路径 /** vite的特殊性…

校园卡手机卡怎么注销?

校园手机卡的注销流程可以根据不同的运营商和具体情况有所不同&#xff0c;但一般来说&#xff0c;以下是注销校园手机卡的几种常见方式&#xff0c;我将以分点的方式详细解释&#xff1a; 一、线上注销&#xff08;通过手机APP或官方网站&#xff09; 下载并打开对应运营商的…