微信小程序xr-frame实现交互(地月案例)

• 基础知识：

1.轮廓

• 如果想要与场景中的物体进行互动，比如说点击、拖拽物体，那么这个物体得先拥有一个轮廓才行。
• 轮廓是一个组件。与某个物体互动，实际上是在与这个物体的轮廓进行互动，轮廓让这个物体在物理世界中拥有了一个分身。

名称	标签属性名	组件数据	备注
球状轮廓	sphere-shape	center, radius, autoFit
胶囊体轮廓	capsule-shape	center, radius, height, autoFit
长方体轮廓	cube-shape	center, size, autoFit
网格模型轮廓	mesh-shape	-	自动适配元素下的Mesh和GLTF模型

2.创建轮廓

• 创建轮廓非常简单，只要为xml标签添加上xxx-shape的属性即可。

例如：一个球体创建了一个球状轮廓：

 注:任意一个场景标签都可以创建轮廓

3.轮廓交互

事件名	描述	事件的回调函数	备注
touch-shape	点击轮廓时触发	IShapeTouchEvent	如果有多个物体叠在一起，会点中最上层的。
drag-shape	点击轮廓后，手指不松开的情况下进行拖拽时触发	IShapeDragEvent	只有在先触发touch-shape之后才会触发这个事件，target和touch-shape保持一致
untouch-shape	点击轮廓后，手指松开时触发	IShapeTouchEvent	只有在先触发touch-shape之后才会触发这个事件。

整体代码以及效果：（来源于微信开放文档demo）

• wxml部分

• js部分

Component({
  properties: {
    a: Number,
  },
  data: {
    loaded: false,
    touchingMoon: false,
    touchingEarth: false,
    θ: Math.PI,
    r: 10,
    ω: 5e-4,
    outerRing: 20,
    innerRing: 10
  },
  lifetimes: {},
  methods: {
    handleReady({detail}) {
      const xrScene = this.scene = detail.value;
      console.log('xr-scene', xrScene);
    },
    handleAssetsProgress: function({detail}) {
      console.log('assets progress', detail.value);
    },
    handleAssetsLoaded: function({detail}) {
      console.log('assets loaded', detail.value);
      this.setData({loaded: true});
    },
    handleTouchEarth: function() {
      this.setData({
        touchingEarth: true
      });
    },
    handleUntouchEarth: function() {
      this.setData({
        touchingEarth: false
      });
    },
    handleEarthRotation: function({detail}) {
        const { target, deltaX } = detail.value;
        target._components.transform.rotation.y += deltaX / 100;
    },
    handleDragMoon: function({detail}) {
        const { dir, target, camera } = detail.value;
        const cameraPos = camera.el._components.transform.worldPosition;
        const k = -cameraPos.y / dir[1];
        const x = cameraPos.x + k * dir[0];
        const z = cameraPos.z + k * dir[2];
        const len = Math.sqrt(x * x + z * z);
        if (len > this.data.innerRing) {
            const transform = target._components.transform;
            const scale = len > this.data.outerRing ? this.data.outerRing / len : 1.0;
            transform.position.x = x * scale;
            transform.position.z = z * scale;
        }
    },
    handleTouchMoon: function() {
        this.setData({touchingMoon: true});
    },
    handleUntouchMoon: function() {
        const moon = this.scene.getNodeById("mesh-moon");
        const transform = moon.el._components.transform;
        const x = transform.position.x;
        const z = transform.position.z;
        const len = Math.sqrt(x * x + z * z);
        this.setData({
            r: len,
            θ: x < 0 ? Math.atan(z / x) + Math.PI : Math.atan(z / x),
            ω: Math.sqrt(2.5e-4 / (len * len * len))
        });
        this.setData({touchingMoon: false});
    },
    handleTick: function({detail}) {
        if (this.data.touchingMoon || !this.scene) return;
        const deltaTime = detail.value;
        const moon = this.scene.getNodeById("mesh-moon");
        const transform = moon.el._components.transform;
        const x = Math.cos(this.data.θ) * this.data.r;
        const z = Math.sin(this.data.θ) * this.data.r;
        transform.position.x = x;
        transform.position.z = z;
        transform.rotation.y -= this.data.ω * deltaTime;
        this.setData({
            θ: this.data.θ + this.data.ω * deltaTime
        });
    }
  }
})

• 效果展示：