Skip to content

Commit 2c4070d

Browse files
committed
(xr-frame)更新案例
1 parent 4cadfd4 commit 2c4070d

File tree

248 files changed

+6870
-333
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

248 files changed

+6870
-333
lines changed

cloudfunctions/ARDemo/proto/mmbizwxaintparDemo.proto

+1-1
Original file line numberDiff line numberDiff line change
@@ -111,5 +111,5 @@ message GetARModelResp
111111
optional string host = 3;
112112
optional string errMsg = 4;
113113
optional uint32 expire_time = 5;
114-
optional uint32 status = 6; // 0 生成中 1 生成成功 2 过期 3 生成失败
114+
optional uint32 status = 6; // 0 生成中 1 生成成功 2 生成失败 3 过期
115115
}

miniprogram/app.json

+19-2
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,6 @@
276276
"pages/basic/scene-basic-alpha/index",
277277
"pages/basic/scene-basic-light/index",
278278
"pages/basic/scene-basic-animation/index",
279-
"pages/basic/scene-basic-particle/index",
280279
"pages/basic/scene-basic-touch/index",
281280
"pages/basic/scene-basic-visible-layer/index",
282281
"pages/basic/scene-basic-shadow/index",
@@ -302,6 +301,10 @@
302301
"pages/ar/scene-ar-face/index",
303302
"pages/ar/scene-ar-hand/index",
304303
"pages/ar/scene-ar-body/index",
304+
"pages/ar/scene-ar-shoe/index",
305+
"pages/ar/scene-ar-face-3d/index",
306+
"pages/ar/scene-ar-hand-3d/index",
307+
"pages/ar/scene-ar-body-3d/index",
305308
"pages/ar/scene-ar-threeDof/index",
306309
"pages/ar/scene-ar-camera/index",
307310
"pages/ar/scene-ar-vio-marker/index",
@@ -334,15 +337,29 @@
334337
"pages/template/xr-template-arLine/index",
335338
"pages/template/xr-template-select/index",
336339
"pages/template/xr-template-share/index",
340+
"pages/template/xr-template-textEdit/index",
337341
"pages/template/xr-template-removeBlack/index",
338342
"pages/template/xr-template-featherVideo/index",
339343
"pages/template/xr-template-arPreview/index",
344+
"pages/template/xr-template-arGlasses/index",
340345
"pages/template/xr-template-lookat/index",
341346
"pages/template/xr-template-arui/index",
347+
"pages/template/xr-template-volumeVideo/index",
342348
"pages/scene-last-record/index",
343349
"pages/scene-beside-edge/index",
344350
"pages/physics/scene-physics-shoot/index",
345-
"pages/physics/scene-physics-throw/index"
351+
"pages/physics/scene-physics-throw/index",
352+
"pages/particle/scene-particle-firework/index",
353+
"pages/particle/scene-particle-portal/index",
354+
"pages/particle/scene-particle-orb/index",
355+
"pages/particle/scene-particle-shapeEmitter/index",
356+
"pages/particle/scene-particle-custom/index",
357+
"pages/particle/scene-particle-meshEmitter/index",
358+
"pages/customParticle/scene-customParticle-firework/index",
359+
"pages/customParticle/scene-customParticle-orb/index",
360+
"pages/customParticle/scene-customParticle-portal/index",
361+
"pages/customParticle/scene-customParticle-shapeEmitter/index",
362+
"pages/customParticle/scene-customParticle-meshEmitter/index"
346363
]
347364
}
348365
],
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
Component({
2+
behaviors: [require('../../common/share-behavior').default],
3+
data: {
4+
loaded: false,
5+
arReady: false,
6+
},
7+
methods: {
8+
handleReady({detail}) {
9+
const xrScene = this.scene = detail.value;
10+
xrScene.event.add('tick', this.handleTick.bind(this));
11+
console.log('xr-scene', xrScene);
12+
},
13+
handleAssetsProgress: function ({detail}) {
14+
console.log('assets progress', detail.value);
15+
},
16+
handleAssetsLoaded: function ({detail}) {
17+
console.log('assets loaded', detail.value);
18+
this.setData({loaded: true});
19+
20+
// 延时保证场上存在脸模
21+
setTimeout(()=>{
22+
const xrSystem = wx.getXrFrameSystem();
23+
24+
// 替换状态
25+
const faceElm = this.scene.getElementById('face');
26+
const faceGLTF = faceElm.getComponent(xrSystem.GLTF);
27+
28+
for(const mesh of faceGLTF.meshes) {
29+
// 通过alphaMode 的 Setter 设置,或者写入renderState,但需要手动控制宏
30+
mesh.material.alphaMode = "BLEND";
31+
mesh.material.setVector('u_baseColorFactor', xrSystem.Vector4.createFromNumber(1, 1, 1, 0.0));
32+
}
33+
}, 33);
34+
},
35+
handleARReady: function ({detail}) {
36+
console.log('arReady');
37+
this.setData({arReady: true});
38+
},
39+
handleTick: function () {
40+
const xrSystem = wx.getXrFrameSystem();
41+
const trackerEl = this.scene.getElementById('tracker');
42+
if (!trackerEl) {
43+
return;
44+
}
45+
46+
const tracker = trackerEl.getComponent(xrSystem.ARTracker);
47+
if (!tracker.arActive) {
48+
return
49+
}
50+
51+
// 这里只是例子,实际上用的是`ARTracker`的`autoSync`属性。
52+
// 但也是一个更高自由度的选项。
53+
// 视情况需要自己同步`tracker`的`scale`和`rotation`特定节点。
54+
// 第一个参数是特征点编好,第二个是可选的复用结果,第三个是可选的是否相对于`ARTracker`。
55+
// 为`false`为世界空间的位置,需要配合`scale`自己使用
56+
const position = tracker.getPosition(98, new xrSystem.Vector3(), false);
57+
58+
}
59+
}
60+
})
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<xr-scene ar-system="modes:Face;camera:Front;pose3d:true;" bind:ready="handleReady" bind:ar-ready="handleARReady">
2+
<xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
3+
<xr-asset-load type="gltf" asset-id="gltf-face" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/face.glb" />
4+
<xr-asset-load type="gltf" asset-id="gltf-glass" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/glasses.glb" />
5+
</xr-assets>
6+
<xr-env env-data="xr-frame-team-workspace-day" />
7+
<xr-node>
8+
<xr-ar-tracker id='tracker' mode="Face">
9+
<xr-gltf id="face" node-id="gltf-face" visible="{{loaded}}" position="0 0 0" rotation="0 0 0" scale="1 1 1" model="gltf-face" never-cull></xr-gltf>
10+
<xr-gltf node-id="gltf-glass" visible="{{loaded}}" position="0 0 0" rotation="0 0 0" scale="1 1 1" model="gltf-glass"></xr-gltf>
11+
</xr-ar-tracker>
12+
<xr-camera
13+
id="camera" node-id="camera" clear-color="0.925 0.925 0.925 1"
14+
background="ar" is-ar-camera near="0.01"
15+
></xr-camera>
16+
</xr-node>
17+
<xr-node node-id="lights">
18+
<xr-light type="ambient" color="1 1 1" intensity="0.2" />
19+
<xr-light type="directional" rotation="180 0 0" color="1 1 1" intensity="1" />
20+
</xr-node>
21+
</xr-scene>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* xr/index.wxss */

