Dan Greenheck
Dan Greenheck
  • 53
  • 335 053
Learn to Build a 3D Lightsaber Configurator with React Three Fiber!
To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/DanGreenheck/ . You’ll also get 20% off an annual premium subscription.
=========================================================================
Support me on Patreon ❤️ patreon.com/DanGreenheck
⚠️ Sign up for my upcoming course and receive a coupon for 30% OFF your first purchase!
threejsroadmap.com
=========================================================================
💻 SOURCE CODE
github.com/dgreenheck/3d-lightsaber-configurator
🎮 LIVE DEMO
dgreenheck.github.io/3d-lightsaber-configurator/
⭐️ LIBRARIES
threejs.org
r3f.docs.pmnd.rs
drei.docs.pmnd.rs
react-postprocessing.docs.pmnd.rs
🛠️TOOLS
www.blockadelabs.com/
gainmap-creator.monogrid.com/
=========================================================================
0:00 Intro
0:38 Libraries
1:42 Project Structure
2:22 App Component
3:29 Scene Component
4:02 Reflective Floor
4:58 Sponsored Message
6:08 Preparing 3D Models
6:51 Lightsaber Component
9:10 Blade Open/Close Animation
9:58 Blade Emissive Light
10:33 Environment Background
12:01 Post-Processing
14:17 Sound Effects
17:35 Support Me on Patreon
This video was sponsored by Brilliant
Переглядів: 762

Відео

