- 53
- 335 053
Dan Greenheck
United States
Приєднався 2 лют 2023
Hey there! My name is Dan. I've been coding for over 20 years. I started this channel to share my passion for 3D graphics and games. I create tutorials primarily focused on Three.js, but also dive into other topics from time to time.
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
=========================================================================
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
epic
if i made my app like this how can i upload it to GitHub?
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
Yesss! Some R3F stuff :D Can't wait to see more advanced content coming from your end. This was so well done.
❤❤❤
Very cool!
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!
wow, looks very entertaining
Hey Dan. Thank you so so much for the shout-out my friend 🤩🤩🤩. It was a pleasure to help. The tutorial is amazing 👏🏻. Congratulations ✨️
You're welcome! I appreciate you taking the time to help out!
great!!!!
Great tutorial Dan Hope to see more react three fiber tutorial
Thanks for sharing
Cool idea!
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.
Great one
this is exacty what i dreamt of. Great job.
what programmig language / engine or tools do u use to make this game?
how to use a url from external server as a glb file as it is giving cors error
很好的教程
Love your content! Do you offer any courses on ThreeJS?
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
Thank you very much for the tutorial and the git example! Helped me a lot!
I would love to see more content like this to learn how to integrate the models into my website, thank you, I subscribe.
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
Thanks for the suggestions! I'll be cleaning things up a bit in the next video.
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 !
Thank you, Three Js is very entertaining, I'm already thinking about adding it to my web sites.
Thank you, I've been wanting to learn Three.js and Gsap for a while, I leave a sub and like, a hug!
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.
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.
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.
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?
You are correct. I fix this later on in the video (not sure when).
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.
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.
I actually thought the game would end up like the video thumbnail.
I'm not done yet :)
I'm only getting 60 fps, any reason why?
What's your monitor refresh rate?
@@dangreenheck it's a promotion MacBook Pro m4 , so should be 120 hz.. maybe it's a safari thing ?
@@dangreenheck confirmed, on chrome I get 120
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
Totally agree!
This is the series from your channel that makes me come back
Thank you, how interesting is this going, how should it look like at the end of this journey?
Even I don't know yet! I'll be add some improved visuals in the next few videos.
@@dangreenheck ahaha Thank :D
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.
I don't have plans to make the game grid-less.
Great work!
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.
It will be a mix of both types of content for now.