Labelling r3f objects using HTMLA huge advantage of using React and r3f to manage a 3D scene is that you can include things that are HTML and CSS as well as 3D objects by using Drei's Html component. This enables lots of possibilities for applications that add data alongside models...Dec 30, 2020 · 2 min readonion2k.hashnode.dev
Physics in r3f using the useCannon hookScenes in WebGL really come alive when they're moving and interactive. Creating realistic movement is hard though, so it's often good to approximate the same calculations that happen in reality instead of trying to write code to move things around. T...Dec 24, 2020 · 5 min readonion2k.hashnode.dev
Texturing a sphere with react-three-fiberSo far in these posts everything has looked pretty good, but all the objects have just had color and shininess applied. That's great (and fast) but it's not particularly like the real world. Objects have texture, so we need to add textures to our obj...Dec 16, 2020 · 5 min readonion2k.hashnode.dev
Drawing lots and lots of cubes with react-three-fiberBuilding a Three.JS scene that runs well can be hard. One thing that's a very common cause of slow down is just having too many objects to track. The problem is that sometimes you just want to have a lot of objects. Thankfully Three.JS provides a sol...Dec 7, 2020 · 5 min readonion2k.hashnode.dev
Interacting with objects with react-three-fiberAdding some good looking objects to a scene using Three.JS becomes significantly more useful if the user is able to interact with them. In a typical Three.JS application that means you'd need to listen for mouse clicks in the screen space and use a r...1GDec 1, 2020 · 4 min readonion2k.hashnode.dev
