Skip to content

Commit eedb939

Browse files
roamzhenroamzhen
committed
feat: update xr-frame demo
1 parent f2ca2ce commit eedb939

File tree

62 files changed

+897
-45
lines changed

Some content is hidden

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

62 files changed

+897
-45
lines changed

‎miniprogram/app.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,9 @@
259259
"pages/gltf/scene-gltf-morph/index",
260260
"pages/gltf/scene-gltf-light-loading/index",
261261
"pages/gltf/scene-gltf-specularGlossiness/index",
262+
"pages/gltf/scene-gltf-sheen/index",
262263
"pages/gltf/scene-gltf-textureTransform/index",
264+
"pages/gltf/scene-gltf-lightsPunctual/index",
263265
"pages/ar/scene-ar-basic/index",
264266
"pages/ar/scene-ar-2dmarker/index",
265267
"pages/ar/scene-ar-osdmarker/index",
@@ -268,6 +270,7 @@
268270
"pages/ar/scene-ar-body/index",
269271
"pages/ar/scene-ar-threeDof/index",
270272
"pages/ar/scene-ar-camera/index",
273+
"pages/ar/scene-ar-vio-marker/index",
271274
"pages/custom/scene-custom-logic/index",
272275
"pages/custom/scene-custom-render/index",
273276
"pages/scan/scene-scan-render/index",
@@ -282,6 +285,7 @@
282285
"pages/template/xr-template-control/index",
283286
"pages/template/xr-template-loading/index",
284287
"pages/template/xr-template-gltfEdit/index",
288+
"pages/template/xr-template-gltfAnimation/index",
285289
"pages/template/xr-template-gltfOcclusion/index",
286290
"pages/template/xr-template-frameEffect/index",
287291
"pages/template/xr-template-tracker/index",
@@ -292,7 +296,9 @@
292296
"pages/template/xr-template-arPreview/index",
293297
"pages/template/xr-template-lookat/index",
294298
"pages/scene-last-record/index",
295-
"pages/scene-beside-edge/index"
299+
"pages/scene-beside-edge/index",
300+
"pages/physics/scene-physics-shoot/index",
301+
"pages/physics/scene-physics-throw/index"
296302
]
297303
}
298304
],

‎miniprogram/packageXRFrame/components/template/xr-template-gltfAnimation/index.js

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
Component({
2+
behaviors: [require('../../common/share-behavior').default],
3+
properties: {
4+
a: Number,
5+
},
6+
data: {
7+
loaded: false
8+
},
9+
lifetimes: {},
10+
methods: {
11+
handleReady({detail}) {
12+
const xrScene = this.scene = detail.value;
13+
console.log('xr-scene', xrScene);
14+
15+
},
16+
handleAssetsProgress: function({detail}) {
17+
console.log('assets progress', detail.value);
18+
},
19+
handleAssetsLoaded: function({detail}) {
20+
console.log('assets loaded', detail.value);
21+
this.setData({loaded: true});
22+
},
23+
24+
handleGLTFLoaded({ detail }) {
25+
const xrFrameSystem = wx.getXrFrameSystem();
26+
27+
const wrapElement = this.scene.getElementById("wrap");
28+
this.wrapTRS = wrapElement.getComponent(xrFrameSystem.Transform);
29+
const gltfElement = this.scene.getElementById("gltf");
30+
this.gltfTRS = gltfElement.getComponent(xrFrameSystem.Transform);
31+
this.editGLTF = gltfElement.getComponent(xrFrameSystem.GLTF);
32+
33+
console.log(this.wrapTRS, this.gltfTRS)
34+
35+
// Birds
36+
const brid = this.editGLTF.getInternalNodeByName("Birds");
37+
this.bridTRS = brid.getComponent(xrFrameSystem.Transform);
38+
39+
// TurtleAndCastle
40+
const turtle = this.editGLTF.getInternalNodeByName("TurtleAndCastle");
41+
this.turtleTRS = turtle.getComponent(xrFrameSystem.Transform);
42+
43+
// 都用四元数
44+
this.rotation = this.turtleTRS.quaternion.toEulerAngles();
45+
46+
this.scene.event.add('tick', this.handleTick.bind(this));
47+
},
48+
49+
handleTick: function (time) {
50+
const xrSystem = wx.getXrFrameSystem();
51+
52+
this.wrapTRS.position.x -= 0.002;
53+
// this.wrapTRS.rotation.y += Math.PI * 0.0001;
54+
55+
// 比例尺不一样，需要放大改变数值
56+
this.bridTRS.position.x += 1;
57+
this.bridTRS.position.y += Math.random() * 4 - 2;
58+
59+
// 欧拉角直接设置有误 v2.31.0
60+
// this.turtleTRS.rotation.y += Math.PI * 0.0004;
61+
62+
// 目前使用四元数兼容
63+
this.rotation.y += Math.PI * 0.0004;
64+
xrSystem.Quaternion.fromEulerAngles(this.rotation, this.turtleTRS.quaternion);
65+
66+
}
67+
}
68+
})

