微信小程序xr-frame实现多光源效果

1.基础知识：

• 灯光

灯光组件Light用于给场景提供照明，也是阴影的核心。相机组件一般被代理到灯光元素XRLight中使用，其派生自XRNode，对应在xml中的标签为xr-light。

• 主光源以及参数

类型	uniforms	宏	说明	书写
环境光	颜色和亮度u_ambientLightColorIns	是否开启WX_USE_AMBIENT_LIGHT	[r, g, b, ins]	type="ambient"
平行光	颜色和亮度u_mainLightColorIns和方向u_mainLightDir	是否开启WX_USE_MAIN_DIR_LIGHT	[r, g, b, ins]/vec3	type="directional"

• 追加光源

类型	支持	书写
点光源	支持颜色color和亮度intensity，以及position决定的位置和range决定的照亮范围。	type="point"
聚光灯	支持颜色color和亮度intensity，以及position决定的位置、rotation决定的方向、range决定的照亮范围，和inner-cone-angle与outer-cone-angle决定的锥角。	type="spot"

注明：

1. 环境光:360度无死角的光照，不会产生阴影，类似于自然环境中无数物体反射太阳光的效果，一般作为打底的弱亮度光源，保证整个场景不会漆黑一片。
2. 平行光:类似于太阳光的平行光照效果，只有平行光能产生阴影，可以设置rotation角度。
3. 点光源：类似于发光点，从一点向所有方向发射光线，可以设置position和range光照范围。
4. 聚光灯：不同于点光源，他只会向某个范围发射光线，可以设置position、rotation和range还有inner-cone-angle和outer-cone-angle决定锥形角度。

官方案例效果:(来源于:微信开放文档)

1.wxml部分

2.js部分：

Component({
  properties: {
    a: Number,
  },
  data: {
    loaded: false
  },
  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});
    },
    handleRaf: function({detail}) {
      console.log('raf', detail.value);
    }
  }
})

3.案例效果：