- 82
- 147 936
Robot Bobby
United States
Приєднався 8 тра 2012
Creative coding and code art tutorials. Mostly with THREE.js, JavaScript, and shaders.
A variety of cool topics and explorations, simply and clearly explained.
A variety of cool topics and explorations, simply and clearly explained.
Three.js Project: Realistic Rendering with Environment Maps
We're creating a simple Three.js scene rendered with physically based (PBR) materials and an HDR environment for real-time reflections and refractions.
***Exponent Interview Prep: www.tryexponent.com/?ref=bobby20 ***
Code: github.com/bobbyroe/realistic-rendering-with-env-maps
***Exponent Interview Prep: www.tryexponent.com/?ref=bobby20 ***
Code: github.com/bobbyroe/realistic-rendering-with-env-maps
Переглядів: 493
Відео
Three.js Tutorial: Scroll Animation
Переглядів 8378 днів тому
*Smooth animation triggered by scrolling.* Here's a simple Three.js application that loads an OBJ model, adds a matcap material, and features a scroll-based animation. Also includes a starfield background, and a gradient sprite layer. Customization OBJ Model: Replace astronaut.obj with any other OBJ model to customize the scene. Textures: Change the texture applied to the model by modifying the...
Three.js Beginner Tutorial: Animating Stuff
Переглядів 80115 днів тому
Building upon the basics of javascript and Three.js, let's explore building our scene and play with animating the position, and rotation of our objects Featuring: basic setup Normal Material requestAnimationFrame THREE.Vector3() methods (distanceTo and subVectors) add key listeners and Orbit Controls Code: github.com/bobbyroe/getting-started-threejs
Coding Magic: Interactive Earth with Three.js
Переглядів 91222 дні тому
# Three.js Interactive Vertex Earth Let's build an interactive globe with Three.js, complete with a starfield background and orbit controls. The globe uses custom shaders to apply textures, elevation, and alpha transparency. Features - Interactive Globe : A rotating 3D globe built with an `IcosahedronGeometry`, wireframe, and point geometry using custom shaders. - Custom Shaders : Vertex and fr...
Three.js Physics: Roll the Dice, Part 2
Переглядів 27725 днів тому
Even more satisfying interactions using Three.js, Rapier Physics, Shadow maps and helpers. Watch the first video: ua-cam.com/video/SNPKwVBY5Tk/v-deo.html
Satisfying Physics with Three.js: Roll The Dice
Переглядів 1,2 тис.29 днів тому
Let's build upon a past project to roll hundreds and hundreds of dice! Satifying interactions using Three.js, Rapier Physics, Raycasting, gltf models and more. Starting Code: github.com/bobbyroe/physics-with-rapier-and-three Completed project: github.com/bobbyroe/satisfying-dice-physics (and die.glb)
Three.js Project: Creative Coding
Переглядів 1,3 тис.Місяць тому
Quick, complete JavaScript project using post-processing glow, transforms, fog and creative coding tricks. Starting template: github.com/bobbyroe/getting-started-threejs Merch! : robotbobby.creator-spring.com/
Three.js Beginner Project: SciFi Flight (encore)
Переглядів 849Місяць тому
A JavaScript tutorial with Three.js covering the basics. Learn how to setup your scene, create some primitive objects and animate it all to create a cool sci-fi effect. Originally presented 9/14/2021, remastered and re-edited. Support my channel: www.patreon.com/RobotBobby code (refactored): github.com/bobbyroe/scifi-flight
Transform your Three.js Project with Sound FX
Переглядів 492Місяць тому
Use Three.Audio() to add cool sound effects to your project in this quick tutorial. Code: github.com/bobbyroe/flythru-wireframe-wormhole/tree/add-soundfx Support me: www.patreon.com/RobotBobby buymeacoffee.com/bobbyroe
Add Awesome Audio FX Fast For #threejs
Переглядів 1,7 тис.Місяць тому
Quickly add cool sound effects to your Three.js project in this tutorial.
Three.js Game Dev: Wormhole Blaster
Переглядів 1,2 тис.Місяць тому
Building on our *Fly Thru a Wireframe Wormhole* project, let's add BLASTERS with collision detection. We'll use Raycasting, some basic Vector math and Mouse Events Buy me a coffee: buymeacoffee.com/bobbyroe Starting code: github.com/bobbyroe/flythru-wireframe-wormhole Completed Project: github.com/bobbyroe/flythru-wireframe-wormhole/tree/blaster
Three.js Project: Vertex Earth
Переглядів 2,1 тис.2 місяці тому
Let's explore Three.js Points and the magical Shader Material to create an awesome 3D world mapped with colors and terrain. Support me on Patreon: www.patreon.com/RobotBobby Thanks to: chrisboligprojects.pythonanywhere.com/gpuEarth for the inspiration. Code here: github.com/bobbyroe/vertex-earth
Learn Three.js: Animated Text Effects
Переглядів 2,5 тис.2 місяці тому
Creating Text with Three.js is easy! Let's use the Font Loader and Line2 addons and explore some drawing effects. Support me on Patreon: www.patreon.com/RobotBobby
Three.js Tutorial : Fragmented Sculpture Art
Переглядів 7742 місяці тому
Another easy-to-follow Three.js tutorial. Learn about the loading a model, use the Mesh MatCap Material and the cool refracting lens effect of a Mesh Physical Material. Code here: github.com/bobbyroe/fractured-sculpture-art Support me on Patreon: www.patreon.com/RobotBobby
Three.js Tutorial: Dynamic 3D Art
Переглядів 9022 місяці тому
A clearly explained Three.js tutorial in reverse (and then foward). Learn about the MeshToonMaterial, Post-processing *Bokeh* effect and the math for radial positioning and animation. Get the code: github.com/bobbyroe/Dynamic-3D-Art
thank you for this, its very informative!!
I’m so glad to hear!
Is it possible to make the code with vite. It will be easier to set up and run?
Yes! I'll make a note to do that, check back!
thank you so much, this channel is a gift
You’re welcome 🙏🏼
hi, i came a cross this video and found it interesting... the video starts without the beginner point of view, so i was instantly lost and couldn't follow...
Hey @PhilipDenys Sorry to hear! Most of my tutorials start with this code: github.com/bobbyroe/getting-started-threejs Start here: ua-cam.com/video/XPhAR1YdD6o/v-deo.htmlsi=1IXdwRH7Q9QwBTUh
Hey, great video! I just have a quick question. Would it be possible to have the lights disappear when it is day, so it looks realistic?
Thanks! and yes it's possible - my first thought is to create a shaderMaterial with code that is transparent when directly lit
hey bobby can you also make a video on glsl and shaders and roadmap to learn them thanks
Great suggestion, adding it to my list
What do you do if it doesn't let you install vite, or anything because you don't have yarn or n p m.Because I don't know how to install yarn or find it.And I don't know how to find or install npm, and i'm lost
Do you have node.js installed already? This video seems helpful: ua-cam.com/video/pyvurlqIMMM/v-deo.htmlsi=KAfECc3niYEDTNGm
Why is it in such low resolution?
You could find better detail online I bet. I used the *free* textures from here: planetpixelemporium.com/earth.html and they're all 1K only.
Please try to make with Nextjs❤❤
Thanks for the suggestion. Adding it to my list!
Could you also make a tutorial on how to turn your code into a www website? And me personaly, I'm also trying to figure out, if it's possible to light a scene with a 360 degrees image?
Yes, thank you for these suggestions, adding these to my list.
Good job. What about Solar system??
Build the Solar System with Three.js ua-cam.com/video/5Wj3TnktlGc/v-deo.html
Your videos are awesome! I'm picking up a lot from them, thanks a ton. I have a question: I'm a bit lost on how the "eafc kit creator" website generates the kits. Could you explain how it works? Thanks!
Thank you! Which part loses you exactly? Looks like 3D models with textures on them to me 🙂
@@robotbobby9 Your video was one of the first I saw on the topic and you were the only one who seemed concerned about teaching. If you don't have any project in mind, I would really like it if it were possible to design these shirts, for me it's still very complicated. Thanks.
Thank you, this is amazing.
Thank you!
🎉🎉🎉🎉🎉🎉
🙏🏼🙏🏼🙏🏼
Twitter id please ROBOT
Hey guys support #ROBOT top level content uploaded on youtube
Thank you @InamKhan-b1h !
Thanks for excellent content
You're welcome
hello Bobby, please share part2,
Here's the code for part 2 github.com/bobbyroe/simple-game-part-1/tree/soundfx Not sure when I'll get around to a part 2 tutorial tho
Thank you so much for frequently updating tutorials
You're very welcome!
which branch has the FULL code? I didn't find that...🤣
main branch: github.com/bobbyroe/getting-started-threejs/tree/main
Loved this tutorial would like to see more such content
Thank you! Will do!
Tks for sharing and keep going, I hope you upgrade the scroll, when scrolling, which part will go left to right, up and down....
Hey @HuynhLuong227 - not sure I follow, you'd like to see left / right scrolling too? `window.scrollX`
@@robotbobby9 ah thank you
@@robotbobby9 wait next video, thank so much
very nice Bobby.... Please try also joint system on rapier. like door and hinge. close open. pleaaase.. :) . thank you again for the great content your posting it is fun to watch and educating.
Great suggestion! I'll look into it
hey, your lessons are really amazing! I am looking forward for when you release a full course!
Thank you! Working on it as we speak!
@@robotbobby9 Excited for it! Do you plan releasing on some platform like Udemy for example?
Probably Thinkific ☝🏼
I was just looking for this! Thank you so much awesome content! 🙌🏻💫
You're so welcome!
love the animation Bobby! I myself am working on a project where the user can import a floor plan which is vectorised and then a 3D model of that vector is generated using pure THREE js. Would love to see your take on this type of project! keep up the good work!
What's the file format for the floor plan?
@@robotbobby9 images in form of PNG, JPEG and SVG. Planning to cater for CAD files too in the future
Very cool!
really cool smooth scrolling. love the added particles
Thanks @kaizeto_ !
Subscribed.
Thanks!
I'm interested in graphics programming but starting with OpenGL seems intimidating. Would learning Three.js first help?
Sure! Three.js is not tied to WebGL or any other renderer, it’s just a great library
Thanks for great content!
My pleasure!
Excellent content! Extremely clear explanations!
Thank you!
Nicely done!
Thanks @onokas !
Thanks for this
You’re welcome!
Good video!
Thank you!
Your last incomplete word is annoying. I had enough! What about UA-camrs stop doing this nonsense from now on? What about behaving like grownups?
Whoops! 😬
Hey, could you help me on a personal project im working on for school, basically create near earth objects in three.js
Interesting stuff! I found this image: en.wikipedia.org/wiki/Near-Earth_object#/media/File:Potentially_Hazardous_Asteroids_2013.png Are you going to track actual objects or just simulate / approximate them?
@@robotbobby9 tracking the object is out of my scope, simulate is the way to go, at least for me, most of the object wont even move significantly for at-least another few months
Please let me know how things progress, feel free to PM me
and are you on twitter? I post about projects I learn from your videos, I'd like to tag you if you have an account
Yes! x.com/Roestries
I love it
Brother Rob Malik Yusef(Kanyes main collaborator) and I are launching more than a couple culture driven tech projects and would love to get you involved however that looks lmk🙏
Sounds great, pm me! Cheers
Great video, can custom geometries be used with Rapier?
Yes, "Triangle meshes ... can be used to describe the boundary of any kind of shape." rapier.rs/docs/user_guides/javascript/colliders#triangle-meshes-and-polylines
Great video! Three.js' automatic mapping from flat texture to sphere/icosahedron really simplifies the process.
Great video, you are getting better!
Thank you @fwdflashwebdesign!
@@robotbobby9 welcme...
how do you handle when the raycaster co-ordinates and mouseUV are not same?
Not sure I understand, since the mouseUV uniform gets it's value from the raycaster `function handleRaycast() { raycaster.setFromCamera(pointerPos, camera); const intersects = raycaster.intersectObjects([globe], false); if (intersects.length > 0) { globeUV.copy(intersects[0].uv); } uniforms.mouseUV.value = globeUV; }`
@@robotbobby9 I didn't explain my problem better. Sorry for that, English isn't my primary language I wasnt rotating the wireframed mesh underlying the ShaderMaterial that was causing problems with uv co-ordinates. Anyway, the problem has been fixed now. Great videos
thank you for your tutorials. Idk if you know how much it's helpful. Keep going man
Thank you @fiuzzii - the feedback is most welcome!
really cool
Thanks @agendaaaa
That’s awesome!! 👏👏👏
Thank you! 🙏🏼
Great work!
Thank you! Cheers!
Great thumbnail😂👏
Thanks! 😊