miniprogram/packageXRFrame/components/template/xr-template-frameEffect/index.js

+18-2
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ Component({
101101
async loadAsset(){
102102
const xrFrameSystem = wx.getXrFrameSystem();
103103
const xrScene = this.scene;
104-
const shadowRoot = xrScene.getElementById("shadow-root");
104+
// const shadowRoot = xrScene.getElementById("shadow-root");
105105

106106
await xrScene.assets.loadAsset({type: 'texture', assetId: 'frame', src: 'https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/sprite-frames.png'})
107107

@@ -120,7 +120,23 @@ Component({
120120
frameMaterial.setFloat('rowCount', 32);
121121
frameMaterial.setFloat('during', 2);
122122
frameMaterial.alphaMode = "BLEND";
123-
meshElement.material = frameMaterial
123+
meshElement.material = frameMaterial;
124+
125+
// 不同的序列帧需要使用不同的材质
126+
const frameMaterial2 = xrScene.createMaterial(
127+
// 使用定制的效果
128+
xrScene.assets.getAsset('effect', 'frame-effect'),
129+
{u_baseColorMap: xrScene.assets.getAsset('texture', 'frame')}
130+
);
131+
132+
const meshElement2 = xrScene.getElementById("animation-mesh2").getComponent(xrFrameSystem.Mesh);
133+
frameMaterial2.setFloat('columCount', 4);
134+
frameMaterial2.setFloat('rowCount', 32);
135+
frameMaterial2.setFloat('during', 2);
136+
frameMaterial2.alphaMode = "BLEND";
137+
meshElement2.material = frameMaterial2;
138+
139+
124140
},
125141
}
126142
})

miniprogram/packageXRFrame/components/template/xr-template-frameEffect/index.wxml

+5-3
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@
33
</xr-assets>
44
<xr-node>
55
<xr-shadow id="shadow-root"></xr-shadow>
6+
<xr-node node-id="center"></xr-node>
67
<!-- <xr-mesh position="0 -0.06 0" scale="1.4 0.1 1.4" uniforms="u_baseColorFactor:0.3 0.4 0.6 1" geometry="cube"></xr-mesh> -->
7-
<xr-mesh id="animation-mesh" node-id="animation-mesh" position="0 0 0" scale="1 1 1" geometry="plane"></xr-mesh>
8+
<xr-mesh id="animation-mesh" node-id="animation-mesh" position="0 0 -0.5" scale="1 1 1" geometry="plane"></xr-mesh>
9+
<xr-mesh id="animation-mesh2" node-id="animation-mesh2" position="0 0 0.5" scale="1 1 1" geometry="plane"></xr-mesh>
810
<xr-camera
9-
id="camera" node-id="camera" position="0 3 0" clear-color="0.925 0.925 0.925 1"
10-
target="animation-mesh"
11+
id="camera" node-id="camera" position="0 3 0.5" clear-color="0.925 0.925 0.925 1"
12+
target="center"
1113
camera-orbit-control="true"
1214
></xr-camera>
1315
</xr-node>

miniprogram/packageXRFrame/components/template/xr-template-gltfEdit/index.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,10 @@ Component({
3131
const textureAsset = await scene.assets.loadAsset({
3232
type: 'texture',
3333
assetId: `texture-1`,
34-
src: 'https://webar.hereto.cn/asset/fe/ast-show/BalloonTEXc1.png',
34+
src: 'https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/waifu.png',
3535
});
3636
for(const mesh of ballonGLTF.meshes) {
3737
console.log('textureAsset', textureAsset.value);
38-
mesh.material.setVector('u_specularFactor', xrSystem.Vector3.createFromNumber(0, 0, 0));
3938
mesh.material.setTexture('u_baseColorMap', textureAsset.value);
4039
}
4140

miniprogram/packageXRFrame/components/template/xr-template-gltfEdit/index.wxml

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<xr-scene id="xr-scene" bind:ready="handleReady">
22
<xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
3-
<xr-asset-load type="gltf" asset-id="gltf-ballon-origin" src="https://webar.hereto.cn/asset/fe/ast-show/ballon-anim.glb" />
4-
<xr-asset-load type="gltf" asset-id="gltf-ballon" src="https://webar.hereto.cn/asset/fe/ast-show/ballon-anim.glb" />
5-
<xr-asset-load type="gltf" asset-id="gltf-ballon-blend" src="https://webar.hereto.cn/asset/fe/ast-show/ballon-anim.glb" />
3+
<xr-asset-load type="gltf" asset-id="gltf-ballon-origin" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/damage-helmet/index.gltf" />
4+
<xr-asset-load type="gltf" asset-id="gltf-ballon" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/damage-helmet/index.gltf" />
5+
<xr-asset-load type="gltf" asset-id="gltf-ballon-blend" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/damage-helmet/index.gltf" />
66
</xr-assets>
77
<xr-env env-data="xr-frame-team-workspace-day2" />
88
<xr-node>
99
<xr-node node-id="camera-target" position="0 0 0"></xr-node>
1010

11-
<xr-gltf position="-0.8 0 0" rotation="0 0 0" scale="1.2 1.2 1.2" model="gltf-ballon-origin"></xr-gltf>
12-
<xr-gltf id="ballon" node-id="gltf-ballon" position="0.8 0 0" rotation="0 0 0" scale="1.2 1.2 1.2" model="gltf-ballon"></xr-gltf>
13-
<xr-gltf id="ballonBlend" node-id="gltf-ballon-blend" position="0 0 -0.8" rotation="0 0 0" scale="1.2 1.2 1.2" model="gltf-ballon-blend"></xr-gltf>
11+
<xr-gltf position="-0.8 0 0" rotation="0 0 0" scale="0.6 0.6 0.6" model="gltf-ballon-origin"></xr-gltf>
12+
<xr-gltf id="ballon" node-id="gltf-ballon" position="0.8 0 0" rotation="0 0 0" scale="0.6 0.6 0.6" model="gltf-ballon"></xr-gltf>
13+
<xr-gltf id="ballonBlend" node-id="gltf-ballon-blend" position="0 0 -0.8" rotation="0 0 0" scale="0.6 0.6 0.6" model="gltf-ballon-blend"></xr-gltf>
1414

1515
<xr-camera
1616
id="camera" node-id="camera" position="2 2 4" clear-color="0.925 0.925 0.925 1"
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
Component({
2+
behaviors: [require('../../common/share-behavior').default],
3+
properties: {
4+
a: Number,
5+
},
6+
data: {
7+
loaded: false,
8+
words: "文本内容",
9+
fontColor: "1.0 1.0 1.0",
10+
fontSize: 1,
11+
},
12+
lifetimes: {},
13+
methods: {
14+
handleReady({detail}) {
15+
const xrScene = this.scene = detail.value;
16+
console.log('xr-scene', xrScene);
17+
18+
let number = 0;
19+
let fontSize = 1;
20+
setInterval(()=>{
21+
this.setData({
22+
words: number,
23+
fontSize: fontSize,
24+
fontColor: `${Math.random()} ${Math.random()} ${Math.random()}`
25+
})
26+
number++;
27+
if (fontSize > 2) {
28+
fontSize = 1;
29+
} else {
30+
fontSize+= 0.1;
31+
}
32+
}, 200);
33+
34+
}
35+
36+
}
37+
})
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"component": true,
3+
"usingComponents": {},
4+
"renderer": "xr-frame"
5+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<xr-scene id="xr-scene" bind:ready="handleReady">
2+
<xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
3+
</xr-assets>
4+
<xr-node>
5+
<xr-node node-id="center" position="0 2 0" test></xr-node>
6+
<xr-mesh node-id="mesh-plane" position="0 0 0" rotation="0 0 0" scale="20 1 20" geometry="plane" uniforms="u_baseColorFactor:0 0 0 1"></xr-mesh>
7+
<!-- 用于默认缩放的容器 -->
8+
<xr-node scale="0.1 0.1 0.1" position="0 2 0">
9+
<!-- 示例1 对齐 -->
10+
<xr-node position="-10 11 0">
11+
<xr-mesh position="0 0 -0.01" rotation="90 0 0" scale="8 1 8" geometry="plane" states="renderQueue: 2009, alphaMode: BLEND, cullOn: false" uniforms="u_baseColorFactor:0.2 0.6 0.2 0.8"></xr-mesh>
12+
<xr-text
13+
value="居中"
14+
position="0 0 0" never-cull
15+
size="2" anchor="0.5 0.5" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
16+
></xr-text>
17+
</xr-node>
18+
<xr-node position="0 11 0">
19+
<xr-mesh position="0 0 -0.01" rotation="90 0 0" scale="8 1 8" geometry="plane" states="renderQueue: 2009, alphaMode: BLEND, cullOn: false" uniforms="u_baseColorFactor:0.2 0.6 0.2 0.8"></xr-mesh>
20+
<xr-text
21+
value="居左上"
22+
position="-4 4 0" never-cull
23+
size="2" anchor="0 1" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
24+
></xr-text>
25+
</xr-node>
26+
<xr-node position="10 11 0">
27+
<xr-mesh position="0 0 -0.01" rotation="90 0 0" scale="8 1 8" geometry="plane" states="renderQueue: 2009, alphaMode: BLEND, cullOn: false" uniforms="u_baseColorFactor:0.2 0.6 0.2 0.8"></xr-mesh>
28+
<xr-text
29+
value="居右下"
30+
position="4 -4 0" never-cull
31+
size="2" anchor="1 0" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
32+
></xr-text>
33+
</xr-node>
34+
<!-- 示例2 多行 -->
35+
<xr-node position="-10 0 0">
36+
<xr-mesh position="0 0 -0.01" rotation="90 0 0" scale="8 1 8" geometry="plane" states="renderQueue: 2009, alphaMode: BLEND, cullOn: false" uniforms="u_baseColorFactor:0.2 0.2 0.6 0.8"></xr-mesh>
37+
<xr-text
38+
value="多行文本,基于宽度进行自动换行"
39+
position="-4 4 0" never-cull
40+
width="8" line-height="1.4"
41+
size="1.5" anchor="0 1" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
42+
></xr-text>
43+
</xr-node>
44+
<xr-node position="-1.5 0 0">
45+
<xr-mesh position="0 0 -0.01" rotation="90 0 0" scale="8 1 8" geometry="plane" states="renderQueue: 2009, alphaMode: BLEND, cullOn: false" uniforms="u_baseColorFactor:0.2 0.2 0.6 0.8"></xr-mesh>
46+
<xr-text
47+
value="右下文本,基于宽度自动换行"
48+
position="-4 4 0" never-cull
49+
horz-align="right" vert-align="bottom"
50+
width="8" height="8"
51+
size="1.5" anchor="0 1" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
52+
></xr-text>
53+
</xr-node>
54+
<xr-node position="4 0 0">
55+
<xr-mesh position="0 0 -0.01" rotation="90 0 0" scale="2 1 8" geometry="plane" states="renderQueue: 2009, alphaMode: BLEND, cullOn: false" uniforms="u_baseColorFactor:0.2 0.2 0.6 0.8"></xr-mesh>
56+
<xr-text
57+
value="实现竖排"
58+
position="-1 4 0" never-cull
59+
width="2"
60+
size="2" anchor="0 1" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
61+
></xr-text>
62+
</xr-node>
63+
<xr-node position="10 0 0">
64+
<xr-mesh position="0 0 -0.01" rotation="90 0 0" scale="8 1 8" geometry="plane" states="renderQueue: 2009, alphaMode: BLEND, cullOn: false" uniforms="u_baseColorFactor:0.2 0.2 0.6 0.8"></xr-mesh>
65+
<xr-text
66+
value="换行符\n行二\n行三\n"
67+
position="-4 4 0" never-cull
68+
size="2" anchor="0 1" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
69+
></xr-text>
70+
</xr-node>
71+
<!-- 示例3 变化 -->
72+
<xr-node position="-10 -11 0">
73+
<xr-mesh position="0 0 -0.01" rotation="90 0 0" scale="8 1 8" geometry="plane" states="renderQueue: 2009, alphaMode: BLEND, cullOn: false" uniforms="u_baseColorFactor:0.6 0.2 0.2 0.8"></xr-mesh>
74+
<xr-text
75+
id="changeNumber"
76+
value="变化数字: {{words}}"
77+
position="0 0 0" never-cull
78+
horz-align="center"
79+
width="8"
80+
size="1" anchor="0.5 0.5" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
81+
></xr-text>
82+
</xr-node>
83+
<xr-node position="0 -11 0">
84+
<xr-mesh position="0 0 -0.01" rotation="90 0 0" scale="8 1 8" geometry="plane" states="renderQueue: 2009, alphaMode: BLEND, cullOn: false" uniforms="u_baseColorFactor:0.6 0.2 0.2 0.8"></xr-mesh>
85+
<xr-text
86+
id="changeColor"
87+
value="变色文本"
88+
position="0 0 0" never-cull
89+
horz-align="center"
90+
size="1" anchor="0.5 0.5" uniforms="u_baseColorFactor:{{fontColor}} 1"
91+
></xr-text>
92+
</xr-node>
93+
<xr-node position="10 -11 0">
94+
<xr-mesh position="0 0 -0.01" rotation="90 0 0" scale="8 1 8" geometry="plane" states="renderQueue: 2009, alphaMode: BLEND, cullOn: false" uniforms="u_baseColorFactor:0.6 0.2 0.2 0.8"></xr-mesh>
95+
<xr-text
96+
id="changeSize"
97+
value="变化大小"
98+
position="0 0 0" never-cull
99+
horz-align="center"
100+
size="{{fontSize}}" anchor="0.5 0.5" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
101+
></xr-text>
102+
</xr-node>
103+
</xr-node>
104+
<xr-camera
105+
id="camera" node-id="camera" position="0 2 4" clear-color="0.8 0.8 0.8 1"
106+
target="center"
107+
camera-orbit-control=""
108+
></xr-camera>
109+
</xr-node>
110+
<xr-node node-id="lights">
111+
<xr-light type="ambient" color="1 1 1" intensity="1" />
112+
<xr-light type="directional" rotation="40 170 0" color="1 1 1" intensity="3"/>
113+
</xr-node>
114+
</xr-scene>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* xr/index.wxss */

0 commit comments

Comments
 (0)