react three fiber

@رد الفعل-ثلاثة/الألياف

React-three-fiber هو عارض React لـ threejs.

قم ببناء المشهد الخاص بك بشكل تعريفي باستخدام مكونات قائمة بذاتها وقابلة لإعادة الاستخدام تتفاعل مع الحالة، وتكون تفاعلية بسهولة ويمكنها المشاركة في النظام البيئي لـ React.

npm install three @types/three @react-three/fiber

هل لها حدود؟

لا أحد. كل ما يعمل في Threejs سيعمل هنا بدون استثناء.

هل هو أبطأ من Threejs عادي؟

رقم لا يوجد أي النفقات العامة. يتم عرض المكونات خارج React. إنه يتفوق على Threejs من حيث الحجم نظرًا لقدرات الجدولة الخاصة بـ React.

هل يمكنه مواكبة تحديثات الميزات المتكررة لـ Threejs؟

نعم. إنه يعبر فقط عن Threejs في JSX، ويتحول ديناميكيًا إلى new THREE.Mesh() . إذا قام إصدار Threejs الجديد بإضافة ميزات أو إزالتها أو تغييرها، فسيكون متاحًا لك على الفور دون الاعتماد على تحديثات هذه المكتبة.

كيف تبدو؟

لنقم بإنشاء مكون قابل لإعادة الاستخدام وله حالته الخاصة، ويتفاعل مع مدخلات المستخدم ويشارك في حلقة العرض. (عرض حي).

 import { createRoot } from 'react-dom/client'
import React , { useRef , useState } from 'react'
import { Canvas , useFrame } from '@react-three/fiber'

function Box ( props ) {
  // This reference gives us direct access to the THREE.Mesh object
  const ref = useRef ( )
  // Hold state for hovered and clicked events
  const [ hovered , hover ] = useState ( false )
  const [ clicked , click ] = useState ( false )
  // Subscribe this component to the render-loop, rotate the mesh every frame
  useFrame ( ( state , delta ) => ( ref . current . rotation . x += delta ) )
  // Return the view, these are regular Threejs elements expressed in JSX
  return (
    < mesh
      { ... props }
      ref = { ref }
      scale = { clicked ? 1.5 : 1 }
      onClick = { ( event ) => click ( ! clicked ) }
      onPointerOver = { ( event ) => hover ( true ) }
      onPointerOut = { ( event ) => hover ( false ) } >
      < boxGeometry args = { [ 1 , 1 , 1 ] } / >
      < meshStandardMaterial color = { hovered ? 'hotpink' : 'orange' } / >
    < / mesh >
  )
}

createRoot ( document . getElementById ( 'root' ) ) . render (
  < Canvas >
    < ambientLight intensity = { Math . PI / 2 } / >
    < spotLight position = { [ 10 , 10 , 10 ] } angle = { 0.15 } penumbra = { 1 } decay = { 0 } intensity = { Math . PI } / >
    < pointLight position = { [ - 10 , - 10 , - 10 ] } decay = { 0 } intensity = { Math . PI } / >
    < Box position = { [ - 1.2 , 0 , 0 ] } / >
    < Box position = { [ 1.2 , 0 , 0 ] } / >
  < / Canvas > ,
)

عرض مثال TypeScript

npm install @types/three

 import * as THREE from 'three'
import { createRoot } from 'react-dom/client'
import React , { useRef , useState } from 'react'
import { Canvas , useFrame , ThreeElements } from '@react-three/fiber'

function Box ( props : ThreeElements [ 'mesh' ] ) {
  const ref = useRef < THREE . Mesh > ( null ! )
  const [ hovered , hover ] = useState ( false )
  const [ clicked , click ] = useState ( false )
  useFrame ( ( state , delta ) => ( ref . current . rotation . x += delta ) )
  return (
    < mesh
      { ... props }
      ref = { ref }
      scale = { clicked ? 1.5 : 1 }
      onClick = { ( event ) => click ( ! clicked ) }
      onPointerOver = { ( event ) => hover ( true ) }
      onPointerOut = { ( event ) => hover ( false ) } >
      < boxGeometry args = { [ 1 , 1 , 1 ] } / >
      < meshStandardMaterial color = { hovered ? 'hotpink' : 'orange' } / >
    < / mesh >
  )
}

