它為了解決什麼問題而生？

我在上一篇文章提過得 Three.js 封裝了 WebGL 減輕了不少開發者的負擔，但是為了加入一個物件並渲染出來仍要經過：

1. 有一個場景 (Scene)
2. 有一個攝影機 (Camera)
3. 有一個 Renderer
4. 把一個 Canvas Dom 指配給 Renderer
5. 把 Scene 和 Camera 指配給就能渲染畫面
6. 有一個光源 (Light)
7. 有一個 Geometry
8. 有一個 Material
9. 把 Geometry 和 Material 指派給一個 Mesh
10. 把 Mesh 加入 Scene，這時渲染發生的時候
11. 註冊一個 render 的函數到 requestAnimationFrame

也不算少的步驟，但是如果用 JSX 封裝這些繁瑣的步驟呢？：

<Canvas gl={{ preserveDrawingBuffer: true }}>
  <ambientLight />
  <pointLight position={[10, 10, 10]} />
  <Box position={[-1.2, 0, 0]} />
</Canvas>

哇啦～！R3F 就是 Three.js 的再封裝，讓開發者可以直接用 JSX 描述跟操作 3D 場景。

@react-three/drei

就像 react-use 一樣，有 React 的地方就會有人寫 utils，@react-three/drei 就是 R3F 的補充，它提供了不少物件和 hook 可以直接使用。

小結

現在我們知道了 DOM 可以灑 JSX 語法糖， Three.js 可以灑 JSX 語法糖，但是這個旅程並不僅止於此，容我賣個關子，本系列有機會帶來更多的 JSX 語法糖（？）