--- title: "React + Three.js. Creating your own 3D shooter. Part 1" url: https://daily.dev/posts/react-three-js-creating-your-own-3d-shooter-part-1-ztbzz4exn source_url: https://dev.to/ji0pata/react-threejs-creating-your-own-3d-shooter-part-1-3ee2 type: article source: "DEV" published: 2023-10-03T21:30:20.430Z updated: 2026-05-28T02:17:15.533Z tags: ["3d", "react", "react-three-fiber", "threejs", "webdev"] reading_time: 14 upvotes: 2 comments: 0 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # React + Three.js. Creating your own 3D shooter. Part 1 **[DEV](https://daily.dev/sources/devto)** · 14 min read · 2 upvotes · 0 comments ## Summary Learn how to create a 3D shooter game using React Three Fiber, a powerful tool for creating 3D graphics based on React. Explore the relevance of web game development and the performance of modern browsers. Set up the project, customise the canvas display, add physics, move the character, generate cubes, import and display a 3D model, and add shadows. Also, implement animations for weapon swinging, recoil, and inactivity. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 0 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments --- Tags: [#3d](https://daily.dev/tags/3d), [#react](https://daily.dev/tags/react), [#react-three-fiber](https://daily.dev/tags/react-three-fiber), [#threejs](https://daily.dev/tags/threejs), [#webdev](https://daily.dev/tags/webdev) [View this post on daily.dev](https://daily.dev/posts/react-three-js-creating-your-own-3d-shooter-part-1-ztbzz4exn)