Let's Build a 3D RPG with Three.js! // 9. Combat (Part 2/2)
Переглядів 1,9 тис.21 день тому
Support me on Patreon ❤️ patreon.com/DanGreenheck ⚠️ Sign up for my upcoming course and receive a coupon for 30% OFF your first purchase! threejsroadmap.com 💻 SOURCE CODE github.com/dgreenheck/isometric-rpg 🎮 LIVE DEMO dgreenheck.github.io/isometric-rpg/ ▶️ PLAYLIST ua-cam.com/play/PLtzt35QOXmkKkZL63E3IXDxqvP13MHyTE.html 0:00 Adding Players to Collision Detection 12:21 Arrow Function Binding 17...
Let's Build a 3D RPG with Three.js! // 8. Combat (Part 1/2)
Переглядів 1,2 тис.21 день тому
Support me on Patreon ❤️ patreon.com/DanGreenheck ⚠️ Sign up for my upcoming course and receive a coupon for 30% OFF your first purchase! threejsroadmap.com 💻 SOURCE CODE github.com/dgreenheck/isometric-rpg 🎮 LIVE DEMO dgreenheck.github.io/isometric-rpg/ ▶️ PLAYLIST ua-cam.com/play/PLtzt35QOXmkKkZL63E3IXDxqvP13MHyTE.html 0:00 Overview 5:11 Action Selection UI 7:39 "Wait" Action 9:39 Player.getA...
Create STUNNING 3D Scroll Animations with Next.js | Step-by-Step Guide
Переглядів 1,8 тис.Місяць тому
To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/DanGreenheck/ . You’ll also get 20% off an annual premium subscription Support me on Patreon ❤️ patreon.com/DanGreenheck ⚠️ Sign up for my upcoming course and receive a coupon for 30% OFF your first purchase! threejsroadmap.com ⭐️ THREE.JS threejs.org ⭐️ REACT-THREE-FIBER r3f.docs.pmnd.rs ⭐️ GSAP gsap.com 💻 MA...
Three.js Crash Course for Beginners | Build a 3D Art/Project Gallery!
Переглядів 4 тис.Місяць тому
Support me on Patreon ❤️ patreon.com/DanGreenheck ⚠️ Sign up for my upcoming course and receive a coupon for 30% OFF your first purchase! threejsroadmap.com 0:00 Introduction 1:27 Installing Three.js and Vite 5:51 Three.js Demo App 8:09 What Is A Scene? 8:54 What Is A Camera? 10:30 Geometry, Materials and Meshes 12:59 The Render Loop 15:52 Loading Images 17:22 Handling Resizing 19:23 Laying Out...
Learn to Build Minecraft With Three.js!
Переглядів 9612 місяці тому
Interested in learning 3D web development but don't know where to start? 🤔 Check out my FREE 10-part course on UA-cam where I will teach you how to build a Minecraft ⛏️ clone from scratch with Three.js! Link To Playlist 👇 ua-cam.com/play/PLtzt35QOXmkKALLv9RzT8oGwN5qwmRjTo.html Source Code: github.com/dgreenheck/minecraft-threejs-clone Live Demo: dgreenheck.github.io/minecraft-threejs-clone/ #th...
I have a big announcement...
Переглядів 8752 місяці тому
Become a member today! www.patreon.com/dangreenheck ⚠️ Sign up for my upcoming course and receive a coupon for 30% OFF your first purchase! threejsroadmap.com
Let's Build a 3D RPG with Three.js! // 7. Action System (Part 2/2)
Переглядів 3,8 тис.2 місяці тому
Support me on Patreon ❤️ patreon.com/DanGreenheck ⚠️ Sign up for my upcoming course and receive a coupon for 30% OFF your first purchase! threejsroadmap.com 💻 SOURCE CODE github.com/dgreenheck/isometric-rpg 🎮 LIVE DEMO dgreenheck.github.io/isometric-rpg/ ▶️ PLAYLIST ua-cam.com/play/PLtzt35QOXmkKkZL63E3IXDxqvP13MHyTE.html 0:00 Intro 2:06 Refactoring Player Class 6:54 Action Class 10:11 MovementA...
I Made An Open-Source Procedural Tree Generator
Переглядів 1,4 тис.2 місяці тому
Support me on Patreon ❤️ patreon.com/DanGreenheck ⚠️ Sign up for my upcoming course and receive a coupon for 30% OFF your first purchase! threejsroadmap.com 🌲LIVE DEMO eztree.dev EZ-Tree is a free, open-source procedural tree generation tool. Use it to create tree models for your 2D/3D games, websites, renders, or whatever your use case! Features ⭐️ 50 tunable parameters ⭐️ 15 built-in presets ...
Let's Build a 3D RPG with Three.js! // 6. Action System (Part 1/2)
Переглядів 2,7 тис.2 місяці тому
Support me on Patreon ❤️ patreon.com/DanGreenheck ⚠️ Sign up for my upcoming course and receive a coupon for 30% OFF your first purchase! threejsroadmap.com 💻 SOURCE CODE github.com/dgreenheck/isometric-rpg 🎮 LIVE DEMO dgreenheck.github.io/isometric-rpg/ ▶️ PLAYLIST ua-cam.com/play/PLtzt35QOXmkKkZL63E3IXDxqvP13MHyTE.html 0:00 Intro 2:38 Planning 8:54 Reorganizing Project Structure 11:53 Refacto...
Let's Build a 3D RPG with Three.js! // 5. Pathfinding
Переглядів 3 тис.3 місяці тому
Support me on Patreon ❤️ patreon.com/DanGreenheck ⚠️ Sign up for my upcoming course and receive a coupon for 30% OFF your first purchase! threejsroadmap.com 💻 SOURCE CODE github.com/dgreenheck/isometric-rpg 🎮 LIVE DEMO dgreenheck.github.io/isometric-rpg/ ▶️ PLAYLIST ua-cam.com/play/PLtzt35QOXmkKkZL63E3IXDxqvP13MHyTE.html 📈 PATHFINDING VISUALIZER qiao.github.io/PathFinding.js/visual/ 0:00 Recap ...
Let's Build a 3D RPG with Three.js! // 4. Point & Click Controls
Переглядів 4,2 тис.3 місяці тому
Support me on Patreon ❤️ patreon.com/DanGreenheck ⚠️ Sign up for my upcoming course and receive a coupon for 30% OFF your first purchase! threejsroadmap.com 💻 SOURCE CODE github.com/dgreenheck/isometric-rpg 🎮 LIVE DEMO dgreenheck.github.io/isometric-rpg/ ▶️ PLAYLIST ua-cam.com/play/PLtzt35QOXmkKkZL63E3IXDxqvP13MHyTE.html 0:00 Recap and Overview 1:34 Device Pixel Ratio 2:54 Creating the Player C...
Let's Build a 3D RPG with Three.js! // 3. Creating the World
Переглядів 7 тис.4 місяці тому
Let's Build a 3D RPG with Three.js! // 3. Creating the World
Let's Build a 3D RPG with Three.js! // 2. Project Setup
Переглядів 7 тис.4 місяці тому
Let's Build a 3D RPG with Three.js! // 2. Project Setup
Let's Build a 3D RPG with Three.js! // 1. Planning
Переглядів 8 тис.4 місяці тому
Let's Build a 3D RPG with Three.js! // 1. Planning
I Suck At Art So I Made An Open Source Procedural Tree Generator
Переглядів 3,3 тис.5 місяців тому
I Suck At Art So I Made An Open Source Procedural Tree Generator
10. BIOMES // Coding a Minecraft Clone with JavaScript + Three.js
Переглядів 2,7 тис.8 місяців тому
10. BIOMES // Coding a Minecraft Clone with JavaScript Three.js
Realistic Reflections in Three.js with Environment Mapping
Переглядів 4,4 тис.9 місяців тому
Realistic Reflections in Three.js with Environment Mapping
9. TOOL ANIMATION, TOOLBAR, SAVE & LOAD // Coding a Minecraft Clone with JavaScript + Three.js
Переглядів 2,3 тис.9 місяців тому
9. TOOL ANIMATION, TOOLBAR, SAVE & LOAD // Coding a Minecraft Clone with JavaScript Three.js
8. TREES WATER CLOUDS // Coding a Minecraft Clone with JavaScript + Three.js
Переглядів 3,3 тис.9 місяців тому
8. TREES WATER CLOUDS // Coding a Minecraft Clone with JavaScript Three.js
7. ADD/REMOVE BLOCKS // Coding a Minecraft Clone with JavaScript + Three.js
Переглядів 1,6 тис.10 місяців тому
7. ADD/REMOVE BLOCKS // Coding a Minecraft Clone with JavaScript Three.js
Three.js Raycasting Tutorial for Beginners
Переглядів 11 тис.10 місяців тому
Three.js Raycasting Tutorial for Beginners
6. INFINITE TERRAIN // Coding a Minecraft Clone with JavaScript + Three.js
Переглядів 3,3 тис.10 місяців тому
6. INFINITE TERRAIN // Coding a Minecraft Clone with JavaScript Three.js
15. POWER PLANTS // Creating a SimCity Game with JavaScript & Three.js
Переглядів 14 тис.11 місяців тому
15. POWER PLANTS // Creating a SimCity Game with JavaScript & Three.js
14. MODULES // Creating a SimCity Game with JavaScript & Three.js
Переглядів 4,8 тис.11 місяців тому
14. MODULES // Creating a SimCity Game with JavaScript & Three.js
Procedurally Generating Planets with Three.js
Переглядів 4,9 тис.Рік тому
Procedurally Generating Planets with Three.js
Build a 3D Developer Portfolio That Gets You HIRED
Переглядів 9 тис.Рік тому
Build a 3D Developer Portfolio That Gets You HIRED
5. COLLISION DETECTION // Coding a Minecraft Clone with JavaScript + Three.js
Переглядів 4 тис.Рік тому
5. COLLISION DETECTION // Coding a Minecraft Clone with JavaScript Three.js
4. PLAYER // Coding a Minecraft Clone with JavaScript + Three.js
Переглядів 3,7 тис.Рік тому
4. PLAYER // Coding a Minecraft Clone with JavaScript Three.js
3. BLOCK TYPES // Coding a Minecraft Clone with JavaScript + Three.js
Переглядів 3,1 тис.Рік тому
3. BLOCK TYPES // Coding a Minecraft Clone with JavaScript Three.js