createRoot ( document . getElementById ( 'root' ) as HTMLElement ) . render (
  < Canvas >
    < ambientLight intensity = { Math . PI / 2 } / >
    < spotLight position = { [ 10 , 10 , 10 ] } angle = { 0.15 } penumbra = { 1 } decay = { 0 } intensity = { Math . PI } / >
    < pointLight position = { [ - 10 , - 10 , - 10 ] } decay = { 0 } intensity = { Math . PI } / >
    < Box position = { [ - 1.2 , 0 , 0 ] } / >
    < Box position = { [ 1.2 , 0 , 0 ] } / >
  < / Canvas > ,
)

العرض التجريبي المباشر: https://codesandbox.io/s/icy-tree-brnsm?file=/src/App.tsx

إظهار مثال React Native

يعتمد هذا المثال على رد الفعل 18 ويستخدم expo-cli ، لكن يمكنك إنشاء مشروع مجرد باستخدام القالب الخاص به أو باستخدام واجهة سطر الأوامر react-native .

 # Install expo-cli, this will create our app
npm install expo-cli -g
# Create app and cd into it
expo init my-app
cd my-app
# Install dependencies
npm install three @react-three/fiber@beta react@rc
# Start
expo start

قد تكون هناك حاجة إلى بعض التكوينات لإخبار مجمّع Metro عن أصولك إذا كنت تستخدم تجريدات useLoader أو Drei مثل useGLTF و useTexture :

 // metro.config.js
module . exports = {
  resolver : {
    sourceExts : [ 'js' , 'jsx' , 'json' , 'ts' , 'tsx' , 'cjs' ] ,
    assetExts : [ 'glb' , 'png' , 'jpg' ] ,
  } ,
} 

 import React , { useRef , useState } from 'react'
import { Canvas , useFrame } from '@react-three/fiber/native'
function Box ( props ) {
  const mesh = useRef ( null )
  const [ hovered , setHover ] = useState ( false )
  const [ active , setActive ] = useState ( false )
  useFrame ( ( state , delta ) => ( mesh . current . rotation . x += delta ) )
  return (
    < mesh
      { ... props }
      ref = { mesh }
      scale = { active ? 1.5 : 1 }
      onClick = { ( event ) => setActive ( ! active ) }
      onPointerOver = { ( event ) => setHover ( true ) }
      onPointerOut = { ( event ) => setHover ( false ) } >
      < boxGeometry args = { [ 1 , 1 , 1 ] } / >
      < meshStandardMaterial color = { hovered ? 'hotpink' : 'orange' } / >
    < / mesh >
  )
}
export default function App ( ) {
  return (
    < Canvas >
      < ambientLight intensity = { Math . PI / 2 } / >
      < spotLight position = { [ 10 , 10 , 10 ] } angle = { 0.15 } penumbra = { 1 } decay = { 0 } intensity = { Math . PI } / >
      < pointLight position = { [ - 10 , - 10 , - 10 ] } decay = { 0 } intensity = { Math . PI } / >
      < Box position = { [ - 1.2 , 0 , 0 ] } / >
      < Box position = { [ 1.2 , 0 , 0 ] } / >
    < / Canvas >
  )
}

---

التوثيق، الدروس، الأمثلة

قم بزيارة docs.pmnd.rs

الخطوات الأولى

يجب أن تكون على دراية بكل من React وThrejs قبل التسرع في هذا الأمر. إذا لم تكن متأكدًا من React، فارجع إلى مستندات React الرسمية، خصوصًا القسم المتعلق بالخطافات. أما بالنسبة لـ Threejs، فتأكد من إلقاء نظرة سريعة على الروابط التالية على الأقل:

1. تأكد من أن لديك فهمًا أساسيًا لـ Threejs. أبقِ هذا الموقع مفتوحًا.
2. عندما تعرف ما هو المشهد، الكاميرا، الشبكة، الهندسة، المادة، قم بتقسيم العرض التوضيحي أعلاه.
3. ابحث عن عناصر JSX التي تراها (mesh، وambientLight، وما إلى ذلك)، وجميع صادرات threejs أصلية إلى ألياف ثلاثية.
4. حاول تغيير بعض القيم، وقم بالتمرير عبر واجهة برمجة التطبيقات الخاصة بنا لمعرفة ما تفعله الإعدادات والخطافات المختلفة.

