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

微信的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({
    
})
1
2
3
4

// index.json
{
  "component": true,
  "renderer": "xr-frame",
  "usingComponents": {}
}
1
2
3
4
5
6

// index.wxml
<xr-scene>
  <xr-camera clear-color="0.4 0.8 0.6 1" />
</xr-scene>
1
2
3
4

3. 在pages.json中找到要使用这个组件的页面，增加usingComponents，在manifest.json中增加lazyCodeLoading

// pages.json
{
			"path": "pages/demo",
			"style": {
				"usingComponents": {
					"xr-start":"../../wxcomponents/xr-start"
				},
				"disableScroll": true
			}
},
1
2
3
4
5
6
7
8
9
10

// manifest.json 源码视图
 "mp-weixin" : {
        "usingComponents" : true,
        "lazyCodeLoading" : "requiredComponents"
 },
1
2
3
4
5

4. 在页面中直接使用

<xr-start
		    disable-scroll
		    id="main-frame"
		    :width="renderWidth"
		    :height="renderHeight"
		    :style="'width:'+width+'px;height:'+height+'px;'"
/>

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
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

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

如何导入gltf

• 下面的操作基本都集中在index.wxml和index.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>
1
2
3
4
5
6
7

其中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')
}
1
2
3
4

如何定位某个节点

同样的，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
1
2
3

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