‎miniprogram/packageXRFrame/components/template/xr-template-gltfAnimation/index.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"component": true,
3+
"usingComponents": {},
4+
"renderer": "xr-frame"
5+
}

‎miniprogram/packageXRFrame/components/template/xr-template-gltfAnimation/index.wxml

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<xr-scene id="xr-scene" bind:ready="handleReady">
2+
<xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
3+
<xr-asset-load type="gltf" asset-id="gltf-floating_castle" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/floating_castle.glb" />
4+
</xr-assets>
5+
<xr-env env-data="xr-frame-team-workspace-day2" />
6+
<xr-node>
7+
<xr-node node-id="camera-target" position="0 0 0"></xr-node>
8+
9+
<xr-node id="wrap">
10+
<xr-gltf id="gltf" position="0 0 0" rotation="0 0 0" scale="6 6 6" model="gltf-floating_castle" bind:gltf-loaded="handleGLTFLoaded"></xr-gltf>
11+
</xr-node>
12+
<xr-camera
13+
id="camera" node-id="camera" position="2 3 -5" clear-color="0.2 0.2 0.2 1"
14+
target="camera-target"
15+
camera-orbit-control=""
16+
></xr-camera>
17+
</xr-node>
18+
<xr-node node-id="lights">
19+
<xr-light type="ambient" color="1 1 1" intensity="0.6" />
20+
<xr-light type="directional" rotation="20 120 0" color="1 1 1" intensity="2"/>
21+
</xr-node>
22+
</xr-scene>

‎miniprogram/packageXRFrame/components/template/xr-template-gltfAnimation/index.wxss

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* xr/index.wxss */

‎miniprogram/packageXRFrame/components/template/xr-template-select/index.wxml

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<xr-scene id="xr-scene" bind:ready="handleReady">
22
<xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
3-
<xr-asset-material asset-id="standard-mat" effect="standard" />
3+
<xr-asset-load type="gltf" asset-id="gltf-door" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/door.glb" />
44
</xr-assets>
55
<xr-node>
6-
<xr-mesh node-id="mesh-plane" position="0 -0.02 -4" rotation="0 0 0" scale="5 1 5" geometry="plane" material="standard-mat" uniforms="u_baseColorFactor:0.48 0.78 0.64 1" receive-shadow></xr-mesh>
7-
<xr-mesh id="cube" node-id="mesh-cube" position="-1 0.5 -3.5" scale="1 1 1" rotation="0 45 0" geometry="cube" material="standard-mat" uniforms="u_baseColorFactor:0.298 0.764 0.85 1" cast-shadow></xr-mesh>
8-
<xr-mesh node-id="mesh-cylinder" position="1 0.7 -3.5" scale="1 0.7 1" geometry="cylinder" material="standard-mat" uniforms="u_baseColorFactor:1 0.776 0.364 1" cast-shadow></xr-mesh>
9-
<xr-mesh node-id="mesh-sphere" position="0 1.25 -5" scale="1.25 1.25 1.25" geometry="sphere" material="standard-mat" uniforms="u_baseColorFactor:0.937 0.176 0.368 1" cast-shadow></xr-mesh>
6+
<xr-node node-id="camera-target" position="0 0 0"></xr-node>
7+
8+
<xr-gltf id="door" node-id="door" position="0 0 0" rotation="0 0 0" scale="0.01 0.01 0.01" model="gltf-door"
9+
cube-shape="autoFit:true" shape-gizmo
10+
></xr-gltf>
11+
1012
<xr-camera
11-
id="camera" node-id="camera" position="0 1.6 0" clear-color="0.925 0.925 0.925 1"
12-
target="mesh-sphere"
13+
id="camera" node-id="camera" position="-4 3 0" clear-color="0.925 0.925 0.925 1"
14+
target="camera-target"
1315
camera-orbit-control=""
1416
></xr-camera>
1517
</xr-node>

