CNChris Nealeinonion2k.hashnode.dev·Dec 30, 2020 · 2 min readLabelling 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...00
CNChris Nealeinonion2k.hashnode.dev·Dec 24, 2020 · 5 min readPhysics 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...00
CNChris Nealeinonion2k.hashnode.dev·Dec 16, 2020 · 5 min readTexturing 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...00
CNChris Nealeinonion2k.hashnode.dev·Dec 7, 2020 · 5 min readDrawing 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...00
CNChris Nealeinonion2k.hashnode.dev·Dec 1, 2020 · 4 min readInteracting 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...01C
