আধুনিক ওয়েব বিকাশে, ক্লাসিক এবং ওয়েব অ্যাপ্লিকেশনগুলির মধ্যে সীমানা প্রতিদিন ঝাপসা হয়ে আসছে। আজ আমরা ব্রাউজারে শুধুমাত্র ইন্টারেক্টিভ ওয়েবসাইট নয়, পূর্ণাঙ্গ গেমও তৈরি করতে পারি। এটি সম্ভব করে তোলে এমন একটি টুল হল লাইব্রেরি - প্রযুক্তি ব্যবহার করে এর উপর ভিত্তি করে 3D গ্রাফিক্স তৈরি করার একটি শক্তিশালী টুল। রিঅ্যাক্ট থ্রি ফাইবার রিঅ্যাক্ট Three.js প্রতিক্রিয়া তিন ফাইবার স্ট্যাক সম্পর্কে হল এর উপর একটি মোড়ক যা ওয়েবে 3D গ্রাফিক্স তৈরি করতে এর গঠন এবং নীতি ব্যবহার করে। এই স্ট্যাকটি ডেভেলপারদের এর সুবিধা এবং নমনীয়তার সাথে এর শক্তিকে একত্রিত করতে দেয়, একটি অ্যাপ্লিকেশন তৈরির প্রক্রিয়াকে আরও স্বজ্ঞাত এবং সংগঠিত করে। রিঅ্যাক্ট থ্রি ফাইবার Three.js- React রিঅ্যাক্ট- Three.js- এর কেন্দ্রে এই ধারণা যে আপনি একটি দৃশ্যে যা কিছু তৈরি করেন তা হল একটি উপাদান। এটি বিকাশকারীদের পরিচিত নিদর্শন এবং পদ্ধতিগুলি প্রয়োগ করতে দেয়। রিঅ্যাক্ট থ্রি ফাইবার- প্রতিক্রিয়া অন্যতম প্রধান সুবিধা হল ইকোসিস্টেমের সাথে এর একীকরণের সহজতা। এই লাইব্রেরি ব্যবহার করার সময় অন্য যেকোন টুল এখনও সহজেই ইন্টিগ্রেট করা যায়। রিঅ্যাক্ট থ্রি ফাইবারের রিঅ্যাক্ট রিঅ্যাক্ট Web-GameDev এর প্রাসঙ্গিকতা সাম্প্রতিক বছরগুলিতে বড় পরিবর্তনের মধ্য দিয়ে গেছে, সাধারণ 2D গেমগুলি থেকে ডেস্কটপ অ্যাপ্লিকেশনগুলির সাথে তুলনীয় জটিল 3D প্রকল্পগুলিতে বিবর্তিত হয়েছে। জনপ্রিয়তা এবং ক্ষমতার এই বৃদ্ধি ওয়েব-গেমডেভকে এমন একটি ক্ষেত্র করে তোলে যা উপেক্ষা করা যায় না। ওয়েব-গেমডেভ ফ্ল্যাশ ওয়েব গেমিংয়ের অন্যতম প্রধান সুবিধা হল এর অ্যাক্সেসযোগ্যতা। খেলোয়াড়দের কোনো অতিরিক্ত সফ্টওয়্যার ডাউনলোড এবং ইনস্টল করার দরকার নেই - শুধু তাদের ব্রাউজারে লিঙ্কটিতে ক্লিক করুন। এটি গেমগুলির বিতরণ এবং প্রচারকে সরল করে, সারা বিশ্বের বিস্তৃত দর্শকদের কাছে তাদের উপলব্ধ করে। অবশেষে, ওয়েব গেম ডেভেলপারদের জন্য পরিচিত প্রযুক্তি ব্যবহার করে গেমডেভে তাদের হাত চেষ্টা করার জন্য একটি দুর্দান্ত উপায় হতে পারে। উপলব্ধ সরঞ্জাম এবং লাইব্রেরিগুলির জন্য ধন্যবাদ, এমনকি 3D গ্রাফিক্সের অভিজ্ঞতা ছাড়াই, আকর্ষণীয় এবং উচ্চ-মানের প্রকল্পগুলি তৈরি করা সম্ভব! আধুনিক ব্রাউজারে গেম পারফরম্যান্স আধুনিক ব্রাউজারগুলি অনেক দূর এগিয়েছে, জটিল অ্যাপ্লিকেশন এবং গেমগুলি চালানোর জন্য মোটামুটি সহজ ওয়েব ব্রাউজিং সরঞ্জাম থেকে শক্তিশালী প্ল্যাটফর্মে বিবর্তিত হয়েছে। , , এবং মতো প্রধান ব্রাউজারগুলিকে ক্রমাগত অপ্টিমাইজ করা হচ্ছে এবং উন্নত কর্মক্ষমতা নিশ্চিত করার জন্য উন্নত করা হচ্ছে, যা তাদের জটিল অ্যাপ্লিকেশনগুলি বিকাশের জন্য একটি আদর্শ প্ল্যাটফর্ম করে তুলেছে৷ ক্রোম ফায়ারফক্স এজ অন্যান্যগুলির ব্রাউজার-ভিত্তিক গেমিং-এর বিকাশে ইন্ধন জোগায় এমন একটি মূল টুল হল । এই মানটি বিকাশকারীদের হার্ডওয়্যার গ্রাফিক্স ত্বরণ ব্যবহার করার অনুমতি দেয়, যা 3D গেমগুলির কার্যকারিতা উল্লেখযোগ্যভাবে উন্নত করে। অন্যান্য webAPI-এর সাথে একত্রে, ব্রাউজারে সরাসরি চিত্তাকর্ষক ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য নতুন সম্ভাবনা উন্মুক্ত করে। WebGL WebGL তবুও, ব্রাউজারের জন্য গেমগুলি তৈরি করার সময়, বিভিন্ন কর্মক্ষমতার দিকগুলি বিবেচনা করা অত্যন্ত গুরুত্বপূর্ণ: রিসোর্স অপ্টিমাইজেশন, মেমরি ম্যানেজমেন্ট এবং বিভিন্ন ডিভাইসের জন্য অভিযোজন হল সমস্ত মূল বিষয় যা একটি প্রকল্পের সাফল্যকে প্রভাবিত করতে পারে৷ তোমার নাম্বরে! যাইহোক, শব্দ এবং তত্ত্ব এক জিনিস, কিন্তু বাস্তব অভিজ্ঞতা একেবারে অন্য। ওয়েব গেম ডেভেলপমেন্টের সম্পূর্ণ সম্ভাবনাকে সত্যিই বুঝতে এবং উপলব্ধি করতে, ডেভেলপমেন্ট প্রক্রিয়ায় নিজেকে নিমজ্জিত করাই সবচেয়ে ভালো উপায়। অতএব, সফল ওয়েব গেম বিকাশের উদাহরণ হিসাবে, আমরা আমাদের নিজস্ব গেম তৈরি করব। এই প্রক্রিয়াটি আমাদের বিকাশের মূল দিকগুলি শিখতে, বাস্তব সমস্যার মুখোমুখি হতে এবং সেগুলির সমাধান খুঁজে পেতে এবং ওয়েব গেম ডেভেলপমেন্ট প্ল্যাটফর্ম কতটা শক্তিশালী এবং নমনীয় হতে পারে তা দেখতে অনুমতি দেবে। নিবন্ধগুলির একটি সিরিজে, আমরা এই লাইব্রেরির বৈশিষ্ট্যগুলি ব্যবহার করে কীভাবে একজন প্রথম-ব্যক্তি শ্যুটার তৈরি করতে হয় তা দেখব এবং ওয়েব-গেমডেভের উত্তেজনাপূর্ণ জগতে ডুব দিতে পারি! চূড়ান্ত ডেমো https://codesandbox.io/p/github/JI0PATA/fps-game?embedable=true এ সংগ্রহস্থল GitHub- এখন, শুরু করা যাক! প্রকল্প সেট আপ এবং প্যাকেজ ইনস্টল করা প্রথমত, আমাদের একটি প্রকল্প টেমপ্লেট প্রয়োজন হবে। তাহলে এর ইন্সটল করে শুরু করা যাক। প্রতিক্রিয়া npm create vite@latest লাইব্রেরি নির্বাচন করুন; প্রতিক্রিয়া নির্বাচন করুন। জাভাস্ক্রিপ্ট অতিরিক্ত npm প্যাকেজ ইনস্টল করুন। npm install three @react-three/fiber @react-three/drei @react three/rapier zustand @tweenjs/tween.js তারপর আমাদের প্রকল্প থেকে অপ্রয়োজনীয় সবকিছু । মুছে ফেলুন সেকশন কোড ক্যানভাস ডিসপ্লে কাস্টমাইজ করা ফাইলে, একটি ডিভ উপাদান যোগ করুন যা পৃষ্ঠায় একটি সুযোগ হিসাবে প্রদর্শিত হবে। একটি উপাদান সন্নিবেশ করুন এবং ক্যামেরার দৃশ্যের ক্ষেত্র সেট করুন। কম্পোনেন্টের ভিতরে কম্পোনেন্ট রাখুন। main.jsx ক্যানভাস ক্যানভাস অ্যাপ UI উপাদানগুলিকে স্ক্রিনের পূর্ণ উচ্চতায় প্রসারিত করতে এবং স্ক্রিনের কেন্দ্রে একটি বৃত্ত হিসাবে স্কোপ প্রদর্শন করতে এ শৈলী যুক্ত করা যাক। index.css- কম্পোনেন্টে আমরা একটি কম্পোনেন্ট যোগ করি, যা আমাদের গেমের দৃশ্যের পটভূমিতে আকাশ আকারে প্রদর্শিত হবে। অ্যাপ স্কাই সেকশন কোড মেঝে পৃষ্ঠ আসুন একটি কম্পোনেন্ট তৈরি করি এবং এটি কম্পোনেন্টে রাখি। গ্রাউন্ড অ্যাপ , একটি সমতল পৃষ্ঠের উপাদান তৈরি করুন। Y অক্ষে এটিকে নিচের দিকে নিয়ে যান যাতে এই সমতলটি ক্যামেরার দৃশ্যের ক্ষেত্রে থাকে। এবং এটিকে অনুভূমিক করতে X অক্ষের উপর প্লেনটি ফ্লিপ করুন। গ্রাউন্ডে যদিও আমরা উপাদানের রঙ হিসাবে ধূসরকে নির্দিষ্ট করেছি, প্লেনটি সম্পূর্ণ কালো দেখায়। সেকশন কোড মৌলিক আলো ডিফল্টরূপে, দৃশ্যে কোন আলো নেই, তাই আসুন একটি আলোর উৎস যোগ করি, যা বস্তুটিকে চারদিক থেকে আলোকিত করে এবং নির্দেশিত মরীচি নেই। একটি পরামিতি হিসাবে আলোর তীব্রতা সেট করুন। অ্যাম্বিয়েন্টলাইট সেকশন কোড মেঝে পৃষ্ঠের জন্য জমিন মেঝে পৃষ্ঠ একজাত না দেখতে, আমরা জমিন যোগ করা হবে. সমস্ত পৃষ্ঠ বরাবর পুনরাবৃত্তি কোষের আকারে মেঝে পৃষ্ঠের একটি প্যাটার্ন তৈরি করুন। ফোল্ডারে একটি টেক্সচার সহ একটি PNG ছবি যোগ করুন। সম্পদ দৃশ্যে একটি টেক্সচার লোড করতে, আসুন প্যাকেজ থেকে হুক ব্যবহার করি। এবং হুকের প্যারামিটার হিসাবে আমরা ফাইলে আমদানি করা টেক্সচার ইমেজটি পাস করব। অনুভূমিক অক্ষগুলিতে চিত্রটির পুনরাবৃত্তি সেট করুন। @react-three/drei useTexture সেকশন কোড ক্যামেরা আন্দোলন প্যাকেজ থেকে উপাদান ব্যবহার করে, পর্দায় কার্সারটি ঠিক করুন যাতে আপনি মাউস নাড়ালে এটি নড়াচড়া না করে, তবে দৃশ্যে ক্যামেরার অবস্থান পরিবর্তন করে। @react-three/drei PointerLockControls কম্পোনেন্টের জন্য একটি ছোট সম্পাদনা করা যাক। গ্রাউন্ড সেকশন কোড পদার্থবিদ্যা যোগ করা হচ্ছে স্পষ্টতার জন্য, দৃশ্যটিতে একটি সাধারণ ঘনক যোগ করা যাক। <mesh position={[0, 3, -5]}> <boxGeometry /> </mesh> এই মুহূর্তে তিনি শুধু মহাকাশে ঝুলছে. দৃশ্যে "পদার্থবিদ্যা" যোগ করতে প্যাকেজ থেকে উপাদান ব্যবহার করুন। একটি প্যারামিটার হিসাবে, মাধ্যাকর্ষণ ক্ষেত্রটি কনফিগার করুন, যেখানে আমরা অক্ষ বরাবর মহাকর্ষীয় বল সেট করি। @react-three/rapier পদার্থবিজ্ঞানের <Physics gravity={[0, -20, 0]}> <Ground /> <mesh position={[0, 3, -5]}> <boxGeometry /> </mesh> </Physics> যাইহোক, আমাদের কিউব পদার্থবিদ্যা উপাদানের ভিতরে আছে, কিন্তু কিছুই হবে না. কিউবটিকে একটি বাস্তব ভৌত বস্তুর মতো আচরণ করতে, আমাদের এটিকে প্যাকেজ থেকে কম্পোনেন্টে মোড়ানো দরকার। @react-three/rapier RigidBody এর পরে, আমরা অবিলম্বে দেখতে পাব যে প্রতিবার পৃষ্ঠাটি পুনরায় লোড হওয়ার সাথে সাথে ঘনকটি মাধ্যাকর্ষণ শক্তির প্রভাবে নিচে পড়ে যায়। তবে এখন আরেকটি কাজ রয়েছে - মেঝেটিকে এমন একটি বস্তু তৈরি করা প্রয়োজন যার সাথে ঘনক্ষেত্রটি যোগাযোগ করতে পারে এবং এর বাইরে এটি পড়বে না। সেকশন কোড একটি শারীরিক বস্তু হিসাবে মেঝে আসুন কম্পোনেন্টে ফিরে যাই এবং মেঝে পৃষ্ঠের উপর একটি মোড়ক হিসাবে একটি উপাদান যোগ করি। গ্রাউন্ড RigidBody এখন পড়ার সময়, কিউবটি একটি বাস্তব ভৌত বস্তুর মতো মেঝেতে থাকে। সেকশন কোড পদার্থবিজ্ঞানের আইনের অধীনে একটি চরিত্রকে সাবজেক্ট করা আসুন একটি উপাদান তৈরি করি যা দৃশ্যের চরিত্রকে নিয়ন্ত্রণ করবে। প্লেয়ার অক্ষরটি যোগ করা ঘনক্ষেত্রের মতো একই ভৌত বস্তু, তাই এটি অবশ্যই মেঝে পৃষ্ঠের সাথে দৃশ্যের ঘনক্ষেত্রের সাথে যোগাযোগ করবে। এজন্য আমরা উপাদান যোগ করি। এবং ক্যাপসুল আকারে চরিত্র তৈরি করা যাক। RigidBody উপাদানটি পদার্থবিদ্যা উপাদানের ভিতরে রাখুন। প্লেয়ার এখন আমাদের চরিত্র দৃশ্যপটে হাজির হয়েছে। সেকশন কোড একটি চরিত্র সরানো - একটি হুক তৈরি করা অক্ষরটি কী ব্যবহার করে নিয়ন্ত্রণ করা হবে এবং ব্যবহার করে লাফ দেওয়া হবে। WASD স্পেসবার আমাদের নিজস্ব প্রতিক্রিয়া-হুক দিয়ে, আমরা চরিত্রটি সরানোর যুক্তি প্রয়োগ করি। আসুন একটি ফাইল তৈরি করি এবং সেখানে একটি নতুন ফাংশন যোগ করি। hooks.js usePersonControls চলুন একটি অবজেক্টকে বিন্যাসে সংজ্ঞায়িত করি {"keycode": "Action to be performed"}। এরপরে, কীবোর্ড কী টিপে এবং প্রকাশ করার জন্য ইভেন্ট হ্যান্ডলার যোগ করুন। যখন হ্যান্ডলারগুলি ট্রিগার করা হয়, তখন আমরা সঞ্চালিত বর্তমান ক্রিয়াগুলি নির্ধারণ করব এবং তাদের সক্রিয় অবস্থা আপডেট করব। চূড়ান্ত ফলাফল হিসাবে, হুকটি {"অ্যাকশন ইন প্রগ্রেস": "স্ট্যাটাস"} ফর্ম্যাটে একটি বস্তু ফেরত দেবে। সেকশন কোড একটি চরিত্র সরানো - একটি হুক বাস্তবায়ন হুক প্রয়োগ করার পরে, অক্ষর নিয়ন্ত্রণ করার সময় এটি ব্যবহার করা উচিত। কম্পোনেন্টে আমরা মোশন স্টেট ট্র্যাকিং যোগ করব এবং চরিত্রের মুভমেন্ট ডিরেকশনের ভেক্টর আপডেট করব। UsePersonControls প্লেয়ার আমরা ভেরিয়েবলগুলিকেও সংজ্ঞায়িত করব যা আন্দোলনের দিকনির্দেশের অবস্থা সংরক্ষণ করবে। চরিত্রের অবস্থান আপডেট করতে, আসুন প্যাকেজ দ্বারা প্রদত্ত করি। এই হুক মতোই কাজ করে এবং প্রতি সেকেন্ডে প্রায় 60 বার ফাংশনের বডি এক্সিকিউট করে। @react-three/fiber ফ্রেম ব্যবহার রিকোয়েস্ট অ্যানিমেশনফ্রেমের কোড ব্যাখ্যা: প্লেয়ার অবজেক্টের জন্য একটি লিঙ্ক তৈরি করুন। এই লিঙ্কটি দৃশ্যে প্লেয়ার অবজেক্টের সাথে সরাসরি মিথস্ক্রিয়া করার অনুমতি দেবে। 1. const playerRef = useRef(); যখন একটি হুক ব্যবহার করা হয়, তখন প্লেয়ার দ্বারা বর্তমানে কোন কন্ট্রোল বোতাম টিপানো হয়েছে তা নির্দেশ করে বুলিয়ান মান সহ একটি বস্তু ফিরে আসে। 2. const { ফরোয়ার্ড, ব্যাকওয়ার্ড, বাম, ডান, লাফ} = usePersonControls(); অ্যানিমেশনের প্রতিটি ফ্রেমে হুক বলা হয়। এই হুকের ভিতরে, প্লেয়ারের অবস্থান এবং রৈখিক বেগ আপডেট করা হয়। 3. useFrame((state) => { ... }); প্লেয়ার অবজেক্টের উপস্থিতি পরীক্ষা করে। কোনো প্লেয়ার অবজেক্ট না থাকলে, ত্রুটি এড়াতে ফাংশনটি কার্যকর করা বন্ধ করবে। 4. যদি (!playerRef.current) ফিরে আসে; প্লেয়ারের বর্তমান রৈখিক বেগ পান। 5. const বেগ = playerRef.current.linvel(); চাপা বোতামের উপর ভিত্তি করে ফরোয়ার্ড/পেছনগামী গতি ভেক্টর সেট করুন। 6. frontVector.set(0, 0, পশ্চাদমুখী - এগিয়ে); বাম/ডান আন্দোলন ভেক্টর সেট করুন। 7. sideVector.set(বাম - ডান, 0, 0); মুভমেন্ট ভেক্টরগুলি বিয়োগ করে, ফলাফলকে স্বাভাবিক করে (যাতে ভেক্টরের দৈর্ঘ্য 1 হয়) এবং আন্দোলনের গতি ধ্রুবক দ্বারা গুণ করে প্লেয়ার আন্দোলনের চূড়ান্ত ভেক্টর গণনা করুন। 8. দিক। সাবভেক্টর (সামনের ভেক্টর, সাইডভেক্টর)। নরমালাইজ()। মাল্টিপ্লাইস্ক্যালার(MOVE_SPEED); প্লেয়ার অবজেক্টকে "জাগিয়ে দেয়" যাতে এটি পরিবর্তনের প্রতিক্রিয়া জানায়। আপনি যদি এই পদ্ধতিটি ব্যবহার না করেন, কিছু সময়ের পরে বস্তুটি "ঘুম" হবে এবং অবস্থান পরিবর্তনে প্রতিক্রিয়া দেখাবে না। 9. playerRef.current.wakeUp(); গতিবিধির গণনাকৃত দিকনির্দেশের উপর ভিত্তি করে প্লেয়ারের নতুন রৈখিক বেগ সেট করুন এবং বর্তমান উল্লম্ব বেগ রাখুন (যাতে লাফ বা পতন প্রভাবিত না হয়)। 10. playerRef.current.setLinvel({ x: direction.x, y: velocity.y, z: direction.z }); ফলস্বরূপ, কী টিপলে, চরিত্রটি দৃশ্যের চারপাশে ঘুরতে শুরু করে। তিনি ঘনক্ষেত্রের সাথেও যোগাযোগ করতে পারেন, কারণ তারা উভয়ই ভৌত বস্তু। WASD সেকশন কোড একটি অক্ষর চলন্ত - লাফ জাম্প বাস্তবায়নের জন্য, আসুন এবং প্যাকেজ থেকে কার্যকারিতা ব্যবহার করি। এই উদাহরণে, আসুন পরীক্ষা করি যে অক্ষরটি মাটিতে রয়েছে এবং জাম্প কী টিপানো হয়েছে। এই ক্ষেত্রে, আমরা Y-অক্ষের উপর অক্ষরের দিকনির্দেশ এবং ত্বরণ বল সেট করি। @dimforge/rapier3d-compat @react-three/rapier জন্য আমরা সমস্ত অক্ষে ভর এবং ব্লক ঘূর্ণন যোগ করব, যাতে দৃশ্যের অন্যান্য বস্তুর সাথে সংঘর্ষের সময় সে বিভিন্ন দিক থেকে পড়ে না যায়। প্লেয়ারের কোড ব্যাখ্যা: পদার্থবিদ্যা ইঞ্জিন দৃশ্য অ্যাক্সেস লাভ. এটিতে সমস্ত ভৌত বস্তু রয়েছে এবং তাদের মিথস্ক্রিয়া পরিচালনা করে। const world = rapier.world; Rapier এখানেই "রেকাস্টিং" (রেকাস্টিং) হয়। একটি রশ্মি তৈরি করা হয় যা প্লেয়ারের বর্তমান অবস্থান থেকে শুরু হয় এবং y-অক্ষকে নির্দেশ করে। এই রশ্মি দৃশ্যের কোন বস্তুর সাথে ছেদ করে কিনা তা নির্ধারণ করতে দৃশ্যে "কাস্ট" করা হয়। const ray = world.castRay(নতুন RAPIER.Ray(playerRef.current.translation(), { x: 0, y: -1, z: 0 })); খেলোয়াড় মাটিতে আছে কিনা তা পরীক্ষা করা হয়: const grounded = ray && ray.collider && Math.abs(ray.toi) <= 1.5; - তৈরি হয়েছিল কিনা; রশ্মি রশ্মি - দৃশ্যের কোন বস্তুর সাথে রশ্মির সংঘর্ষ হয়েছে কিনা; ray.collider - রশ্মির "এক্সপোজার সময়"। যদি এই মানটি প্রদত্ত মানের থেকে কম বা সমান হয় তবে এটি নির্দেশ করতে পারে যে প্লেয়ারটি "ভূমিতে" বিবেচনা করার জন্য পৃষ্ঠের যথেষ্ট কাছাকাছি রয়েছে। Math.abs(ray.toi) আপনাকে কম্পোনেন্টও পরিবর্তন করতে হবে যাতে "ল্যান্ডিং" স্ট্যাটাস নির্ধারণের জন্য রেট্রেসড অ্যালগরিদম সঠিকভাবে কাজ করে, একটি ফিজিক্যাল অবজেক্ট যোগ করে যা দৃশ্যের অন্যান্য বস্তুর সাথে ইন্টারঅ্যাক্ট করবে। গ্রাউন্ড দৃশ্যটি আরও ভালোভাবে দেখার জন্য ক্যামেরাটি একটু উঁচু করা যাক। সেকশন কোড প্রথম প্রতিশ্রুতি দ্বিতীয় প্রতিশ্রুতি চরিত্রের পিছনে ক্যামেরা সরানো ক্যামেরা সরানোর জন্য, আমরা প্লেয়ারের বর্তমান অবস্থান পাব এবং প্রতিবার ফ্রেম রিফ্রেশ করার সময় ক্যামেরার অবস্থান পরিবর্তন করব। এবং চরিত্রটি ঠিক ট্র্যাজেক্টোরি বরাবর সরানোর জন্য, যেখানে ক্যামেরা নির্দেশিত হয়, আমাদের যোগ করতে হবে । applyEuler কোড ব্যাখ্যা: পদ্ধতি নির্দিষ্ট অয়লার কোণের উপর ভিত্তি করে একটি ভেক্টরে ঘূর্ণন প্রয়োগ করে। এই ক্ষেত্রে, ক্যামেরা ঘূর্ণন ভেক্টর প্রয়োগ করা হয়. এটি ক্যামেরার অভিযোজন সাপেক্ষে গতির সাথে মেলানোর জন্য ব্যবহৃত হয়, যাতে প্লেয়ারটি ক্যামেরাটি যে দিকে ঘোরানো হয় সেদিকে চলে। applyEuler দিক আসুন আকার সামান্য সামঞ্জস্য করি এবং এটিকে ঘনক্ষেত্রের সাপেক্ষে লম্বা করি, আকার বৃদ্ধি করি এবং "জাম্প" লজিক ঠিক করি। প্লেয়ারের ক্যাপসুলকোলাইডারের সেকশন কোড প্রথম প্রতিশ্রুতি দ্বিতীয় প্রতিশ্রুতি কিউব প্রজন্ম দৃশ্যটি সম্পূর্ণ খালি মনে না করার জন্য, আসুন কিউব জেনারেশন যোগ করি। json ফাইলে, প্রতিটি কিউবের স্থানাঙ্ক তালিকাভুক্ত করুন এবং তারপরে তাদের দৃশ্যে প্রদর্শন করুন। এটি করার জন্য, একটি ফাইল তৈরি করুন , যেখানে আমরা স্থানাঙ্কগুলির একটি অ্যারের তালিকা করব। cubes.json [ [0, 0, -7], [2, 0, -7], [4, 0, -7], [6, 0, -7], [8, 0, -7], [10, 0, -7] ] ফাইলে, একটি উপাদান তৈরি করুন, যা একটি লুপে কিউব তৈরি করবে। এবং কম্পোনেন্ট সরাসরি জেনারেটেড অবজেক্ট হবে। Cube.jsx কিউব কিউব import {RigidBody} from "@react-three/rapier"; import cubes from "./cubes.json"; export const Cubes = () => { return cubes.map((coords, index) => <Cube key={index} position={coords} />); } const Cube = (props) => { return ( <RigidBody {...props}> <mesh castShadow receiveShadow> <meshStandardMaterial color="white" /> <boxGeometry /> </mesh> </RigidBody> ); } আগের একক কিউব মুছে দিয়ে কম্পোনেন্টে তৈরি করা কম্পোনেন্ট যোগ করা যাক। অ্যাপ কিউবস সেকশন কোড প্রকল্পে মডেল আমদানি করা হচ্ছে এখন দৃশ্যে একটি 3D মডেল যোগ করা যাক। চরিত্রের জন্য একটি অস্ত্র মডেল যোগ করা যাক. আসুন একটি 3D মডেল খুঁজতে শুরু করা যাক। উদাহরণ স্বরূপ, ধরা যাক। এইটা মডেলটিকে GLTF ফরম্যাটে ডাউনলোড করুন এবং প্রকল্পের মূলে সংরক্ষণাগারটি আনপ্যাক করুন। বিন্যাস পেতে আমাদের দৃশ্যে মডেল আমদানি করতে হবে, আমাদের অ্যাড-অন প্যাকেজ ইনস্টল করতে হবে। gltf-pipeline npm i -D gltf-pipeline প্যাকেজ ব্যবহার করে, মডেলটিকে থেকে পুনঃরূপান্তর করুন, যেহেতু এই ফর্ম্যাটে সমস্ত মডেল ডেটা একটি ফাইলে স্থাপন করা হয়৷ উত্পন্ন ফাইলের জন্য একটি আউটপুট ডিরেক্টরি হিসাবে আমরা ফোল্ডারটি নির্দিষ্ট করি। gltf-পাইপলাইন GLTF ফর্ম্যাট GLB ফর্ম্যাটে সর্বজনীন gltf-pipeline -i weapon/scene.gltf -o public/weapon.glb তারপরে দৃশ্যে যুক্ত করার জন্য আমাদের একটি প্রতিক্রিয়া উপাদান তৈরি করতে হবে যাতে এই মডেলের মার্কআপ থাকবে। আসুন ডেভেলপারদের ব্যবহার করি। @react-three/fiber অফিসিয়াল রিসোর্স কনভার্টারে যাওয়ার জন্য আপনাকে রূপান্তরিত ফাইলটি লোড করতে হবে। weapon.glb ড্র্যাগ অ্যান্ড ড্রপ বা এক্সপ্লোরার অনুসন্ধান ব্যবহার করে, এই ফাইলটি খুঁজুন এবং এটি ডাউনলোড করুন। কনভার্টারে আমরা জেনারেটেড রিঅ্যাক্ট-কম্পোনেন্ট দেখতে পাব, যে কোডটি আমরা আমাদের প্রোজেক্টে একটি নতুন ফাইল এ স্থানান্তর করব, কম্পোনেন্টের নাম পরিবর্তন করে ফাইলের মতো একই নামে। WeaponModel.jsx সেকশন কোড ঘটনাস্থলে অস্ত্রের মডেল প্রদর্শন করা হচ্ছে এখন তৈরি করা মডেলটি দৃশ্যে আমদানি করা যাক। ফাইলে কম্পোনেন্ট যোগ করুন। App.jsx WeaponModel সেকশন কোড ছায়া যোগ করা হচ্ছে আমাদের দৃশ্যের এই মুহুর্তে, কোনো বস্তুই ছায়া ফেলছে না। দৃশ্যে সক্রিয় করতে আপনাকে উপাদানটিতে বৈশিষ্ট্য যোগ করতে হবে। ছায়া ক্যানভাস ছায়ার এর পরে, আমাদের একটি নতুন আলোর উত্স যোগ করতে হবে। আমাদের ইতিমধ্যে দৃশ্যে থাকা সত্ত্বেও, এটি বস্তুর জন্য ছায়া তৈরি করতে পারে না, কারণ এটির একটি দিকনির্দেশক আলোর মরীচি নেই। সুতরাং আসুন একটি নতুন আলোর উত্স যোগ করি যার নাম এবং এটি কনফিগার করি। " " শ্যাডো মোড সক্রিয় করার বৈশিষ্ট্য হল । এটি এই প্যারামিটারের সংযোজন যা নির্দেশ করে যে এই বস্তুটি অন্যান্য বস্তুর উপর ছায়া ফেলতে পারে। পরিবেষ্টিত আলো দিশাগত আলো কাস্ট কাস্টশ্যাডো এর পরে, কম্পোনেন্টে আরেকটি অ্যাট্রিবিউট যোগ করা যাক, যার অর্থ হল দৃশ্যের উপাদানটি নিজের উপর ছায়া গ্রহণ করতে এবং প্রদর্শন করতে পারে। গ্রাউন্ড রিসিভশ্যাডো দৃশ্যের অন্যান্য বস্তুতে অনুরূপ গুণাবলী যোগ করা উচিত: কিউব এবং প্লেয়ার। কিউবগুলির জন্য আমরা এবং যুক্ত করব, কারণ তারা উভয়ই ছায়া কাস্ট এবং গ্রহণ করতে পারে এবং প্লেয়ারের জন্য আমরা কেবল যুক্ত করব। কাস্টশ্যাডো রিসিভশ্যাডো কাস্টশ্যাডো জন্য যোগ করা যাক। প্লেয়ারের cast Shadow যোগ করুন এবং জন্য । কাস্টশ্যাডো কিউবের শ্যাডো গ্রহণ করুন সেকশন কোড ছায়া যোগ করা - ছায়া ক্লিপিং সংশোধন করা আপনি যদি এখন ঘনিষ্ঠভাবে লক্ষ্য করেন তবে আপনি দেখতে পাবেন যে পৃষ্ঠের ক্ষেত্রফল যার উপর ছায়াটি নিক্ষেপ করা হয়েছে তা বেশ ছোট। এবং এই এলাকা অতিক্রম করার সময়, ছায়া সহজভাবে কাটা হয়। এর কারণ হল ডিফল্টরূপে ক্যামেরা থেকে প্রদর্শিত ছায়াগুলির একটি ছোট এলাকা ক্যাপচার করে। দৃশ্যমানতার এই ক্ষেত্রটিকে প্রসারিত করতে আমরা অতিরিক্ত বৈশিষ্ট্যগুলি যোগ করে উপাদানটির জন্য করতে পারি। এই বৈশিষ্ট্যগুলি যোগ করার পরে, ছায়াটি কিছুটা ঝাপসা হয়ে যাবে। গুণমান উন্নত করতে, আমরা অ্যাট্রিবিউট যোগ করব। ডিরেকশনাল লাইট ছায়া-ক্যামেরা-(শীর্ষ, নীচে, বাম, ডান) নির্দেশমূলক আলোক ছায়া-ম্যাপসাইজ সেকশন কোড একটি চরিত্রে অস্ত্র বাঁধাই এখন প্রথম ব্যক্তি অস্ত্র প্রদর্শন যোগ করা যাক. একটি নতুন উপাদান তৈরি করুন, যাতে অস্ত্রের আচরণের যুক্তি এবং 3D মডেল নিজেই থাকবে। অস্ত্র import {WeaponModel} from "./WeaponModel.jsx"; export const Weapon = (props) => { return ( <group {...props}> <WeaponModel /> </group> ); } আসুন এই উপাদানটিকে অক্ষরের এর মতো একই স্তরে রাখি এবং হুকে আমরা ক্যামেরা থেকে মানগুলির অবস্থানের উপর ভিত্তি করে অবস্থান এবং ঘূর্ণন কোণ সেট করব। RigidBody- useFrame সেকশন কোড হাঁটার সময় অস্ত্র দোলানোর অ্যানিমেশন চরিত্রের চালচলনকে আরও স্বাভাবিক করতে, আমরা নড়াচড়া করার সময় অস্ত্রের সামান্য নড়াচড়া যোগ করব। অ্যানিমেশন তৈরি করতে আমরা ইনস্টল করা লাইব্রেরি ব্যবহার করব। tween.js কম্পোনেন্টটি একটি গ্রুপ ট্যাগে মোড়ানো হবে যাতে আপনি হুকের মাধ্যমে এটিতে একটি রেফারেন্স যোগ করতে পারেন। ওয়েপন UseRef অ্যানিমেশন সংরক্ষণ করতে কিছু যোগ করা যাক. useState অ্যানিমেশন শুরু করার জন্য একটি ফাংশন তৈরি করা যাক। কোড ব্যাখ্যা: একটি বস্তুর একটি অ্যানিমেশন তৈরি করা হচ্ছে "সুইং" এর বর্তমান অবস্থান থেকে একটি নতুন অবস্থানে। const twSwayingAnimation = new TWEEN.Tween(currentPosition) ... প্রথম অ্যানিমেশন শেষ হওয়ার পর তার প্রারম্ভিক অবস্থানে ফিরে আসা বস্তুর একটি অ্যানিমেশন তৈরি করা। const twSwayingBackAnimation = new TWEEN.Tween(currentPosition) ... দুটি অ্যানিমেশন সংযুক্ত করা যাতে প্রথম অ্যানিমেশন সম্পূর্ণ হলে, দ্বিতীয় অ্যানিমেশন স্বয়ংক্রিয়ভাবে শুরু হয়। twSwayingAnimation.chain(twSwayingBackAnimation); এ আমরা অ্যানিমেশন ইনিশিয়ালাইজেশন ফাংশন বলি। useEffect- এখন আন্দোলনটি ঘটে এমন মুহূর্তটি নির্ধারণ করা প্রয়োজন। এটি চরিত্রের দিকনির্দেশের বর্তমান ভেক্টর নির্ধারণ করে করা যেতে পারে। যদি অক্ষর আন্দোলন ঘটে, আমরা অ্যানিমেশনটি রিফ্রেশ করব এবং শেষ হয়ে গেলে এটি আবার চালাব। কোড ব্যাখ্যা: এখানে বস্তুর নড়াচড়া অবস্থা পরীক্ষা করা হয়। যদি দিক ভেক্টরের দৈর্ঘ্য 0-এর বেশি হয়, তাহলে এর মানে হল যে বস্তুটির চলাচলের দিক রয়েছে। const isMoving = direction.length() > 0; যদি বস্তুটি চলমান থাকে এবং "সুইংিং" অ্যানিমেশন শেষ হয় তবে এই অবস্থাটি কার্যকর করা হয়। যদি (isMoving && isSwayingAnimationFinished) { ... } কম্পোনেন্টে, আসুন একটি যোগ করি যেখানে আমরা টুইন অ্যানিমেশন আপডেট করব। অ্যাপ ইউজফ্রেম লাইব্রেরিতে সমস্ত সক্রিয় অ্যানিমেশন আপডেট করে। এই পদ্ধতিটি প্রতিটি অ্যানিমেশন ফ্রেমে বলা হয় যাতে সমস্ত অ্যানিমেশন সুচারুভাবে চালানো হয়। TWEEN.update() TWEEN.js বিভাগ কোড: প্রথম প্রতিশ্রুতি দ্বিতীয় প্রতিশ্রুতি রিকোয়েল অ্যানিমেশন আমাদের সেই মুহূর্তটি সংজ্ঞায়িত করতে হবে যখন একটি শট গুলি করা হয় - অর্থাৎ, যখন মাউস বোতাম টিপে। চলুন এই অবস্থাটি সংরক্ষণ করতে যোগ করি, অস্ত্র বস্তুর একটি রেফারেন্স সংরক্ষণ করার জন্য এবং মাউস বোতাম টিপতে এবং ছেড়ে দেওয়ার জন্য দুটি ইভেন্ট হ্যান্ডলার যোগ করি। useState রেফ ব্যবহার করি মাউস বোতামে ক্লিক করার সময় একটি রিকোয়েল অ্যানিমেশন প্রয়োগ করা যাক। আমরা এই উদ্দেশ্যে লাইব্রেরি ব্যবহার করব। tween.js চলুন রিকোয়েল ফোর্স এবং অ্যানিমেশন সময়কালের জন্য ধ্রুবক সংজ্ঞায়িত করি। ওয়েপন উইগল অ্যানিমেশনের মতো, আমরা রিকোয়েলের জন্য দুটি ইউজ স্টেট স্টেট যোগ করি এবং হোম পজিশন অ্যানিমেশনে ফিরে যাই এবং অ্যানিমেশন শেষ স্ট্যাটাস সহ একটি স্টেট। চলুন রিকোয়েল অ্যানিমেশনের একটি র্যান্ডম ভেক্টর পেতে ফাংশন তৈরি করি - এবং । generateRecoilOffset generateNewPositionOfRecoil রিকোয়েল অ্যানিমেশন শুরু করার জন্য একটি ফাংশন তৈরি করুন। আমরা যোগ করব, যেখানে আমরা "শট" অবস্থাকে নির্ভরতা হিসাবে নির্দিষ্ট করব, যাতে প্রতিটি শটে অ্যানিমেশন আবার শুরু হয় এবং নতুন শেষ স্থানাঙ্ক তৈরি হয়। useEffect এবং এ, গুলি চালানোর জন্য মাউস কী "ধরে রাখার" জন্য একটি চেক যোগ করা যাক, যাতে কীটি প্রকাশ না হওয়া পর্যন্ত ফায়ারিং অ্যানিমেশন বন্ধ না হয়। useFrame- সেকশন কোড নিষ্ক্রিয়তার সময় অ্যানিমেশন চরিত্রের জন্য "নিষ্ক্রিয়তা" এর অ্যানিমেশনটি উপলব্ধি করুন, যাতে "ঝুলন্ত" গেমটির কোনও অনুভূতি না থাকে। এটি করার জন্য, আসুন মাধ্যমে কিছু নতুন রাজ্য যোগ করি। useState এর স্টেট থেকে মানগুলি ব্যবহার করার জন্য "উইগল" অ্যানিমেশনের প্রারম্ভিকতা ঠিক করা যাক। ধারণাটি হল যে বিভিন্ন রাজ্য: হাঁটা বা থামানো, অ্যানিমেশনের জন্য বিভিন্ন মান ব্যবহার করবে এবং প্রতিবার অ্যানিমেশনটি প্রথমে শুরু হবে। উপসংহার এই অংশে আমরা দৃশ্য প্রজন্ম এবং চরিত্র আন্দোলন বাস্তবায়ন করেছি। আমরা একটি অস্ত্রের মডেলও যোগ করেছি, গুলি চালানোর সময় এবং নিষ্ক্রিয় অবস্থায় রিকোয়েল অ্যানিমেশন। পরবর্তী অংশে আমরা নতুন কার্যকারিতা যোগ করে আমাদের গেমকে পরিমার্জন করতে থাকব। এছাড়াও প্রকাশিত. এখানে