‎miniprogram/packageXRFrame/components/xr-ar-vio-marker/index.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
Component({
2+
behaviors: [require('../common/share-behavior').default],
3+
properties: {
4+
a: Number,
5+
},
6+
data: {
7+
loaded: false,
8+
arReady: false,
9+
},
10+
lifetimes: {
11+
async attached() {
12+
console.log('data', this.data)
13+
}
14+
},
15+
methods: {
16+
handleReady({detail}) {
17+
const xrScene = this.scene = detail.value;
18+
this.mat = new (wx.getXrFrameSystem().Matrix4)();
19+
console.log('xr-scene', xrScene);
20+
},
21+
handleAssetsProgress: function({detail}) {
22+
console.log('assets progress', detail.value);
23+
},
24+
handleAssetsLoaded: function({detail}) {
25+
console.log('assets loaded', detail.value);
26+
// this.setData({loaded: true});
27+
this.scene.event.addOnce('touchstart', this.placeNode.bind(this));
28+
},
29+
handleARReady: function({detail}) {
30+
console.log('arReady', this.scene.ar.arVersion);
31+
},
32+
placeNode(event) {
33+
const {clientX, clientY} = event.touches[0];
34+
const {frameWidth: width, frameHeight: height} = this.scene;
35+
36+
if (clientY / height > 0.8 && clientX / width < 0.2) {
37+
this.scene.getNodeById('setitem').visible = false;
38+
this.scene.ar.resetPlane();
39+
} else {
40+
this.scene.ar.placeHere('setitem', true);
41+
}
42+
43+
this.scene.event.addOnce('touchstart', this.placeNode.bind(this));
44+
}
45+
}
46+
})

‎miniprogram/packageXRFrame/components/xr-ar-vio-marker/index.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"component": true,
3+
"usingComponents": {},
4+
"renderer": "xr-frame"
5+
}

‎miniprogram/packageXRFrame/components/xr-ar-vio-marker/index.wxml

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<xr-scene ar-system="modes:Plane Marker" bind:ready="handleReady" bind:ar-ready="handleARReady">
2+
<xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
3+
<xr-asset-load type="gltf" asset-id="anchor" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/ar-plane-marker.glb" />
4+
<xr-asset-load type="gltf" asset-id="gltf-item" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/just_a_girl/index.glb" />
5+
<xr-asset-load type="gltf" asset-id="butterfly" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/butterfly/index.glb" />
6+
</xr-assets>
7+
<xr-node>
8+
<xr-ar-tracker mode="Marker" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/marker/2dmarker-test.jpg">
9+
<xr-gltf model="butterfly" anim-autoplay position="0.2 0 -0.2" scale="0.6 0.6 0.6" rotation="0 -50 0" />
10+
<xr-gltf model="butterfly" anim-autoplay position="0.4 0 0.3" scale="0.5 0.5 0.5" rotation="0 -50 0" />
11+
<xr-gltf model="butterfly" anim-autoplay position="-0.3 0 0.3" scale="0.4 0.4 0.4" rotation="0 -50 0" />
12+
</xr-ar-tracker>
13+
14+
<xr-ar-tracker mode="Plane">
15+
<xr-gltf model="anchor"></xr-gltf>
16+
</xr-ar-tracker>
17+
<xr-node node-id="setitem" visible="false">
18+
<xr-gltf model="gltf-item" scale="0.006 0.006 0.006"></xr-gltf>
19+
</xr-node>
20+
<xr-camera
21+
id="camera" node-id="camera" clear-color="0.925 0.925 0.925 1"
22+
background="ar" is-ar-camera
23+
></xr-camera>
24+
</xr-node>
25+
<xr-node node-id="lights">
26+
<xr-light type="ambient" color="1 1 1" intensity="1" />
27+
<xr-light type="directional" rotation="180 0 0" color="1 1 1" intensity="3" />
28+
</xr-node>
29+
</xr-scene>

‎miniprogram/packageXRFrame/components/xr-ar-vio-marker/index.wxss

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* xr/index.wxss */

‎miniprogram/packageXRFrame/components/xr-basic-video/index.js

+14
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,20 @@ Component({
1818
handleAssetsLoaded: function({detail}) {
1919
console.log('assets loaded', detail.value);
2020
this.setData({loaded: true});
21+
},
22+
handleTouchCube: async function() {
23+
const xrSystem = wx.getXrFrameSystem();
24+
const video = this.scene.assets.getAsset('video-texture', 'cat');
25+
26+
if (!video) {
27+
return;
28+
}
29+
30+
if (video.state === xrSystem.EVideoState.Playing) {
31+
video.pause();
32+
} else if (video.state === xrSystem.EVideoState.Paused) {
33+
video.resume();
34+
}
2135
}
2236
}
2337
})

‎miniprogram/packageXRFrame/components/xr-basic-video/index.wxml

