--- title: React + Three.js. Creating your own 3D shooter. Part 1 description: 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... canonical: https://daily.dev/posts/react-three-js-creating-your-own-3d-shooter-part-1-ztbzz4exn twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: React + Three.js. Creating your own 3D shooter. Part 1 | daily.dev og:description: 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... og:url: https://daily.dev/posts/react-three-js-creating-your-own-3d-shooter-part-1-ztbzz4exn og:image: https://api.daily.dev/og/posts/ZTbZZ4exn.png og:image:alt: React + Three.js. Creating your own 3D shooter. Part 1 og:image:width: 1200 og:image:height: 630 og:locale: 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: --- 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) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"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","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/react-three-js-creating-your-own-3d-shooter-part-1-ztbzz4exn"},"datePublished":"2023-10-03T21:30:20.430Z","dateModified":"2026-05-28T02:17:15.533Z","description":"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...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/cd2179940c18e4cc31e362d33319fccc?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/cd2179940c18e4cc31e362d33319fccc?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"DEV","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"DEV","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/devto","url":"https://daily.dev/sources/devto"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/react-three-js-creating-your-own-3d-shooter-part-1-ztbzz4exn","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"3d,react,react-three-fiber,threejs,webdev","timeRequired":"PT14M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"DEV","item":"https://daily.dev/sources/devto"},{"@type":"ListItem","position":3,"name":"React + Three.js. Creating your own 3D shooter. Part 1"}]} ```