3D Food Delivery App w/ React Native and React three Fiber
ฝัง
- เผยแพร่เมื่อ 29 มิ.ย. 2024
- Let's learn how to create a 3D Sandwich Configurator with React Native, Expo, Three.js and React three Fiber through this step-by-step video tutorial!
🚀 Learn React Three Fiber with my complete course ✨
lessons.wawasensei.dev/course...
Final code 🔗
github.com/wass08/r3f-wawa-eats
#threejs #reactnative #reactthreefiber
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
Sandwich ingredients model
sketchfab.com/3d-models/sandw...
Download Android Studio
developer.android.com/studio
React Three Fiber React Native documentation
docs.pmnd.rs/react-three-fibe...
Expo Metro Config
docs.expo.dev/guides/customiz...
Convert font to Typeface.js
gero3.github.io/facetype.js/
Zustand Library
github.com/pmndrs/zustand
React Spring
docs.pmnd.rs/react-three-fibe...
▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬
00:00 - Intro
01:03 - Create React Native App
04:13 - React Three Fiber Native
09:18 - Zustand State Management
12:25 - 3D Sandwich Ingredients
17:45 - Scroll views & Touchable Opacity
26:39 - Animations & Final Touch
31:10 - Final result
31:24 - See you soon
▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
/ @wawasensei
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
/ discord
📸 Instagram :
/ wawa.sensei
🎎 Facebook :
/ wawasenseiyt
🐦Twitter :
/ wawasensei
🐦TikTok :
/ wawasensei08
💻 My website :
www.wawasensei.dev - วิทยาศาสตร์และเทคโนโลยี
i just discovered you today.. and i must say... i dont even have words.. Thank youuuuuu!@@@
Wow, thank you! 😍
Welcome on board!
You are such a blessing to the community. Thank you! ❤
Thanks to you more 😍
Thank you so much for the wonderful video!
I've been racking my brain over the past month on how to draw glb files with React Native + expo.
I subscribed to the channel and gave it a high rating! I'm rooting for you!
Thank you very much for the kind words, very happy to help 🙌
Welcome to the channel 🙏
I am very grateful for your dedication to R3F
🫡
Sir hats off! So much skill! So much experience working with 3D stuff! Would love to see a new modern 3D portfolio website next ❤❤
Thank you very much! Great suggestion! 🙌
I love almost all of your r3f videos. Hope you make a video about character movement on a rough terrain(not plane surface).
Thank youuu! I definitely plan to make it in the near future!
I'm so excited of this video!
🔥
Great video! Please bring more videos using react-three with react-native! greetings from Brazil!
😍 Thank you, will do! I really love React Native!
Thanks for the video! It would be nice to see r3f/uikit with react native.
That's so creative
Continued support as always 👍👍🎉🎉
🥰
You are three.js wizard 💖💖💖
wawa i love you! best !
Love you more mate 😍🙌
Amazing video wawa! ❤ one question: is there a way to use physics in react-native?
I'm looking for more videos on using React Native with Three and Expo. There isn't that many youtube videos on it. I want to export my glb models to Reacr Native and have an interactive display on the phone.
Senpai amazing video as always! Always content I’ve never thought I’ve needed! So grateful. A suggestion for you next tutorial is to help manage user data and data queries from a database. For example using drizzle, next.js server components and planet scale. Say a player logs in and we have to store their content and data of their account knowing how to do this well will be super useful. It can even be something like creating a Sketchfab clone.
Thank you very much! I don't know drizzle/planet scale, can you tell me more about it?
Ohh so Drizzle is an ORM I see people recommending. PlanetScale is a database (there is also Superbase). But I believe for smaller projects using something like Clerk might work as we can store data there of a user.
The idea is to handle user logins but also allowing the users to save their game progress and other user generated content offline on a database associated to their login credentials (like uploading 3D models). Whenever the user starts a new session while logged in we can get the game save state from Clerks metadata (or from our database) to see if its synced with their local cache file and if not it would sync. Implementing say heavy lifting user content would require a better CDN so something like Cloudflare, Vercel, PlanetScale or Superbase.
The possibilities are endless... for example, say someone adds a mixamo character we can perhaps train a GPT to generate animation data for it via a prompt and the user can receive a download of their animated character. (obviously thats more complex, but you get my point). It opens the world of SAAS products for R3F creators. @@WawaSensei
Hi Wawa Sensei, great tutorial, I'm doing the lip sync tutorial in react native but I've had several problems, the animations and useState variables don't get along, the expo audio is asynchronous and the mouth movement looks bad, can you make an animations tutorial and audio for react native?
Please make a firstperson metaverse video
Wow awesome work you are the Best bro ❤❤
Thanks buddy!
Once again ❤
Hi buddy! Thanks a lot!
Just gained a sub!
Welcome! 🙌
🚀🚀🚀Faster than AI Hype
Hihi thank you!!
yes we need react naive
You've been heard, let's do it!
Please make more projects on this
Let's go!
Please, give us more golden tickets 😢😂
Hahaha once per video or I'd go bankrupt! (It didn't last long haha)
Golden ticket is already Redeemed
Indeed! twitter.com/wawasensei/status/1771105612258058371
my installation didnt gave me the app.js
Very messy install process. Didnt really manage to follow along. Thanks tho.
Sorry to hear that, welcome
import { View, Text } from 'react-native'
import React from 'react'
import { useLoader } from '@react-three/fiber/native'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { Canvas } from '@react-three/fiber/native';
const HotelModel = () => {
const model = useLoader(GLTFLoader, require('../assets/Lowpoly Coffee Shop.gltf'))
return (
)
}
export default HotelModel
The above error occurred in the component:
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
ERROR Error: Could not load 5: Cannot read property 'indexOf' of undefined
im getting this error please help me. Thanks in advance
you're not importing files the way I show in the video (which differs between r3f web and r3f for react native)
PS : use discord instead of posting code here lessons.wawasensei.dev/discord
@@WawaSensei yes thank you. I will do that. It worked.
@@vimalraj-ji5hg 💪
Thanks for the great tutorial.🍔🍔🍔
I had problems trying to install with the current version of react-three/drei for loading glb models.
So I used the package versions from the repo .json file.
For anyone else with issues, below are the commands I used for npm install that worked for me.
npx create-expo-app
cd
npx expo install three @react-three/fiber@8.15.19 expo-gl @react-three/drei@9.102.6 expo-three
The rest the same as tutorial.
hi @WawaSensei, after installed @react-three/fiber and add metro.config i, get this warning: "THREE.WebGLRenderer: WEBGL_lose_context extension not supported." and my iphone simulator not show any thing in the canvas
At 2:44 is the answer. You either run it on a physical iOS device or android emulator.
Ios emulator cannot render 3d models
oh god, thanks @vejko, @PetrandoRichard. I missed that