КОМЕНТАРІ

  • @Next-Js
    @Next-Js 3 дні тому

    epic

  • @ירדןזילברמן
    @ירדןזילברמן 3 дні тому

    if i made my app like this how can i upload it to GitHub?

  • @veith3dclub
    @veith3dclub 4 дні тому

    Thank you thank you thank you!!! Thank you so much for explaining it so well, also your video and everything is so professional and so good for me as a beginner to dive in :) I still need to figure out vite and haven’t found anything for a noob like me hahaha

  • @genshian
    @genshian 6 днів тому

    Yesss! Some R3F stuff :D Can't wait to see more advanced content coming from your end. This was so well done.

  • @iamankusingh
    @iamankusingh 6 днів тому

    ❤❤❤

  • @MatheusSilva-qm3ph
    @MatheusSilva-qm3ph 7 днів тому

    Very cool!

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 8 днів тому

    I like ThreeJs , but when I saw that it was a light saber, I thought just to see it in case it was useful for something real or play with my portfolio, but wow , I was really surprised, the work behind this video, the editing, the audio, the quality and way to explain everything step by step, is amazing , I really appreciate the effort you put into this, I want to try how is the performance on the web so I can integrate these things in projects and give them life, keep it up, a hug and happy new year!

  • @Next-Js
    @Next-Js 9 днів тому

    wow, looks very entertaining

  • @AndersonMancini
    @AndersonMancini 10 днів тому

    Hey Dan. Thank you so so much for the shout-out my friend 🤩🤩🤩. It was a pleasure to help. The tutorial is amazing 👏🏻. Congratulations ✨️

    • @dangreenheck
      @dangreenheck 9 днів тому

      You're welcome! I appreciate you taking the time to help out!

  • @danielevangelista2302
    @danielevangelista2302 10 днів тому

    great!!!!

  • @nikolas4749
    @nikolas4749 10 днів тому

    Great tutorial Dan Hope to see more react three fiber tutorial

  • @irfansaeedkhan7242
    @irfansaeedkhan7242 10 днів тому

    Thanks for sharing

  • @xreplayzx117replayziscool6
    @xreplayzx117replayziscool6 10 днів тому

    Cool idea!

  • @dangreenheck
    @dangreenheck 10 днів тому

    To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/DanGreenheck/ . You’ll also get 20% off an annual premium subscription.

  • @prasathdevwiz
    @prasathdevwiz 10 днів тому

    Great one

  • @shadehunter666
    @shadehunter666 10 днів тому

    this is exacty what i dreamt of. Great job.

  • @hantonrech
    @hantonrech 12 днів тому

    what programmig language / engine or tools do u use to make this game?

  • @MansiJangid-q1d
    @MansiJangid-q1d 13 днів тому

    how to use a url from external server as a glb file as it is giving cors error

  • @aachomiao
    @aachomiao 13 днів тому

    很好的教程

  • @mycloudvip
    @mycloudvip 13 днів тому

    Love your content! Do you offer any courses on ThreeJS?

    • @dangreenheck
      @dangreenheck 13 днів тому

      I have one in the works! Hoping to release the first lessons in early 2025. You can join the wait list here and get 30% off your first purchase: threejsroadmap.com

  • @LightFromThePast
    @LightFromThePast 13 днів тому

    Thank you very much for the tutorial and the git example! Helped me a lot!

  • @Catador-de-videos
    @Catador-de-videos 13 днів тому

    I would love to see more content like this to learn how to integrate the models into my website, thank you, I subscribe.

  • @MonoMario89
    @MonoMario89 15 днів тому

    really good video. I feel that there was a World object where everything sits on top of that and then in the constructor have path finder set up, to be use and reused by it's children. In this case, the base player and gameobject objects would suffice. Anyway, just my thoughts

    • @dangreenheck
      @dangreenheck 13 днів тому

      Thanks for the suggestions! I'll be cleaning things up a bit in the next video.

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 18 днів тому

    It is very interesting the project, I will start to do it, your channel with ThreeJs stuff is amazing, I hope to see more material like this to learn, a hug !

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 18 днів тому

    Thank you, Three Js is very entertaining, I'm already thinking about adding it to my web sites.

  • @404-not-found-service
    @404-not-found-service 18 днів тому

    Thank you, I've been wanting to learn Three.js and Gsap for a while, I leave a sub and like, a hug!

  • @rnbwskies
    @rnbwskies 19 днів тому

    Awesome video! I managed to get biomes generating from 3 main layers of noise: elevation, temperature, and precipitation. Elevation determines the surface height and switches between ocean, coast, and land biomes. This is close to what you have, but I brought the elevation into the biome calculation so that oceans have their own biomes. And temperature and precipitation switched between hot and cold biomes and wet and dry biomes. I had to do research into how biomes work IRL, but managed to build a map for a few biomes. It's similar to how you have temperature vs humidity, but you seemed to abandon humidity due to how harsh the biome transitions were. I think the main issue with your approach is that you dont have a lot of biomes to choose from. With more biomes, the transitions are more gradual. I implemented tundra, taiga, grasslands, desert, savanna, temperate forest, tropical forest, and tropical rainforests, and the transitions between them seem much more gradual. You have to go through a few biomes to go from tundra to tropical rainforests. That, and I also drastically increased the scale of the noise so that biomes are much bigger and take time to traverse.

  • @dimitris5032
    @dimitris5032 20 днів тому

    One more this week. Fantastic! Keep going with these, they are really interesting. It will be great to see more detail developed into a proper game.

  • @ibrondtd
    @ibrondtd 20 днів тому

    Great video! One thing came into my mind is that Three.js has a distanceTo function for Vector3s, you don't have to clone and subtract them.

  • @supermroz
    @supermroz 21 день тому

    Hi Dan, thanks for making another episode of this great series, the game is moving along nicely! At around 31:00 when you're implementing onDestroy, shouldn't you only call onDestroy if the GameObject is actually killed?

    • @dangreenheck
      @dangreenheck 20 днів тому

      You are correct. I fix this later on in the video (not sure when).

  • @DanDarger
    @DanDarger 21 день тому

    Thanks Dan. Great videos. I would like to see the raycasting refactoring into utilits stuff you mentioned make it into this project. You mentioned it solved a lot of the issues with having to pass world and camera stuff down everywhere so I think it'd be worthwhile. Either way, graphics overhaul sounds cool too.

    • @dangreenheck
      @dangreenheck 20 днів тому

      I'm going to try and break this into smaller episodes (I always gravitate towards longer videos since I tend to ramble!) so I think this would be a great short video. Makes sense to tackle this prior to updating the graphics.

  • @unrealopenworld
    @unrealopenworld 21 день тому

    I actually thought the game would end up like the video thumbnail.

  • @taimurkhaliq
    @taimurkhaliq 21 день тому

    I'm only getting 60 fps, any reason why?

    • @dangreenheck
      @dangreenheck 21 день тому

      What's your monitor refresh rate?

    • @taimurkhaliq
      @taimurkhaliq 20 днів тому

      @@dangreenheck it's a promotion MacBook Pro m4 , so should be 120 hz.. maybe it's a safari thing ?

    • @taimurkhaliq
      @taimurkhaliq 20 днів тому

      @@dangreenheck confirmed, on chrome I get 120

  • @scullyy
    @scullyy 22 дні тому

    I like the trees being destructible. I'm a big sucker for the immersive sim features in games, where objects on the screen have properties like HP, weight and other traits. Like what if you could pick up the rocks and throw them at people? :p

  • @dimitris5032
    @dimitris5032 23 дні тому

    This is the series from your channel that makes me come back

  • @Next-Js
    @Next-Js 23 дні тому

    Thank you, how interesting is this going, how should it look like at the end of this journey?

    • @dangreenheck
      @dangreenheck 21 день тому

      Even I don't know yet! I'll be add some improved visuals in the next few videos.

    • @Next-Js
      @Next-Js 21 день тому

      @@dangreenheck ahaha Thank :D

  • @jimmyroserovallejo
    @jimmyroserovallejo 23 дні тому

    Greetings, will you add modal windows to collisions or cell phone support? Or in the future that they can move freely around the map and collide with trees or rocks? When I get more advanced I plan to follow your complete tutorial.

    • @dangreenheck
      @dangreenheck 21 день тому

      I don't have plans to make the game grid-less.

  • @aumer-amr
    @aumer-amr 24 дні тому

    Great work!

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 25 днів тому

    Hello, I loved the project and the others you have, are super entertaining, you plan to do more projects like this? or as Minecraft? I like the interaction that has the web with 3d models and your work is excellent, it is appreciated.

    • @dangreenheck
      @dangreenheck 23 дні тому

      It will be a mix of both types of content for now.