My reaction to seeing this orbit control after developing 25 web applications knowing nothing about it: 😱🤯. Such a cool thing. Thank you for sharing this, bro.
Just curious, I've being dabbling with first person / third person game cameras, physics, and basic animations in THREE.js for a while now. Thinking about maybe making a couple videos since I see that there is some interest. All of the current videos are really basic and only really help you get a cube on the screen. What kinds of things are you looking for?
@@AddyVDH for now I want to keep it as simple as possible, threjs always for me had a big learning curve, being a react dev this was amazing to see. I don't paln on becoming a web based game dev, but I have some very simple dongeon crawler ideas. I am looking at a simple box based rpg, a watered down version of the minecraft rpg minus the randomness for now. This is soo much fun however as there is tons of UI elements one can do for a enterprise app.
@@AddyVDH I would really really appreciate a tutorial on making a basic map and just the functionality to walk around it whilst staying in the browser, I can find tutorials anywhere, I want to make a map in blender or another 3D tool and then be able to just walk around it!
@@DownTheRabbitHole341 I've got a number of demos with this functionality. Perhaps I should slap something together showing how this can be done. I'm a react dev mainly is the only issue. I feel like using typescript + react doesnt lend itself well to tutorials.
Awesome starter tutorial. I could definitly see making a flying game with some simple keyboard listeners (wasd, spacebar) or even a first person shooter with wasd, spacebar, mouse tracking. Pretty crazy for in the browser. Should be fine for the 3d chess game im building :D
It does exaclty as you predicted, it makes a default camera and scene for us. The reason being, to eliminate the boiler plate code that is needed just to set up your stuff. You can still set a camera and it's properties like you would in THREE. The Canvas component has a camera property that takes an object. for example like so:
Yes, remember canvas is a api from browser, it will render in the client. Nextjs will output an html with canvas but the actual rendering of the 3d app will be on clients (browser)
@@matteothomas187 Thank you! That works. Is there any notable difference between styling the canvas/root/body in the CSS and putting a directly in my scene?
Heyoo, that's unbelievable what I saw, that's the whole new way of game development. Loved the video, awesome. Can anyone send me some through which I can contact MR. Daniel Bark
Man, as a designer - this knowledge is gold
Same but I can't use react so I just load 'script src=three.js' in header 😂
I don't know why, but I feel so calm, listening to him!
My reaction to seeing this orbit control after developing 25 web applications knowing nothing about it: 😱🤯.
Such a cool thing. Thank you for sharing this, bro.
Thank you for speaking slowly!! I’m understanding it much better
Gabagool
Me, watching the video at 2X and thinking why UA-cam doesn't have x3 HAHAHA
"React is a component framework"......
…. and the internet is a homepage….
For months I have been looking for something like this!!!!!
Just curious, I've being dabbling with first person / third person game cameras, physics, and basic animations in THREE.js for a while now. Thinking about maybe making a couple videos since I see that there is some interest. All of the current videos are really basic and only really help you get a cube on the screen.
What kinds of things are you looking for?
@@AddyVDH for now I want to keep it as simple as possible, threjs always for me had a big learning curve, being a react dev this was amazing to see. I don't paln on becoming a web based game dev, but I have some very simple dongeon crawler ideas. I am looking at a simple box based rpg, a watered down version of the minecraft rpg minus the randomness for now. This is soo much fun however as there is tons of UI elements one can do for a enterprise app.
@@AddyVDH I would really really appreciate a tutorial on making a basic map and just the functionality to walk around it whilst staying in the browser, I can find tutorials anywhere, I want to make a map in blender or another 3D tool and then be able to just walk around it!
@@DownTheRabbitHole341 I've got a number of demos with this functionality. Perhaps I should slap something together showing how this can be done.
I'm a react dev mainly is the only issue. I feel like using typescript + react doesnt lend itself well to tutorials.
this was so straight forward, i really appreciate this tutorial thank you!
Long time no C
only JavaScript
Oh, this looks so cool! I am going to play with this. Upvote!
Awesome starter tutorial. I could definitly see making a flying game with some simple keyboard listeners (wasd, spacebar) or even a first person shooter with wasd, spacebar, mouse tracking. Pretty crazy for in the browser.
Should be fine for the 3d chess game im building :D
I know react and am currently learning threejs, I didn’t know about react there fiber, thanks! Definitely beats using useRef on a canvas
Fantastic tutorial! Can't wait to build something using this starting point.
Thanks for this tutorial. Explained every detail is very nice for beginer like me.
Thanks! Fantastic introduction to React Fiber!
12:26 man is impressed by his own works 🤣
Awesome tutorial by the way
Hi, Thank you 🙏 That's really cool 👌🌹 please make more videos like that 🙏🌹 good luck 🖐
I love your bg music 🎶
how did you get the boxBufferGeometry& meshLambertMaterial?? Was it imported ?
Great knowledge, well I 'm a react developer, that's what we teaches to our students about reactjs.
Great video! Thanks
"drei" is just the german word for "three"
Thx a lot!!! Your vid bring me to get a job!!!
somethings outdated, what you need to do is use npm install @react-three/cannon and not npm install cannon because it has become depreciated
Yes, and the drei too. You have to do "npm install @react-three/cannon"
Yes, it's kinda cool. But how does it work with side effects, like loading a gltf, and than ways of interacting with that scene graph...
Ok, next up is this video, it goes a bit deeper into what you can do with React Three Fiber : ua-cam.com/video/1rP3nNY2hTo/v-deo.html
Spectacular 💥💥💥
Thanks, please how can drag and drop and manipulate OBJLoader
Do you have a video showing how to set three fiber up in nextjs?
I saw this idea few years ago as game prototype. Seems full game never made it till the end.
First question, does it have (Android) AR components too?!
Try 1.25 speed for better experience 👌
Wow awesome tutorial! I'm just curious why don't we have to add a scene or camera? Does react-three-fiber handle that for us
It does exaclty as you predicted, it makes a default camera and scene for us.
The reason being, to eliminate the boiler plate code that is needed just to set up your stuff.
You can still set a camera and it's properties like you would in THREE.
The Canvas component has a camera property that takes an object.
for example like so:
@@latch1660 thank you this is helpful!
Wow This is why I'm learning programming o m g amazing
How to make Flappy Box in 10 mins 👏
Very helpful
Always a great video.
Ok, I'll make a game... be right back
Beautiful. Thx
Can react three fiber be used for AR?
Yes
I create blender model and I wonder if I can import them and load them into the scene...
Yes
Can you please make tutorial about how to load .stl and .3mf file using react-three-fiber?
really cool, good content
Thank you!
Hey this was a great video. By chance, do you know if you can do this in NextJS as well? or does this only work in react?
Yes, remember canvas is a api from browser, it will render in the client. Nextjs will output an html with canvas but the actual rendering of the 3d app will be on clients (browser)
React is actually a library, not a framework.
How do I use this in Next.js bro. Any idea?
where finding working step by step code information how use procedural on Three
Thanks man!
how can i import more than 1 function??
i have one function i want to usse for the layout, like navbars and stuff, and the other i want it as the main thing, and i want it to have animations
Amazing 🔥
Thanks 🙏
Qaqaş konkret kayfdadı. Çəkib gəlib video çəkməyə. Amma danışdıqları peçatdı 👍👍
Dope af!
My are grey with a white background as a default - anybody know why or how to change it?
in your .css file
canvas {
background-color: black
}
@@matteothomas187 Thank you! That works.
Is there any notable difference between styling the canvas/root/body in the CSS and putting a directly in my scene?
@@neoncut I'm not sure, I'm still new to Three.js
@@neoncut I think css is faster because js have to do a lot off stuff before and after code execution
vi in visual code, susbcribed
Can anyone link me with the credits music, please!!
Heyoo, that's unbelievable what I saw, that's the whole new way of game development.
Loved the video, awesome. Can anyone send me some through which I can contact MR. Daniel Bark
Here i am! :D
THIS IS GOLDDDDDDDDDDDDDDDD
you're definitely related to pewdiepie
Sadly they changed the imports and libraries structures :) But great video!
Where can I learn the new stuff ?
Can you recommend a video ?
I had to use -Math.PI / 2
Fiber seems better than react360 (reactVR)
Nice
cool
Subscribed ❤️
Nifty
x1.25 for sure
very sleepy
npm i chokidar
Im first
you talk too slow intro was like for 2mins pls don't do that.
beautiful, thanks for the video, but the intro is damn too long. Here is the actual video: 2:14
Thanks!