الـ 3D جوّه React — تبني مشاهد ثلاثية الأبعاد بمكوّنات declarative بدل كود Three.js اليدوي.
تدوير وتقريب للمنتجات بزاوية 360° للمتاجر.
عنصر ثلاثي الأبعاد يتفاعل مع الماوس/السكرول.
تخصيص لون/خامة المنتج لحظياً قبل الشراء.
تمثيل بيانات معقّدة بشكل مجسّم تفاعلي.
Particles، نجوم، تأثيرات سينمائية بالـ GPU.
قصص تتحرك مع تمرير الصفحة (scrollytelling).
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>
)
}