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 RUclips doesn't have x3 HAHAHA
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.
Oh, this looks so cool! I am going to play with this. Upvote!
this was so straight forward, i really appreciate this tutorial thank you!
Thanks! Fantastic introduction to React Fiber!
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.
I love your bg music 🎶
12:26 man is impressed by his own works 🤣
Awesome tutorial by the way
I know react and am currently learning threejs, I didn’t know about react there fiber, thanks! Definitely beats using useRef on a canvas
Long time no C
only JavaScript
how did you get the boxBufferGeometry& meshLambertMaterial?? Was it imported ?
Spectacular 💥💥💥
Always a great video.
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
Great video! Thanks
Thx a lot!!! Your vid bring me to get a job!!!
Hi, Thank you 🙏 That's really cool 👌🌹 please make more videos like that 🙏🌹 good luck 🖐
Wow This is why I'm learning programming o m g amazing
"React is a component framework"......
…. and the internet is a homepage….
really cool, good content
Very helpful
vi in visual code, susbcribed
Amazing 🔥
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 : ruclips.net/video/1rP3nNY2hTo/видео.html
Great knowledge, well I 'm a react developer, that's what we teaches to our students about reactjs.
Do you have a video showing how to set three fiber up in nextjs?
First question, does it have (Android) AR components too?!
Thank you!
Thanks man!
Thanks 🙏
Thanks, please how can drag and drop and manipulate OBJLoader
Beautiful. Thx
Try 1.25 speed for better experience 👌
Dope af!
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!
Can react three fiber be used for AR?
Yes
How do I use this in Next.js bro. Any idea?
THIS IS GOLDDDDDDDDDDDDDDDD
Subscribed ❤️
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)
Can you please make tutorial about how to load .stl and .3mf file using react-three-fiber?
How to make Flappy Box in 10 mins 👏
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"
Ok, I'll make a game... be right back
where finding working step by step code information how use procedural on Three
I create blender model and I wonder if I can import them and load them into the scene...
Yes
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
"drei" is just the german word for "three"
Can anyone link me with the credits music, please!!
I saw this idea few years ago as game prototype. Seems full game never made it till the end.
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
Nice
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
Qaqaş konkret kayfdadı. Çəkib gəlib video çəkməyə. Amma danışdıqları peçatdı 👍👍
you're definitely related to pewdiepie
Nifty
cool
beautiful, thanks for the video, but the intro is damn too long. Here is the actual video: 2:14
I had to use -Math.PI / 2
Fiber seems better than react360 (reactVR)
React is actually a library, not a framework.
Sadly they changed the imports and libraries structures :) But great video!
Where can I learn the new stuff ?
Can you recommend a video ?
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.
Thanks!