+2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
node-id="mesh-cube" scale="1.6 0.9 0.9"
1818
geometry="cube" material="standard-mat"
1919
uniforms="u_baseColorMap:video-cat"
20+
cube-shape="autoFit:true"
21+
bind:touch-shape="handleTouchCube"
2022
/>
2123
<xr-camera
2224
id="camera" node-id="camera" position="0 0 3" clear-color="0.925 0.925 0.925 1"

‎miniprogram/packageXRFrame/components/xr-demo-viewer/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -40,5 +40,8 @@ Component({
4040
onClickBack() {
4141
wx.navigateBack()
4242
},
43+
},
44+
options: {
45+
multipleSlots: true
4346
}
4447
})

‎miniprogram/packageXRFrame/components/xr-demo-viewer/index.wxml

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
<view class="intro">
77
<view class="intro-detail">
88
<view class="intro-title" ><text>{{title}}</text> <button class="share" open-type="share">分享给好友</button></view>
9-
<view class="description" >{{intro}}</view>
9+
<view class="description">{{intro}}</view>
10+
<slot name="intro"></slot>
1011
</view>
1112
</view>
1213
<view wx:if="{{hint.length > 0}}">

‎miniprogram/packageXRFrame/components/xr-gltf-lightsPunctual/index.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
Component({
2+
properties: {
3+
behaviors: [require('../common/share-behavior').default],
4+
a: Number,
5+
},
6+
data: {
7+
loaded: false
8+
},
9+
lifetimes: {
10+
attached() {
11+
console.log('data.a', this.data.a) // expected 123
12+
}
13+
},
14+
methods: {
15+
handleReady: function({detail}) {
16+
this.scene = detail.value;
17+
console.log('scene', detail.value);
18+
},
19+
handleAssetsProgress: function({detail}) {
20+
console.log('assets progress', detail.value);
21+
},
22+
handleAssetsLoaded: function({detail}) {
23+
console.log('assets loaded', detail.value);
24+
this.setData({loaded: true});
25+
},
26+
handleRaf: function({detail}) {
27+
console.log('raf', detail.value);
28+
}
29+
}
30+
})

‎miniprogram/packageXRFrame/components/xr-gltf-lightsPunctual/index.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"component": true,
3+
"usingComponents": {},
4+
"renderer": "xr-frame"
5+
}

‎miniprogram/packageXRFrame/components/xr-gltf-lightsPunctual/index.wxml

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<xr-scene id="xr-scene" bind:ready="handleReady">
2+
<xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
3+
<xr-asset-load type="gltf" asset-id="gltf-LightsPunctualLamp" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/LightsPunctualLamp.glb" />
4+
</xr-assets>
5+
<xr-env env-data="xr-frame-team-workspace-day" />
6+
<xr-node>
7+
<xr-node node-id="camera-target" position="0 0 0"></xr-node>
8+
<xr-gltf node-id="gltf-LightsPunctualLamp" position="0 -1 0" rotation="0 0 0" scale="1 1 1" model="gltf-LightsPunctualLamp"></xr-gltf>
9+
<xr-camera
10+
id="camera" node-id="camera" position="0 0 3" clear-color="0.1 0.1 0.1 1"
11+
near="0.1"
12+
far="2000"
13+
target="camera-target" camera-orbit-control=""
14+
></xr-camera>
15+
</xr-node>
16+
<xr-node node-id="lights">
17+
<!-- 场上最多只允许4个光源，所以不需要场景光源，由模型提供实际光源 -->
18+
</xr-node>
19+
</xr-scene>

‎miniprogram/packageXRFrame/components/xr-gltf-lightsPunctual/index.wxss

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* xr/index.wxss */

‎miniprogram/packageXRFrame/components/xr-gltf-sheen/index.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
Component({
2+
properties: {
3+
behaviors: [require('../common/share-behavior').default],
4+
a: Number,
5+
},
6+
data: {
7+
loaded: false
8+
},
9+
lifetimes: {
10+
attached() {
11+
console.log('data.a', this.data.a) // expected 123
12+
}
13+
},
14+
methods: {
15+
handleReady: function({detail}) {
16+
this.scene = detail.value;
17+
console.log('scene', detail.value);
18+
},
19+
handleAssetsProgress: function({detail}) {
20+
console.log('assets progress', detail.value);
21+
},
22+
handleAssetsLoaded: function({detail}) {
23+
console.log('assets loaded', detail.value);
24+
this.setData({loaded: true});
25+
},
26+
handleRaf: function({detail}) {
27+
console.log('raf', detail.value);
28+
}
29+
}
30+
})

0 commit comments

Comments
 (0)