خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

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

ارشیا یوسفی ادیب ۱۷ فروردین, ۱۴۰۳ 4 min read

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

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

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

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

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

گوی سه بعدی بافت در رنگ های پاستلی براق

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

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

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

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

مطلب مرتبط:   چگونه اولین بازی PICO-8 خود را بسازیم

بسته 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 یک نور متمرکز را از یک موقعیت خاص با زاویه 0.3 اضافه می کند. در نهایت، مؤلفه OrbitControls به شما امکان می دهد دوربین را در اطراف جسم سه بعدی کنترل کنید.
مطلب مرتبط:   یک شبکه عصبی برای یادگیری در مورد هوش مصنوعی بسازید

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

React Rendered 3D Hot Pink Color Box Shape

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

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

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

BMW 8 3D MODEL On sketchfab

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

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

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

    

  ؛}

  • قلاب useGLTF از کتابخانه React-three-drei یک متغیر صحنه را تعریف می کند و مقدار فایل مدل واقع در مسیر “/bmw.glb” را به آن اختصاص می دهد. سپس کامپوننت یک شی اولیه را برمی گرداند که صحنه را برای مدل سه بعدی می سازد.
  • عنصر Canvas اجزای اصلی سازنده مدل را با ویژگی‌های مشخص شده مانند نسبت پیکسل دستگاه (DPR)، سایه‌ها، زاویه دوربین و سبک ارائه می‌کند.
  • سپس ویژگی های مولفه PresentationControls مانند سرعت و زوم جهانی را مشخص می کنید. این ویژگی ها نحوه کنترل مدل روی صفحه را مشخص می کند.
  • در نهایت، کامپوننت Stage را که مدل را روی صفحه مرورگر نصب می کند، پیکربندی کنید.
    • import {useGLTF, Stage, PresentationControls} from "@react-three/drei";
    function Model(props){
      const {scene} = useGLTF("/bmw.glb");
      return <primitive object={scene} {...props} />
    }

    export default function App() {
      return (
        <div className="App">
          <div className="App-header">
            <Canvas 
              dpr={[1,2]} 
              shadows camera={{fav: 45}}
              style={{"position": "absolute"}}
            >
              <PresentationControls 
                speed={1.5} 
                global zoom={0.5}
                polar={[-0.1, Math.PI / 4]}
              >
                <Stage environment={null}>
                  <Model scale={0.01} />
                </Stage>
              </PresentationControls>
            </Canvas>
          </div>
        </div>
      );
    }

    سرور توسعه را بچرخانید تا تغییرات برنامه خود را به روز کنید. شما باید مدل رندر شده را در مرورگر خود مشاهده کنید.

    React Rendered Model 3D

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

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

    با این حال، رندر کردن عناصر سه بعدی می تواند جنبه های منفی خود را داشته باشد، مانند تأثیر منفی بر عملکرد برنامه. مدل‌های سه‌بعدی به منابع بیشتری برای رندر نیاز دارند، که می‌تواند باعث کند بارگیری برنامه شما شود.

    مطلب مرتبط:   7 فناوری منسوخ و حرفه هایی که هنوز از آنها استفاده می کنند
    Tags: