React + TypeScript + Three.js を使って「200行ぐらいで書ける」簡単な3Dゲームを作ってみたthree.jsTypeScriptゲーム制作React作ってみた はじめに かけだしバックエンドエンジニアのhiです。 最近、JavaScriptで簡単に3D描画ができるライブラリ「Three.js」に興味を持って触っていました。どうせならなんか作ろうと思い簡単なゲームを作成してみました。よかったら見てやってください。 ゲーム↓ ソース↓ 作成環境 React:18.2.0 TypeScript:4.7.4 Three.js:0.143.0 作り方 0.前提 作り方を理解するには、React、TypeScript、Three.jsがある程度わかるぐらいの知識が必要となります。 特にReact、TypeScriptの知識がないと「???」ってなるので事前に他の記事などで
![React + TypeScript + Three.js を使って「200行ぐらいで書ける」簡単な3Dゲームを作ってみた - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5ef49d72d5dfb4ddf81f60e9636b6fa1fd79a136/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9UmVhY3QlMjAlMkIlMjBUeXBlU2NyaXB0JTIwJTJCJTIwVGhyZWUuanMlMjAlRTMlODIlOTIlRTQlQkQlQkYlRTMlODElQTMlRTMlODElQTYlRTMlODAlOEMyMDAlRTglQTElOEMlRTMlODElOTAlRTMlODIlODklRTMlODElODQlRTMlODElQTclRTYlOUIlQjglRTMlODElOTElRTMlODIlOEIlRTMlODAlOEQlRTclQjAlQTElRTUlOEQlOTglRTMlODElQUEzRCVFMyU4MiVCMiVFMyU4MyVCQyVFMyU4MyVBMCVFMyU4MiU5MiVFNCVCRCU5QyVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MSVCRiVFMyU4MSU5RiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YjM4MTlkYWFlNzZlOTUwNGNhNGU4ZjUxMzhlMWUwZWE%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwaGlfa2F3YW5vJTIwaW4lMjAlRTYlQTAlQUElRTUlQkMlOEYlRTQlQkMlOUElRTclQTQlQkUlRTMlODMlOUUlRTMlODIlQTQlRTMlODIlQjklRTMlODIlQkYlRTMlODMlQkMlRTMlODMlQkIlRTMlODIlQUUlRTMlODMlQUIlRTMlODMlODkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zMiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWFmZTY1NDM1N2U5ZTJhM2M3NTYzNTU5NDkwMGI3MTc4%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D3aba4c5f29c30969a7be48567643ef5f)