A 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...
Scenes 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...
So 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...
Building 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...
Adding 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...
The previous post covered the 5 materials that are commonly used to render geometries, but there's one more that's well worth knowing - meshShaderMaterial. To understand meshShaderMaterial it's important to know what the "shader" part refers to. A sh...
In a 3D application things look a bit nicer if they have a material. A material is a set of parameters that instruct the renderer how to draw the surface of the geometry. That's not the same as a texture - a material might have a texture image, but i...
Drawing a cube, or an aeroplane, is cool, and moving the camera around it is also cool, but a 3D scene is even cooler when things move. In 3D applications the process of updating the scene to change the position, rotation and attributes of the models...
The first few posts in this blog have been about setting up a scene, adding a light and a cube, and moving the camera around, and then adding an FPS counter to check the scene is running an acceptable speed. These things are important steps to making...