بعض المواد المفيدة:

• Threejs-مستندات وأمثلة
• اكتشف Threejs، وخاصة فصل النصائح والحيل للحصول على أفضل الممارسات
• Bruno Simons Threejs Jouney، الذي يمكن القول إنه أفضل مصدر تعليمي، يتضمن الآن فصلاً كاملاً عن R3F

النظام البيئي

هناك نظام بيئي نابض بالحياة وواسع النطاق حول الألياف الثلاثة، مليء بالمكتبات والمساعدين والتجريدات.

• @react-three/drei - مساعدون مفيدون، هذا نظام بيئي بحد ذاته
• @react-three/gltfjsx - يحول GLTFs إلى مكونات JSX
• @react-three/postprocessing - تأثيرات ما بعد المعالجة
• @react-three/uikit – عرض WebGL مكونات واجهة المستخدم لثلاثة ألياف
• @react-three/test-renderer - لاختبارات الوحدة في العقدة
• @react-three/offscreen - لوحة قماشية خارج الشاشة/العامل لألياف رد الفعل الثلاثة
• @react-three/flex – flexbox للألياف التفاعلية الثلاثة
• @react-three/xr – وحدات تحكم وأحداث VR/AR
• @react-three/csg - الهندسة الصلبة البناءة
• @react-three/rapier - فيزياء ثلاثية الأبعاد باستخدام Rapier
• @react-three/cannon - فيزياء ثلاثية الأبعاد باستخدام Cannon
• @react-three/p2 - فيزياء ثنائية الأبعاد باستخدام P2
• @react-three/a11y – a11y حقيقي لمشهدك
• @react-three/gpu-pathtracer – تتبع مسار واقعي
• create-r3f-app next – nextjs starter
• lamina - مواد تظليل تعتمد على الطبقة
• zustand – إدارة الحالة على أساس التدفق
• jotai – إدارة الحالة القائمة على الذرات
• valtio – إدارة الحالة القائمة على الوكيل
• react-spring – مكتبة الرسوم المتحركة القائمة على الفيزياء الربيعية
• framer-motion-3d – حركة الإطارات، مكتبة الرسوم المتحركة الشهيرة
• use-gesture – إيماءات الماوس/اللمس
• leva - إنشاء عناصر تحكم واجهة المستخدم الرسومية في ثوانٍ
• maath – حوض المطبخ لمساعدي الرياضيات
• miniplex – ECS (نظام إدارة الكيان)
• composer-suite - تأليف التظليلات والجزيئات والتأثيرات وآليات اللعبة
• triplex – محرر المشهد لـ React-Three-Fiber
• koestlich – مكتبة مكونات واجهة المستخدم للألياف التفاعلية الثلاثة

اتجاه الاستخدام لعائلة @react-three

من يستخدم ثلاثة ألياف

مجموعة صغيرة من الشركات والمشاريع التي تعتمد على الألياف الثلاثية.

• vercel (وكالة التصميم)
• basement (وكالة التصميم)
• studio freight (وكالة التصميم)
• 14 islands (وكالة التصميم)
• ueno (وكالة تصميم) — فيديو
• flux.ai (منشئ ثنائي الفينيل متعدد الكلور)
• colorful.app (العارضة)
• bezi (عارض أزياء)
• readyplayer.me (مكون الصورة الرمزية)
• zillow (العقارات)
• lumalabs.ai/genie (نماذج الذكاء الاصطناعي)
• skybox.blockadelabs (خرائط الذكاء الاصطناعي)
• 3dconfig (مسوي الأرضية)
• buerli.io (CAD)
• getencube (CAD)
• glowbuzzer (CAD) — فيديو
• triplex (محرر) — فيديو
• theatrejs (محرر) — فيديو

كيفية المساهمة

إذا أعجبك هذا المشروع، يرجى النظر في المساعدة. نرحب بجميع المساهمات وكذلك التبرعات لـ Opencollective، أو بالعملات المشفرة BTC: 36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH ، ETH: 0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682 .

المؤيدون

شكرا لجميع الداعمين لدينا!

المساهمين

هذا المشروع موجود بفضل جميع الأشخاص الذين ساهموا فيه.