还原 React/drei 场景去除 React 化实践总结
加载被 draco 压缩的模型
有一类模型后缀依然是 glb 类型，但直接使用 GltfLoader 加载会失败（threejs editor 导入打开正常，windows 3D 查看器加载失败），这种模型可能被压缩过。解决办法就是使用 Draco 解压再加载。
示例代码在 GLTFLoader – three.js docs 官方文档中。
// Instantiate a loader
const loader = new GLTFLoader();
// Optional: Provide a DRACOLoader instance to decode compressed mesh data
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("/examples/jsm/libs/draco/");
loader.setDRACOLoader(dracoLoader);
// Load a glTF resource
loader.load("/duck.gltf", (model) => {
scene.add(model);
});Draco 是谷歌推出的专门压缩网格模型的工具。
实例/文章：
直接支持 woff 字体文件的 TextGeometry
Threejs的文字模型TextGeometry只接收json格式的typeface字体文件，这种文件可以由字体文件转换得到，这里有一个在线转换工具：https://gero3.github.io/facetype.js/
但这种方式还是太麻烦了，有没有直接可以使用字体文件生成的文字模型？答案是有的，在官方文档 Creating text – three.js docs 中有提到，注意：这里只限英文版，中文版并没有同步更新
The
troika-three-textpackage renders quality antialiased text using a similar technique as BMFonts, but works directly with any .TTF or .WOFF font file
这个库可以直接生成
import { Text } from 'troika-three-text'
let textM = new Text()
textM.text = 'drei'
textM.fontSize = 3
textM.letterSpacing = -0.06
textM.color = 0x9966FF
textM.font = './Reflections&VideoTextures/Inter-Bold.woff'
textM.position.set(0, 0, -2)
textM.anchorX = 'center'
textM.anchorY = 'top-baseline'
scene.add(textM)使用注意：这个库生成的Text并不是TextGeometry类型，而是GlyphsGeometry，继承自THREE.InstancedBufferGeometry,这就造成一个问题，在Three R135版本下多个字符组成的uv是一个整体，但在R152版本每个字符都是单独的uv。
就在我提了该问题的1天多左右，该问题已被作者修复。（给勤奋的作者点赞！）
反射+贴图平面
这个实例的地面实现了同时存在反射+贴图效果，该效果在threejs提供的工具中效果都不算太好，与之接近的 MeshPhysicalMaterial 不能实现动态反射，Reflector 不能实现贴图，只有 react-three-fiber/drei 的Relector类实现了该材质。
目前找到两个库可以实现该效果