【uniapp】如何在uniapp中使用xr-frame及xr-frame加载并使用gltf模型

微信的xr-frame已经出来有一段时间了,但网上关于它的使用方法的介绍少之又少,我可以合理的猜测,很大的原因是他们的文档写的…真就是…依托**

------------ 吐槽结束 正文开始 ------------

XR-FRAME

在此处我罗列了一些链接,是官方文档和demo的,指南写的还是可以的,用来入门了解一下没有问题。

  • 指南 介绍了XR-FRAME的简单使用

  • 组件 介绍了XR-FRAME中能够使用的组件

  • API 非常简陋的…罗列了各个对象的属性方法

  • demo 疑似是官方提供的基于xr-frame的demo

如何在Uniapp中使用xr-frame

  1. 创建一个新的文件夹命名为wxcomponents,该文件夹与pages、components等在同级目录下。
  2. 基于官方的指南入门案例,在wxcomponents中创建一个文件夹xr-start并在里面创建三个文件,分别命名为index.js,index.json,index.wxml
// index.js
Component({
    
})
// index.json
{
  "component": true,
  "renderer": "xr-frame",
  "usingComponents": {}
}
// index.wxml
<xr-scene>
  <xr-camera clear-color="0.4 0.8 0.6 1" />
xr-scene>
  1. 在pages.json中找到要使用这个组件的页面,增加usingComponents,在manifest.json中增加lazyCodeLoading
// pages.json
{
			"path": "pages/demo",
			"style": {
				"usingComponents": {
					"xr-start":"../../wxcomponents/xr-start"
				},
				"disableScroll": true
			}
},
// manifest.json 源码视图
 "mp-weixin" : {
        "usingComponents" : true,
        "lazyCodeLoading" : "requiredComponents"
 },
  1. 在页面中直接使用


data() {
			return {
				width: 300,
				height: 300,
				renderWidth: 300,
				renderHeight: 300,
			}
},
onLoad() {
			this.width = info.windowWidth;
			this.height = info.windowHeight;
			const dpi = info.pixelRatio;
			this.renderWidth = this.width * dpi
			this.renderHeight = this.height * dpi
},

开发工具中会报错无法生成一个名为index.common.js的文件,但实际使用中暂时没有发现会导致问题,还未找到解决方法欢迎留言。

经过上述四步,在demo.vue页面中,应该会出现一个绿色的背景。

如何导入gltf

  • 下面的操作基本都集中在index.wxmlindex.js中。

  • xr-xxxx 这类以xr开头的组件均为xr-frame提供的自带的组件,可以直接使用。

通过xr-asset-load组件可以加载gltf文件,然后通过xr-gltf组件渲染。

 <xr-assets>
    <xr-asset-load type="gltf" asset-id="gltf-damageHelmet" 
		src="https://utl for your gltf file" />
 xr-assets>
<xr-node>
	<xr-gltf node-id="gltf-damageHelmet" bind:gltf-loaded="handleGLTFLoaded" 	         model="gltf-damageHelmet">xr-gltf>
xr-node>

其中gltf-damageHelmet是自己命名的,可以更改,bind:gltf-loaded这个事件可以获取加载到的gltf文件

通过上述代码,应该可以在页面中看到加载出来的gltf模型。

如何获取gltf中的某个节点

如果我们打开gltf文件,可以看到里面有一个nodes数组,通过其中的name我们可以找到这个节点。通过上述的gltf-loaded事件,可以获取一个返回值,在返回值中获取gltf模型的信息。

然后通过微信提供的gltf的apigetInternalNodeByName 通过name获取这个模型中的某个节点,和three.js中的逻辑是一样的,比如fbx加载器的object.getObjectByName()或者3dm加载器中遍历object.children看到的name

handleGLTFLoaded( detail ) {
    const gltf = detail.detail.value.target.getComponent("gltf")
    let myNode = gltf.getInternalNodeByName('name-of-one-node')
}

如何定位某个节点

同样的,three.js中我们可以通过包围盒来获取某个节点的中心,在xr-frame中也有包围盒。但node节点类型的对象中没有包围盒这一属性,因此需要先获取到对应的geometry,geometry中是有包围盒属性的。但上述的节点是获取不到geometry的,因此我找到了一个有些绕的办法,先获取Mesh,再通过mesh获取geometry。

let myMesh = gltf.getPrimitivesByNodeName('name-of-one-node')[0]
let boundbox = myMesh.geometry.boundBox
let center = boundbox.center

虽然这样可以获取到 center,但我发现这样拿到的 geometry似乎并不是官方文档中标准意义上的 geometry对象,官方文档中给出的 geometry对象的方法在这里都无法使用。如果有正确的使用方式请留言。

你可能感兴趣的:(uni-app,微信小程序)