Build a 3D World in React with ThreeJS and React Three Fiber

Build a 3D World in React with ThreeJS and React Three Fiber

Channel:
United States Coding Tech
Subscribers:
725,000
Published on ● Video Link: https://www.youtube.com/watch?v=9ZEjSxDRIik


Duration: 13:56
165,407 views
4,735

This video starts with me talking about the diference between React and ReactDOM. React Three Fiber uses React to keep track of 3D objects that gets rendered in a webGL canvas via three.js . The result is the ability to code 3D environments the same way you are used to code a React Web Application. We can even add physics and animation to the 3D objects in the world. In this example we place a Box on a Plane inside a Skybox of stars. We then add physics to let the box fall on the plane and finally we interact with the box by attaching a click event to the box. For the physics we are using React hooks for Cannon.js.


Code for the video: https://github.com/danba340/react-three-fiber-example


PUBLICATION PERMISSIONS:

Daniel Bark provided Coding Tech with the permission to republish his videos on Coding Tech YouTube channel.



CREDITS:
Barely Coding with Daniel Bark YouTube channel: https://www.youtube.com/channel/UCgUCptbp4T5saC5WXePe1sw


***


INTERESTED IN THE STOCK MARKET?
I developed a profitable trading model that generates high probability BUY & SELL signals on S&P500. To learn about it, visit https://yuriymatso.com/sp500-model/



Other Videos By Coding Tech


2021-05-22Constraint-Satisfaction Problems in Python
2021-05-20The New Responsive Web Design in a Component Driven World
2021-05-18Intro Into Multi Objective Optimization
2021-05-16Dapr, Lego for Microservices
2021-05-15How to Make A Deck of Cards With Python Using Object Oriented Programming (OOP)
2021-05-15Building Quantum Future With Quantum Computing
2021-05-13Quantum Computing Deep Dive
2021-05-13Interpret Any Machine Learning Model With Shapley Values
2021-05-10Building Intercom's Inbox Clone Using Tailwind CSS
2021-05-09Typescript for React Components (or How To Write Components in React The Right Way)
2021-05-08Build a 3D World in React with ThreeJS and React Three Fiber
2021-05-07Trio: Structured Concurrency for Python (Alternative to Asyncio)
2021-05-06Why Microservices Fail
2021-05-04Building a Music Recommendation Engine
2021-04-30How Does YouTube Recommend Videos -- AI EXPLAINED
2021-04-27Async… oh, wait (Introduction into Async/Await)
2021-04-24Stranger Danger: Your NodeJS Attack Surface Just Got Bigger (Live Hacking Session)
2021-04-24Watching the Watchers -- How Surveillance Companies Track You Using Mobile Networks
2021-04-23Interviewing For Technical Roles -- Tips and Tricks
2021-04-23Hacking the Nintendo Game & Watch
2021-04-22VueJS Intermediate Workshop (Learn VueJS Best Practices)


Tags:
three.js
three js
react js
react.js
react three fiber