![Irradiance](/img/default-banner.jpg)
- 34
- 269 399
Irradiance
เข้าร่วมเมื่อ 30 ม.ค. 2016
Hello youtube! This channel will mainly focus on creating 3D content for the web with state of the art libraries and frameworks, with practical tutorials aimed to simplify as much as possible all the topics discussed
Getting Started with Threlte: Animating a Spaceship in Three.js and Svelte - Part 3
Continuing our journey on discovering the Threlte framework, in this episode we'll create the background of the project by using Instanced Meshes, a powerful Threejs construct that gives us access to high-performance rendering of multiple meshes that share the same geometry. We're also going to seamlessly animate the stars with a simple javascript script, and finally apply postprocessing effects to the scene to apply the cherry on top! I hope you had fun while following this project, and I hope to see you soon on our next adventure! ❤
Timestamps:
00:00 - Introduction
00:14 - Stars.svelte
01:14 - Increasing stars count
02:43 - Instancing
03:23 - Adding colors
04:00 - Stars animation
05:49 - Postprocessing
07:45 - Reflections
09:24 - Conclusion
Try it on your browser (it will take a while to fully download)
domenicobrz.github.io/youtube/threlte/spaceship-anim/
Repo of the project:
github.com/Domenicobrz/Threlte-in-practice-spaceship
Episode 0 branch:
github.com/Domenicobrz/Threlte-in-practice-spaceship/tree/episode_3
Models & textures:
github.com/Domenicobrz/Threlte-in-practice-spaceship/tree/episode_3/static
Subscribe for more exciting webdev tutorials, JavaScript & react three fiber / threejs projects, svelte & threlte content, and a lot of creative coding tips!
If you find this tutorial helpful, don't forget to like the video and share it with your fellow developers. Leave your comments below if you have any questions or suggestions for future videos.
Connect with me on social media:
Twitter: Domenico_brz
Instagram: domenicbrz
Website: domenicobrz.github.io/
Thank you for watching, and happy coding!
#svelte #threejs #javascript
Timestamps:
00:00 - Introduction
00:14 - Stars.svelte
01:14 - Increasing stars count
02:43 - Instancing
03:23 - Adding colors
04:00 - Stars animation
05:49 - Postprocessing
07:45 - Reflections
09:24 - Conclusion
Try it on your browser (it will take a while to fully download)
domenicobrz.github.io/youtube/threlte/spaceship-anim/
Repo of the project:
github.com/Domenicobrz/Threlte-in-practice-spaceship
Episode 0 branch:
github.com/Domenicobrz/Threlte-in-practice-spaceship/tree/episode_3
Models & textures:
github.com/Domenicobrz/Threlte-in-practice-spaceship/tree/episode_3/static
Subscribe for more exciting webdev tutorials, JavaScript & react three fiber / threejs projects, svelte & threlte content, and a lot of creative coding tips!
If you find this tutorial helpful, don't forget to like the video and share it with your fellow developers. Leave your comments below if you have any questions or suggestions for future videos.
Connect with me on social media:
Twitter: Domenico_brz
Instagram: domenicbrz
Website: domenicobrz.github.io/
Thank you for watching, and happy coding!
#svelte #threejs #javascript
มุมมอง: 1 165
วีดีโอ
Getting Started with Threlte: Animating a Spaceship in Three.js and Svelte - Part 2
มุมมอง 1K5 หลายเดือนก่อน
What's up youtube! Welcome back to the second episode of our introduction to Threlte, a javascript library that mixes the powerful svelte framework with threejs. In this episode, we'll focus on animating the spaceship model, and letting it react to mouse movements via the Raycaster object, we're also going to simulate a spring-based motion by using some easy-to-follow math to setup a basic srpi...
Getting Started with Threlte: Animating a Spaceship in Three.js and Svelte - Part 1
มุมมอง 3.4K6 หลายเดือนก่อน
What's up youtube! I'm back with a small Threlte project, where we'll introduce this amazing library by building an animated spaceship that reacts to your mouse movement, we're also going to explore the most important hooks of this wonderful library and learn all the ins and outs of how to combine svelte with threejs. This first part of the tutorial will focus on setting up the project, explori...
JavaScript Game Development: Build an Airplane Flying Game with React Three Fiber & Three.js- Part 4
มุมมอง 2.4K10 หลายเดือนก่อน
Here's the final stop of our series! In this episode, we'll take a look at how to create and intersect the floating targets that we had in the original scene, and also how to compute the motion blur effectwhen we activate turbo mode. I hope you enjoyed this little series on how to create a javascript game with threejs and react three fiber, we've explored a lot of interesting tricks and tips th...
JavaScript Game Development: Build an Airplane Flying Game with React Three Fiber & Three.js- Part 3
มุมมอง 2.1K10 หลายเดือนก่อน
And now, in part three of our journey in creating a small Airplane Flying Game using Three.js and React Three Fiber, we'll build the controls of the airplane and refine them to match the look and feel of a polished and smooth flying game, by using a few known tricks in the computer graphics world like accelleration-based speed increment, exponential falloff, and delayed entity to camera transfo...
JavaScript Game Development: Build an Airplane Flying Game with React Three Fiber & Three.js -Part 2
มุมมอง 3.7K10 หลายเดือนก่อน
What's up youtube! welcome back to part 2 of our journey in creating a small Airplane Flying Game using Three.js, a powerful 3D library, and React Three Fiber, often described as threejs on steroids. In this episode we'll add the airplane component to the scene, and create the initial camera setup that will follow the airplane as it moves through the environment. On top of that we're also going...
JavaScript Game Development: Build an Airplane Flying Game with React Three Fiber & Three.js
มุมมอง 14K10 หลายเดือนก่อน
What's up youtube! welcome back to the channel! In this small javaScript game development tutorial, I'll try to show you how to create a simple, but exciting Airplane Flying Game using Three.js, a powerful 3D library, and React Three Fiber, often described as threejs on steroids. Wether you're a beginner or an experienced developer, this step-by-step guide will walk you through the entire proce...
Custom shaders w/ React Three Fiber and Nodetoy -Meteor Impact- Tutorial ep 4
มุมมอง 3.1Kปีที่แล้ว
And now it's time to complete our journey by animating the beams of light, we'll learn how to manipulate threejs' geometry attributes and how to update the position of specific vertices of a mesh, while keeping the other vertices unchanged. This little trick will be the only thing that's necessary to create an interesting animation and it'll mark the end of this project Hope you guys had fun on...
Custom shaders w/ React Three Fiber and Nodetoy -Meteor Impact- Tutorial ep 3
มุมมอง 1.8Kปีที่แล้ว
Now we'll hop into advanced territory by exploring a few new nodes in NodeToy and expanding on the tutorial we started on part 2, the objective of this part will be to recreate the lightning effect on the ground which we're going to model with a "ring" shader and then we'll see how to attach custom texture references to our NodeToy materials in react-three-fiber Github repo: github.com/Domenico...
Custom shaders w/ React Three Fiber and Nodetoy -Meteor Impact- Tutorial ep 2
มุมมอง 3.3Kปีที่แล้ว
Back with part 2! We'll go over the basics of creating a material in NodeToy and also use an interesting trick to overlay a custom material on top of an existing one. And as promised here is the story that chatGPT created for the little scene we're making: The three astronauts had been traveling through space for what felt like an eternity. They had been on a mission to explore a distant, white...
Custom shaders w/ React Three Fiber and Nodetoy -Meteor Impact- Tutorial ep 1
มุมมอง 7Kปีที่แล้ว
What's up youtube! after a 2 months break I finally found the time to prepare a new project in React Three Fiber to show some of the newest addition to the library like the amazing MeshTransmissionMaterial and the usage of a new tool called Nodetoy which makes creating custom shaders a breeze! Also fun community challenge: can you come up with a cool backstory for the scene we're building? I'd ...
Car physics mini game with React Three Fiber and Three.js [ Tutorial part 4 ]
มุมมอง 5Kปีที่แล้ว
We reached the finish line again! This is the last part of this short introduction on cannon.js and physics engines with threejs and react, I loved the interactivity aspect of this project and the fact that with a few simple controls we were able to create a project that will let you play on it for longer than you would expect! (or at least that was the case for me!) I'd like to thank all of yo...
Car physics mini game with React Three Fiber and Three.js [ Tutorial part 3 ]
มุมมอง 5Kปีที่แล้ว
Continuing our journey on the exploration of the physics engine cannon.js, we'll now focus on creating the controls for the car, which can be created by accessing the vehicleApi object that we've seen in the second episode, and we'll also start to create all the physics entities for our scene colliders, including the ramp! At the end of this part, you'll have a controllable vehicle that can cra...
Car physics mini game with React Three Fiber and Three.js [ Tutorial part 2 ]
มุมมอง 6Kปีที่แล้ว
Here's part two! Now it's time to introduce our physics engine, cannon.js, and the wrapper library that makes it easy to integrate it with react three fiber: useCannon! On this video we'll focus on preparing all the physics entities that are necessary to create a raycast vehicle, and we'll later use this code as a base for the next part where we'll jump into keyboard controls for the car! Proje...
Car physics mini game with React Three Fiber and Three.js [ Tutorial part 1 ]
มุมมอง 21Kปีที่แล้ว
Hello youtube! We're back with another small tutorial for react three fiber, this time we're also going to dip our toes into 3D physics with cannon.js! It's the first time I experiment with 3D physics on the browser and I wanted to share with you this fun scene that I've made in react threejs We'll touch plenty of new topics like the usage of cannon.js hooks, colliders, torque, follow up camera...
Floating portals with React Three Fiber and Three.js [ Tutorial part 4 ]
มุมมอง 3.7Kปีที่แล้ว
Floating portals with React Three Fiber and Three.js [ Tutorial part 4 ]
Floating portals with React Three Fiber and Three.js [ Tutorial part 3 ]
มุมมอง 2.8Kปีที่แล้ว
Floating portals with React Three Fiber and Three.js [ Tutorial part 3 ]
Floating portals with React Three Fiber and Three.js [ Tutorial part 2 ]
มุมมอง 3.8Kปีที่แล้ว
Floating portals with React Three Fiber and Three.js [ Tutorial part 2 ]
Floating portals with React Three Fiber and Three.js [ Tutorial part 1 ]
มุมมอง 13Kปีที่แล้ว
Floating portals with React Three Fiber and Three.js [ Tutorial part 1 ]
Create a 3D car show with React Three Fiber and Three.js [ Tutorial part 4 ]
มุมมอง 10K2 ปีที่แล้ว
Create a 3D car show with React Three Fiber and Three.js [ Tutorial part 4 ]
Create a 3D car show with React Three Fiber and Three.js [ Tutorial part 3 ]
มุมมอง 9K2 ปีที่แล้ว
Create a 3D car show with React Three Fiber and Three.js [ Tutorial part 3 ]
Create a 3D car show with React Three Fiber and Three.js [ Tutorial part 2 ]
มุมมอง 19K2 ปีที่แล้ว
Create a 3D car show with React Three Fiber and Three.js [ Tutorial part 2 ]
Create a 3D car show with React Three Fiber and Three.js [ Tutorial part 1 ]
มุมมอง 69K2 ปีที่แล้ว
Create a 3D car show with React Three Fiber and Three.js [ Tutorial part 1 ]
Three.js in practice - Earth and planes - tutorial for beginners 2022 - part 4
มุมมอง 2.6K2 ปีที่แล้ว
Three.js in practice - Earth and planes - tutorial for beginners 2022 - part 4
Three.js in practice - Earth and planes - tutorial for beginners 2022 - part 3
มุมมอง 1.8K2 ปีที่แล้ว
Three.js in practice - Earth and planes - tutorial for beginners 2022 - part 3
Three.js in practice - Earth and planes - tutorial for beginners 2022 - part 2
มุมมอง 2.6K2 ปีที่แล้ว
Three.js in practice - Earth and planes - tutorial for beginners 2022 - part 2
Three.js in practice - Earth and planes - tutorial for beginners 2022 - part 1
มุมมอง 8K2 ปีที่แล้ว
Three.js in practice - Earth and planes - tutorial for beginners 2022 - part 1
Three.js in practice - Procedural Map - tutorial for beginners 2022 - part 4
มุมมอง 5K2 ปีที่แล้ว
Three.js in practice - Procedural Map - tutorial for beginners 2022 - part 4
Three.js in practice - Procedural Map - tutorial for beginners 2022 - part 3
มุมมอง 4.8K2 ปีที่แล้ว
Three.js in practice - Procedural Map - tutorial for beginners 2022 - part 3
Three.js in practice - Procedural Map - tutorial for beginners 2022 - part 2
มุมมอง 7K2 ปีที่แล้ว
Three.js in practice - Procedural Map - tutorial for beginners 2022 - part 2
You can render the scene in a render texture and then feed it to the buffer prop. I used the meshTransmissionMaterial and ran into issue until I did that.
Learned so much about graphics just by watching this 3 part series beleive or not. Had to analyse each line and go research about it :D I finally understood everything but this one bit: ``` const angle = Math.acos(dirCos) - Math.PI * 0.5; ``` I don't get why you subtract `Math.PI * 0.5` from it. Can you explain why please? In my head doing `-Math.acos(dirCos) shoule be enough, but that doesn't work :(
I got it! its in respective to y axis, from x axis I have to go pi/2 - theta, not completly the same, but only if went upwards this would be same kind of: ``` const dirCos = dir.dot(new Vector3(-1, 0, 0)); const angle = -Math.acos(dirCos); ```
Amazing ❤ very good explanation
Amazing content. It will be awesome if you can share some tutorials on particles stuff with react three fiber
Hey it is possible to do the same thing you did in this series but using regular ThreeJS and Angular?
Hello, can we get the .blend file of the env pls pls
the best the besth!!!! wow
Thanks for this!
Interesting tutorial. I have a little problem. For some reasons when i tried normal.encoding =LinearEncoding i got an error saying three.js has no exported member LinearEncoding,
It was super interesting and fun to learn r3f with this project .. thanks man!
Thank you! :)
Hi Sir!. I want to make plane fly around the earth like you. I setup with r3f but the plane is not moving. Can you give me some advise? Thanks!!!
Amazing
All right, nice. And now confess to viewers what is that web vital score. LCP metric, please
It performs well on 4090s so it's safe to deploy to production /s
REALLY REALLY GRATEFUL FOR IT!!!!!! THIS CHANNEL IS UNDERRATEDDD AS HELLLLL!!!
Hey! I'm following this tutorial with threlte. I'm wondering if there's a threlte-way to use mergeBufferGeometry, because right now I'm just doing this inside the script tag, so can't take full advantage of svelte's features. Any insight would be helpful!
I never thought to render the scene as an environment map, I would have used screen space reflection postprocessing. I'm going to remake this in r3f since I don't know svelte, which I should at least try out before I try to do any work in it. Thanks for the lesson, you should create a course for threlte users for sure.
Ssrs would definitely be a great choice for this type of effect! And yes you should be able to easily port this app in r3f :)
im having trouble understanding what everything means man..where could i start with a beginner course ? do i have to learn three.js first ? I could blindly follow along but dont feel comfortable since i dont know what alot of this stuff means
It depends on how deep you want to go. Computer graphics is a large topic with a lot of different specializations. You could start by watching beginner tutorials on threejs, and if there's something in particular that peaked your interest that you didn't understand, you'd read an article on it Soon enough you'll know which topics to learn to continue your journey, and can decide which ones to explore
@@irradiance730 thank you for the encouraging words
my brain overheat
How do I make this responsive? does the ship resize on mobile?
It will resize automatically but only horizontally, the project as it is now is not really meant to be used on mobiles but can be adapted to work on it
@@irradiance730 I keep going to the same dead end every time I tried three.js stuff. They either get squished or clipped when the screen gets smaller. plus it makes my website really laggy. If I can get a 3d object to behave correctly on a hero section then I'll be happy
I‘m late, normal.encoding = LinearEncoding is declared.I couldn't find solution
VS code says we should use texture.colorSpace instead of .encoding now, its deprecated
outputColorSpace=THREE.SRGBColorSpace@@mohitkwatra118
@@mohitkwatra118 how to use it ?
thank you so much !
I don't get it how the car looks so good, do you import any textures to the code? every single time I import a model, looks like shit
I think the lighting makes it look better, especially the reflections from the elements in the scene. I'm not doing much other than importing the model and using it
What a wonderful 3 part series, thank you for sharing and would love to see more threlte content. personally, i have always avoided three.js and react fibre as i have always found it difficult to wrap my head around then both but threlte made it much easier.
I agree that threlte seems like the best of both worlds. Happy you liked the content! Thanks! ❤️
This is so damm cool stuff.
This guy all of sudden dropped masterpiece as always
Too kind ❤️ thanks!
Hey man, just wanna say that I really appreciate the work you do!
thank you, your feedback is precious and gives me the motivation to continue!
I enjoy your videos, they are always great. I think it would be cool if you took your Spaceship, the plane rings physics and your old procedurally generated maps to make a space game.
that would be a great idea! thank you for the feedback <3
this look epic
thank you, this is an amazing & super helpful tutorial series <3 <3 <3
Super happy to know you liked it! Thanks!
Hi+ Thanks a lot for the video! I have a question! What are you using to write/draw over vscode? Thanks!
It's a separate program called LiveDraw :)
@@irradiance730 Thanks a lot! ;)
Amazing!, another excellent project, I think this one can be the initial state to enter a WebApp and the traditional content can be placed coming from the side.
Exactly! That was my idea as well, and also have maybe a central title scrolling down as you enter the page
@@irradiance730Yeah this Tech can give many ways to approach a webApp, a lot more than a landing portfolio. Hope you can reach more people and grow more your Channel. Excellent content! Cheers!
Thank you so much for the threlte lecture I wanted.
My pleasure!
Great!, let's continue the with the class
Thanks a lot Domenico! This is a nice christmas gift :) If Threlte ever gets to the level of R3F i'm never using React again, lol.
Honestly I share the same sentiment, svelte is really, really nice to use and reason about, at least for me personally
What do you think Threlte is still missing?@@irradiance730
This scene look amazing, I joined the Animating a Spacehip crew waiting for the next part!.
Thank you! I'm happy to know you liked it! I'll start recording the next one right after xmas :)
I recently started watching your channel and enjoyed all your videos. I thought you wouldn’t post anymore threejs video as your last one was a while ago. I got so excited when I saw you posted this video and you motivated me in learning threejs once again!
Super happy you liked the content :) I definitely want to post more projects that are specific to vanilla threejs, hopefully next year I'll get the chance of uploading a little more!
This is so cool. Expecting part 2 :)
Will arrive soon! I'm already recording 📹
let's go cool
LETSGOOOOO
WOAHH THAT'S SO COOL!!! Been putting of learning svelte for a while, time to start! Looking forward to it!!
the man himself! thank you! you're an inspiration. I love svelte, if it had the same amount of resources of r3f it'd be an instant win for me personally
haha, you're my inspiration XD. Yeah totally agree with that as well, R3F is just so attractive with it's large community developing all those cool easy to use stuff!@@irradiance730
The blender model you created was gorgeous. Can you make a separate video on how to fully create it?
Thanks for the feedback! Which parts do you feel I should expand upon?
I used a different car model, and it seems like the tires don't rotate around the right axis. I tried playing with the axes a bit, but it seems like it's completely skewed compared to the rest of the vehicle model. Do you have any tips for debugging it? Great tutorial btw :)
this is definitely one of those cases where it'd be helpful to see how they spin in your project, send me an email
Thanks for sharing! I have finished the walk thru, and is now trying to add some extra features to this game on my own. One thing I am hoping to implement is the collision between the landscape and the plane. Could you shed some lights on how to achieve this feature?
Hello! You can definitely get close with a raycaster object and test it against the landscape, there should be plenty of tutorials on the internet on how to use a raycaster, hope this helps! :)
Great
I will love to learn brender too
brah...you just melted my brain
Great video - thank you! A change I used at about 2:59 was to check for after-noon 24-hour-based hours, like 20 for 8 p.m., and to add the fraction of minutes so the hour hand advances proportionally past the hour marker, so: var hour = date.getHours(); if(hour > 12) hour -= 12; var minute = date.getMinutes(); hour += Number(minute/60); var hourAngle = hour / 12 * Math.PI * 2; The minute calc can then be reused a few lines later to position the minute hand. Also, at about 4:00, my radius was much smaller, so multiplying the sin, cos result by half the hand length worked: var hourLine = customLine(0.02, 0.075, 0.007, "", "black"); hourLine.rotation.z = -hourAngle; hourLine.position.set(Math.sin(hourAngle)*.0375, Math.cos(hourAngle)*.0375, 0); Or, you could multiply by half the radius to have the hour hand float midway between the center and edge as in the original. Using half the length of each hand as the multiplier centers them all at the clock center. You could also stick with the original 2 radius (where the 1/2 radius multiplier would be 1 and can be omitted) and scale the result down or up as needed.
These are all great additions to the original algorithm, thanks for sharing! At some point I should find a way/place where I can show what the community creates based off of the initial input :)
To get a similar result, I had to set intensity in spotLight 150 and 200
bro you're my hero!!! I've stuck here for an hour!!!! Damn!
Thanks for that, I've got the same problem. It's something with the pc configuration?
@@paulomarques9746 no, sometimes in a newer versions of threejs the effect for intensity changes for some reason. so lets say in version 1.2v the intensity 2 was good for me but in a newer version the 2 intensity it's like if it was equal 1.3 so you need to move it up a little so you have the same result as the previous version. I hope that clears things up.
Just stumbled upon ur channel, I never write comments, but ur content is just so helpful and entertaining! hope to learn more from u and keep up the great work!
Thank you! I appreciate the comment and I'm glad these little projects are useful to the community :)
Love the vids man
Thank you!