{"id":356374,"date":"2024-05-20T23:28:19","date_gmt":"2024-05-20T23:28:19","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=356374"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2024-05-20T23:28:19","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=356374","title":{"rendered":"React + Three.js. Creating your own 3D shooter. Part 1<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

Hello, esteemed Habr contributors!<\/p>\n

Introduction <\/h3>\n

In modern web development, the boundaries between classic and web applications are blurring every day. Today we can create not only interactive websites, but also full-fledged games right in the browser. One of the tools that makes this possible is the React Three Fiber<\/strong><\/a> <\/strong>library — a powerful tool for creating 3D graphics based on Three.js<\/strong><\/a> using React <\/strong>technology. <\/p>\n

About the React Three Fiber stack <\/h3>\n

React Three Fiber is <\/strong>a wrapper over Three.js <\/strong>that uses the structure and principles of React <\/strong>to create 3D graphics on the web. This stack allows developers to combine the power of Three.js <\/strong>with the convenience and flexibility of React<\/strong>, making the process of creating an application more intuitive and organised.<\/p>\n

At the heart of React Three Fiber is <\/strong>the idea that everything you create in a scene is a React<\/strong> component. This allows developers to apply familiar patterns and methodologies.<\/p>\n

One of the main advantages of React Three Fiber <\/strong>is its ease of integration with the React <\/strong>ecosystem. Any other React<\/strong> tools can still be easily integrated when using this library.<\/p>\n

Relevance of Web-GameDev <\/h3>\n

Web-GameDev <\/strong>has undergone major changes in recent years, evolving from simple 2D Flash<\/strong><\/a> <\/strong>games to complex 3D projects comparable to desktop applications. This growth in popularity and capabilities makes Web-GameDev an area that cannot be ignored.<\/p>\n

One of the main advantages of web gaming is its accessibility. Players do not need to download and install any additional software — just click on the link in their browser. This simplifies the distribution and promotion of games, making them available to a wide audience around the world.<\/p>\n

Finally, web game development can be a great way for developers to try their hand at gamedev using familiar technologies. Thanks to the available tools and libraries, even without experience in 3D graphics, it is possible to create interesting and high-quality projects!<\/p>\n

Game performance in modern browsers <\/h3>\n

Modern browsers have come a long way, evolving from fairly simple web browsing tools to powerful platforms for running complex applications and games. Major browsers such as Chrome<\/strong>, Firefox<\/strong>, Edge <\/strong>and others are <\/strong>constantly being optimised and developed to ensure high performance, making them an ideal platform for developing complex applications.<\/p>\n

One of the key tools that has fuelled the development of browser-based gaming is WebGL<\/u><\/strong><\/a>. This standard allowed developers to use hardware graphics acceleration, which significantly improved the performance of 3D games. Together with other webAPIs, WebGL <\/strong>opens up new possibilities for creating impressive web applications directly in the browser.<\/p>\n

Nevertheless, when developing games for the browser, it is crucial to consider various performance aspects: resource optimisation, memory management and adaptation for different devices are all key points that can affect the success of a project.<\/p>\n

On your mark! <\/h3>\n

However, words and theory are one thing, but practical experience is quite another. To really understand and appreciate the full potential of web game development, the best way is to immerse yourself in the development process. Therefore, as an example of successful web game development, we will create our own game. This process will allow us to learn key aspects of development, face real problems and find solutions to them, and see how powerful and flexible a web game development platform can be.<\/p>\n

In a series of articles, we’ll look at how to create a first-person shooter using the features of this library, and dive into the exciting world of web-gamedev!<\/p>\n

Final demo<\/p>\n

\n
<\/div>\n
\n
FPS Game<\/span><\/div>\n

zy45x4-5173.csb.app<\/a><\/div>\n<\/div>\n

\n
<\/div>\n
\n
fps-game\/master — CodeSandbox<\/span><\/div>\n

codesandbox.io<\/a><\/div>\n<\/div>\n

Repository on GitHub<\/u><\/a><\/p>\n

Now, let’s get started!<\/p>\n

Setting up the project and installing packages <\/h3>\n

First of all, we will need a React <\/strong>project template. So let’s start by installing it. <\/p>\n

npm create vite@latest<\/code><\/pre>\n