نحوه رندر کردن اشیاء سه بعدی در یک برنامه React

با این کتابخانه های React مدل های سه بعدی تعاملی را به صفحات وب خود اضافه کنید.

معرفی رندر سه بعدی تعامل کاربر با فناوری های اینترنتی را متحول کرده است. برای شروع، برنامه‌های وب همه‌جانبه‌تر شده‌اند و تجربه‌ای جذاب و تعاملی را از طریق مرورگر وب ارائه می‌کنند.

این فناوری قبلاً مشتاقانه توسط حوزه‌های بازی و واقعیت افزوده/مجازی مورد استفاده قرار گرفته است. این یک راه واقعی و همه جانبه برای تعامل با عناصر مجازی ارائه می دهد.

نحوه رندر کردن اشیاء سه بعدی در برنامه React را بیاموزید.

مبانی مدلسازی و برنامه نویسی سه بعدی

قبل از شروع رندر سه بعدی، چند نکته وجود دارد که باید از آنها آگاه باشید:

• اشیاء سه بعدی حاوی نقاط یا رئوس جداگانه ای هستند که ساختار آنها را در سه بعد تعریف می کنند. به هم پیوستن این نقاط، چهره هایی را ایجاد می کند که شکل جسم روی صفحه را می سازند.
• مرورگرهای مدرن قابلیت نمایش سه بعدی را با استفاده از فناوری هایی مانند WebGL دارند. آنها این کار را با استفاده از قدرت واحد پردازش گرافیکی در دستگاه شما برای ارائه سریع مدل‌ها و صحنه‌های سه بعدی انجام می‌دهند.
• هر شی ۳ بعدی که مرورگر شما رندر می کند از سه جزء اصلی تشکیل شده است. اینها صحنه، دوربین و رندر هستند و همه نقش تعیین کننده ای دارند. این صحنه، پلتفرم پایه را برای تنظیم تمام عناصر سه بعدی شما، از جمله نورها و دوربین ها، فراهم می کند. این دوربین به شما امکان می دهد شیء سه بعدی را از زوایای مختلف مشاهده کنید. در نهایت، رندر صحنه را روی یک عنصر HTML بوم نصب می کند و نمایش می دهد.

رندر سه بعدی با Three.js و React Three Fiber

Three.js یک کتابخانه جاوا اسکریپت است که می توانید از آن برای رندر اشیاء سه بعدی در مرورگر وب استفاده کنید. با استفاده از اجزای داخلی آن، می توانید به راحتی اشیاء سه بعدی را در مرورگر خود در کنار سایر ویژگی های برنامه React خود ایجاد و رندر کنید.

بسته react-three-fiber در بالای Three.js کار می کند. این فرآیند استفاده از مؤلفه های Three.js را برای ایجاد و رندر اشیاء سه بعدی در مرورگر ساده می کند. جالب اینجاست که قلاب های سفارشی React را نیز فراهم می کند که هنگام ایجاد اشیاء سه بعدی در React به کار می آیند.

رندر کردن اشیاء سه بعدی در یک برنامه React

مراحل زیر را دنبال کنید تا یک شکل سه بعدی ساده در مرورگر خود و همچنین یک مدل سه بعدی ایجاد شده توسط بلندر ارائه دهید. اگر با بلندر آشنایی ندارید، یاد بگیرید که چگونه به عنوان یک مبتدی شروع کنید.

یک برنامه React ایجاد کنید، ترمینال خود را برای اجرای دستور زیر روشن کنید و وابستگی های مورد نیاز را نصب کنید:

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

بسته های Three.js، react-three-fiber و react-three-drei را نصب کنید. کتابخانه react-three-drei در کنار react-three-fiber برای ایجاد صحنه ها و اشیاء سه بعدی کار می کند.

رندر یک شکل سه بعدی

شما می توانید یک شکل جعبه سه بعدی ساده را در یک مرورگر با کد بسیار کمی ارائه دهید. فایل src/app.js را باز کنید، تمام کدهای Boilerplate React را حذف کنید و موارد زیر را اضافه کنید:

import React from "react";
import {Canvas} from "@react-three/fiber";
import {OrbitControls} from "@react-three/drei";

function Box() {
  return (
    <mesh>
      <boxBufferGeometry attach ="geometry" />
      <meshLambertMaterial attach="material" color="hotpink" />
    </mesh>
  )
}

export default function App() {
  return (
    <div className="App">
      <div className="App-header">
        <Canvas>
          <OrbitControls />
          <ambientLight intensity ={0.5} />
          <spotLight position={[10, 15,10]} angle={0.3} />
          <Box />
        </Canvas>
      </div>
    </div>
  );
}

این کد کارهای زیر را انجام می دهد:

• کامپوننت Box از مولفه های mesh، boxBufferGeometry و meshLambertMaterial از react-three-fiber برای ارائه یک جعبه سه بعدی استفاده می کند. این سه جزء دست به دست هم می دهند تا شکل جعبه را ایجاد کنند.
• مؤلفه boxBufferGeometry کادر را ایجاد می کند و این کد ویژگی رنگ مولفه meshLambertMaterial را روی صورتی داغ تنظیم می کند.
• سپس عنصر Canvas را که مولفه جعبه را با نور محیط، نورافکن و مجموعه ویژگی‌های مؤلفه Orbit Controls در خود جای می‌دهد، رندر می‌کند.
• ویژگی اجزای نور محیطی نور ملایمی را به بوم اضافه می کند. جزء spotLight یک نور متمرکز را از یک موقعیت خاص با زاویه ۰.۳ اضافه می کند. در نهایت، مؤلفه OrbitControls به شما امکان می دهد دوربین را در اطراف جسم سه بعدی کنترل کنید.

مولفه app.js را در فایل index.js وارد کرده و رندر کنید و یک سرور توسعه را بچرخانید تا نتایج را در مرورگر خود در http://localhost:۳۰۰۰ مشاهده کنید.

یک مدل سه بعدی ایجاد شده توسط بلندر رندر کنید

Blender یک ابزار متن باز است که توسط خلاقان در زمینه های مختلف برای ایجاد مدل های سه بعدی، جلوه های بصری و برنامه های کاربردی سه بعدی تعاملی استفاده می شود. می توانید از Blender برای ایجاد مدل های سه بعدی برای برنامه وب خود استفاده کنید.

برای این آموزش، یک مدل سه بعدی BMW با عملکرد SRT را در Sketchfab ارائه خواهید کرد.

برای شروع، مدل را از Sketchfab با فرمت GLTF (فرمت انتقال GL) دانلود کنید. این فرمت رندر مدل های سه بعدی را در مرورگر آسان می کند. پس از اتمام دانلود، پوشه مدل را باز کنید و فایل مدل را به دایرکتوری عمومی داخل برنامه React خود منتقل کنید.

اکنون به فایل app.js خود بروید و آن را با کد زیر پر کنید.

• اجزای زیر را وارد کنید: import {useGLTF, Stage, PresentationControls} از “@react-three/drei”؛
• مؤلفه مدل را ایجاد کنید و کد زیر را اضافه کنید:function Model(props){  const {scene} = useGLTF(“/bmw.glb”); return }صادر کردن عملکرد پیش‌فرض برنامه ۱،۲]} camera shadows = {{fav: ۴۵}} style = {{“موقعیت”: “Absolute”}}>