ساخت وب ۳ بعدی با React — از صفر تا صد

در این مقاله در مورد روش کار با وب 3 بعدی با React صحبت خواهیم کرد. به این منظور از کتابخانه React-Three-Fiber استفاده می‌کنیم. کتابخانه React-Three-Fiber یا به اختصار R3F یک رندر کننده قدرتمند برای صحنه‌های three.js هم برای وب و هم ری‌اکت نیتیو محسوب می‌شود. با استفاده از R3F سرعت ایجاد صحنه‌ها افزایش می‌یابد. همچنین زمان کمتری صرف انجام کارهای خسته‌کننده می‌شود و در عوض زمان بیشتری به تعریف کامپوننت‌های سفارشی اختصاص می‌یابد. به طور خلاصه R3F کارهای زیر را انجام می‌دهد:

• ایجاد بوم
• اتصال رویدادها
• ایجاد اشیای Three.js
• شروع حلقه رندر

چرا باید از R3F استفاده کنیم؟

در این بخش مزایای به‌کارگیری React-Three-Fiber را با هم مرور می‌کنیم.

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

کلیک کنید

صحنه‌های مبتنی بر کامپوننت

3JS به ما امکان می‌دهد که اشیای three.js را به روش اعلانی (declarative) بنویسیم. معنی این حرف آن است که می‌توانیم صحنه خود را با ایجاد کامپوننت‌های ری‌اکت که قابلیت استفاده مجدد دارند و با بهره‌گیری از props ،states و hooks بسازیم.

تابع کمکی داخلی

این کتابخانه به همراه تابع‌های مفیدی از قبیل raycaster ارائه شده است که در هر mesh امکان دسترسی به همه رویدادهای اشاره‌گر مفید مانند onClick ،onPointerOver ،onPointerOut و غیره را فراهم می‌سازد.

قلاب‌ها

این کتابخانه به همراه قلاب‌هایی مانند useFrame یا useThree ارائه شده است که با استفاده از آن‌ها می‌توانیم اشیای مفیدی مانند renderer ،scene ،camera و غیره را به دست آوریم.

عدم وابستگی

از آنجا که این کتابخانه صرفاً یک رندر کننده است، به نسخه three.js وابسته نیست و از این رو می‌توانیم آزادانه نسخه ترجیحی خود را انتخاب کنیم.

رندر مجدد تنها در موارد نیاز

این کتابخانه دقیقاً مانند هر کامپوننت ری‌اکت دیگر کار می‌کند و خود را بر مبنای تغییر وابستگی به‌روزرسانی می‌کند.

نصب

برای نصب این کتابخانه با استفاده از npm به روش زیر عمل می‌کنیم:

npm install three react-three-fiber

برای نصب با Yarn از دستور زیر استفاده کنید:

yarn add three react-three-fiber

تنها کافی است three.js و این ماژول را اضافه کنید و هیچ وابستگی دیگری مورد نیاز نیست. حجم این دو روی هم 33 کیلوبایت است.

شیوه استفاده

با استفاده از کامپوننت Canvas می‌توانید یک بوم three.js ایجاد کنید. این بوم کل عرض و ارتفاع کانتینر خود را اشغال می‌کند. سپس درون گره Canvas می‌توانید همه کامپوننت‌های دینامیک مانند سلسله مراتب تودرتوی کامپوننت‌های ری‌اکت و همچنین انواع سفارشی را اضافه کنید. در این مقاله ما یک کامپوننت Box ساخته‌ایم که برخی رفتارهای سفارشی دارد.

1import ReactDOM from 'react-dom'
2import React, { useRef, useState, Fragment } from 'react'
3import { Canvas, useFrame } from 'react-three-fiber'
4
5import './styles.css'
6
7function Box(props) {
8  // This reference will give us direct access to the mesh
9  const mesh = useRef()
10  // Set up state for the hovered and active state
11  const [hovered, setHover] = useState(false)
12  const [active, setActive] = useState(false)
13
14  // Rotate mesh every frame, this is outside of React without overhead
15  useFrame(() => {
16    if (hovered && !active) {
17      mesh.current.rotation.z += 0.01
18      mesh.current.rotation.x += 0.01
19    }
20    if (hovered && active) {
21      mesh.current.rotation.y += 0.02
22      mesh.current.rotation.x += 0.06
23    }
24  })
25
26  return (
27    <mesh
28      {...props}
29      ref={mesh}
30      scale={active ? [1.5, 1.5, 1.5] : [1, 1, 1]}
31      onClick={e => setActive(!active)}
32      onPointerOver={e => setHover(true)}
33      onPointerOut={e => setHover(false)}>
34      <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
35      <meshStandardMaterial attach="material" color={hovered ? 'hotpink' : 'orange'} />
36    </mesh>
37  )
38}
39
40ReactDOM.render(
41  <Fragment>
42    <h1>Hello Medium this is react-three-fiber!</h1>
43    <Canvas>
44      <ambientLight />
45      <pointLight position={[10, 10, 10]} />
46      <Box position={[-1.2, 0, 0]} />
47      <Box position={[1.2, 0, 0]} />
48    </Canvas>
49  </Fragment>,
50  document.getElementById('root')
51)

ما از useRef برای دسترسی به mesh مربوط به cube بهره گرفته‌ایم. پس از آن که از سوی three-js مقداردهی شد، می‌توانیم درون Canvas یک اتصال به آن نگه داریم و مقیاس را تغییر دهیم یا جهت‌گیری را در زمانی که ماوس روی آن می‌رود یا لمس می‌شود عوض کنیم.

اگر کمی اسکرول کنید و به canvas نگاه کنید، کامپوننت‌های رسمی دیگری مانند ambientLight و pointLight را از three-js می‌بینید.

1<Canvas>
2<ambientLight />
3<pointLight position={[10, 10, 10]} />
4<Box position={[-1.2, 0, 0]} />
5<Box position={[1.2, 0, 0]} />
6</Canvas>

سخن پایانی

برای جمع‌بندی این بخش باید اشاره کنیم که اگر می‌خواهید شروع به استفاده از این کتابخانه عالی برای افزودن امکانات 3 بعدی بکنید، باید از این تابع‌ها/قلاب‌ها از Fiber استفاده کنید:

1import { Canvas, useFrame } from 'react-three-fiber'

کتابخانه‌های سطح بالای دیگری مانند A-FRAME نیز وجود دارند که تجربه‌های مشابهی می‌سازند و صفحه‌هایی با عناصر 3 بعدی روی وب خلق می‌کنند. اما قدرت واقعی R3F این است که می‌تواند به API سطح پایین three.js دسترسی یابد و این وضعیت به شما کمک می‌کند که با کتابخانه خارق‌العاده WebGL بیشتر آشنا شوید. همچنین کمک می‌کند که سلسله مراتب کامپوننت‌ها را به صورت روشنی تعریف کنید تا بتواند بارها مورد استفاده مجدد قرار گیرد.

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های JavaScript (جاوا اسکریپت)
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش ساخت پروژه با فریم ورک React Native
• WebGL چیست؟ — آموزش وب جی ال — به زبان ساده و گام به گام
• ساخت کتابخانه React و انتشار آن در NPM — راهنمای گام به گام
• ۱۰ نکته و ترفند برای بهبود برنامه نویسی React — راهنمای کاربردی

==