Coding Naruto's Rasengan with JavaScript + Three.js

Published: 18 December 2021
on channel: Suboptimal Engineer
1,911
67

In this game dev experiment, we will go over the process of coding a Rasengan from the Naruto anime. We start off by setting up the React project with Three JS. Then we get create a sin wave vertex shader for the moving particles. Next, we add a surrounding sphere with glow effects using fragment shaders. Finally, we load the "Hand Anatomy" OBJ file from Caterina Zamai and add it to the scene to make the Rasengan look more realistic.

📖 Code - https://github.com/SuboptimalEng/thre...
🐦 Twitter -   / suboptimaleng  
💻 GitHub - https://github.com/SuboptimalEng
🌎 Website - https://suboptimaleng.com

== [ Credits ] ==
Caterina Zamai - https://www.artstation.com/zaccate
Hand Anatomy by Caterina Zamai - https://sketchfab.com/3d-models/hand-...

== [ Resources ] ==
Three.js Guide - https://sbcode.net/threejs/scene-came...
Chris Courses -    • Intermediate Three.js Tutorial: Make ...  

== [ Timestamps ] ==
00:00 What is the Rasengan?
00:30 Set up React + Three JS
01:30 Simple Vertex Shader
02:16 Wave Vertex Shader
03:16 Rasengan Fragment Shader
04:45 Glow Effect Fragment Shader
05:16 Hand OBJ Loader
06:22 Demo

== [ Tags ] ==
#suboptimal #metaverse #threejs


Watch video Coding Naruto's Rasengan with JavaScript + Three.js online without registration, duration hours minute second in high quality. This video was added by user Suboptimal Engineer 18 December 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,911 once and liked it 67 people.