React Three Fiber vs Three.js：应该先学习哪一个？

Source: Dev.to

Three.js vs React Three Fiber

Three.js 是基础——一个位于 WebGL 之上的 JavaScript 库，让你无需编写底层 GPU 代码即可构建 3D 场景。它与框架无关，能够在原生 JS、Vue、Svelte 等环境中使用。

React Three Fiber（R3F）是 Three.js 的 React 渲染器。它并不取代 Three.js，而是对其进行包装。底层仍然是 Three.js——区别在于你编写代码的方式。

代码示例：Three.js（命令式）

// Three.js
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: '#c8ff00' });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  renderer.render(scene, camera);
}
animate();

代码示例：React Three Fiber（声明式）

// React Three Fiber
import { useFrame } from '@react-three/fiber';
import { useRef } from 'react';

function Cube() {
  const ref = useRef(null!);
  useFrame(() => {
    ref.current.rotation.x += 0.01;
  });

  return (
    
      
      
    
  );
}

两个片段都会生成同样的旋转立方体，但思维模型不同：命令式 vs. 声明式（JSX）。

如何选择

• 你对 3D 完全陌生。 先从原生 Three.js 入手，了解场景、相机和渲染器。
• 你不使用 React。 Three.js 是自然的选择。
• 你想要最大程度的控制。 Three.js 让你直接操作 WebGL 管线。
• 你已经熟悉 React。 R3F 让你可以继续在 React 生态系统中工作。
• 你正在构建一个 React 应用并希望快速迭代。 R3F（尤其配合 @react-three/drei）提供了相机、控制、环境和特效的现成组件——在原生 Three.js 中需要几十行代码的功能，在 R3F 中只需几行。

大多数使用 R3F 的开发者都是先学会了一点 Three.js；理解核心概念后，R3F 就不再显得“神奇”，而是更易于控制。

对比

推荐学习路径

1. 用原生 Three.js 花一个周末——构建一个简单场景，添加灯光，移动相机。
2. 随后转向 R3F，利用 React 的组件模型和 @react-three/drei 辅助工具完成后续所有工作。

资源

• R3F 速查表——收录常用模式（hooks、相机设置、灯光、性能技巧以及流行的 drei 组件）。
  👉 R3F Cheat Sheet on Gumroad — $7

讨论

你是先使用 Three.js 还是先使用 R3F？在评论区分享你的经验吧。

Tags: #threejs #react #javascript #webdev