№ 02 · React · Three.js

React Three Fiber

الـ 3D جوّه React — تبني مشاهد ثلاثية الأبعاد بمكوّنات declarative بدل كود Three.js اليدوي.

Package
@react-three/fiber
By
Poimandres (pmndrs)
Stars
28k+ ⭐
A / ديمو حيّ

حرّك الماوس فوق المجسّم

…loading 3D scene
R3F · useFrame + pointer · live
B / إيه اللي أقدر أعمله بيها

استخدامات Mahmoud Ghazal

01

عارض منتجات 3D

تدوير وتقريب للمنتجات بزاوية 360° للمتاجر.

02

مجسّم Hero تفاعلي

عنصر ثلاثي الأبعاد يتفاعل مع الماوس/السكرول.

03

Configurator

تخصيص لون/خامة المنتج لحظياً قبل الشراء.

04

Data viz ثلاثي الأبعاد

تمثيل بيانات معقّدة بشكل مجسّم تفاعلي.

05

أنظمة جزيئات

Particles، نجوم، تأثيرات سينمائية بالـ GPU.

06

تجارب سكرول 3D

قصص تتحرك مع تمرير الصفحة (scrollytelling).

C / التنصيب والكود

ابدأ في دقيقة

npm i three @react-three/fiber @react-three/drei
Scene.tsx
import { Canvas, useFrame } from '@react-three/fiber'
import { useRef } from 'react'

function Knot() {
  const ref = useRef()
  useFrame((_, d) => { ref.current.rotation.y += d * 0.4 })
  return (
    <mesh ref={ref}>
      <icosahedronGeometry args={[1.3, 1]} />
      <meshStandardMaterial color='#ff8a4c' metalness={0.6} roughness={0.25} flatShading />
    </mesh>
  )
}

export default function Scene() {
  return (
    <Canvas camera={{ position: [0, 0, 4] }}>
      <ambientLight intensity={1.4} />
      <directionalLight position={[3, 3, 5]} intensity={3} />
      <Knot />
    </Canvas>
  )
}