零、环境

一、ThreeJS

1.1 版本

a. 官方适配版

wechat-miniprogram/threejs-miniprogram

据说版本很旧

b. 民间适配版

yannliao/threejs.miniprogram

1.2 注意事项

a. 不支持 sRGB 颜色空间

// 贴图
texture.encoding = THREE.sRGBEncoding

// 渲染器
renderer.outputEncoding = THREE.sRGBEncoding

色彩空间的简单介绍可以看下以下文章
ThreeJS 不可忽略的事情 - Gamma 色彩空间

解决

只能尝试在贴图导入的时候调高亮度，但最终效果还是差一截，很不自然

gltfLoader.load('your-model-path', (gltf: any) => {
  const model = gltf.scene
  model.traverse((child: any) => {
    if (child.isMesh) {
      // 材质自发光
      const mtl = new THREE.MeshLambertMaterial({
        map: child.material.map,
        color: 0xffffff
      })
      child.material.emissiveMap = child.material.map
      child.material = mtl
      child.castShadow = true
      child.receiveShadow = true
    }
  })
  model.scale.set(0.2, 0.22, 0.2)
  scene.add(model)
})

二、XR-FRAME 官方解决方案 beta

xr-frame 目前还是 Beta 版本，而且有一些使用上的限制

总的来说，就是一套符合小程序代码规范的 xml 格式的 ThreeJS

1.1 Demo

上手也很简单，官方给了很多使用例子，我的使用场景就是简单的模型展示，所有也没有使用什么自定义组件，全部使用现成的 API

1.2 遇到的各种问题

a. 部分模型无法正常显示，但 three.js 正常

不过人家官网也说了，对 gltf 模型的要求，只能辛苦你模型的小伙伴输出前对模型进行检查

b. 真机调试问题

1.0 模式

不管二维码还是自动都直接控制台报错无法运行

2.0 模式

同样不管二维码还是自动，一直在 Recording network，无语凝噎

b. 开发者工具上其他 view 无法显示在 xr-frame 上，但真机上正常

c. css 颜色转换

开发的时候你会发现，很多地方的颜色定义都是使用的这种 0 ~ 1 的颜色分量取值，而前端开发使用的 RBG或 RGBA 颜色都是 0 ~ 255 的取值

<!-- 等同于 #66cc99 -->
<xr-camera clear-color="0.4 0.8 0.6 1" />

那怎么把 RGBA 的颜色转换成 WebGL 的颜色的嘞？
三个颜色除以 255 ，透明度不用变就 ok 了

当然有在线工具~
Convert Hex Color to GLSL vec3